@extends('Admin.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-4 col-sm-4">
        <div class="card">
            <div class="card-header">
                <h3>Founder Section</h3>
            </div>
            <div class="card-body">
                <form action="{{route('admin.founder_description')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="" class="form-label">Founder Name</label>
                        <input type="text" class="form-control" name="founder_name" value="{{$founder_description?$founder_description->founder_name:''}}">
                    
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label">Founder Position</label>
                        <input type="text" class="form-control" name="founder_position"value="{{$founder_description?$founder_description->founder_designation:''}}">
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label">Founder speech</label>
                        {{-- {{$founder_description->founder_speech}} --}}
                        <textarea name="founder_speech" id="" class="form-control" style="text-align: left;">
                            {{$founder_description?$founder_description->founder_speech:''}}
                        </textarea>
                    </div>
                    <div class="mb-3">
                        <label for="founder_picture" class="form-label">Founder Picture</label>
                        <input type="file" name="founder_picture" id="founder_picture" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <div id="founder_picture_js" class="d-flex justify-content-center align-items-center" style="border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 100%; height: 200px; background-color: #f8f9fa;">
                           
                            @if($founder_description)
                            {{-- {{$founder_description->founder_image}} --}}
                            <img src="{{asset('/')}}{{$founder_description->founder_image}}" style="max-width:100%;max-height:100%;" alt="">
                            @else
                            <span class="text-muted">Image preview will appear here</span>

                            @endif
                           
                           
                        </div>
                    </div>
                  
                  
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">Insert Data</button>
                    </div>
                </form>
                

            </div>
        </div>

    </div>

    <div class="col-lg-4 col-sm-4">
        <div class="card">
            <div class="card-header">
                <h3>Our Mission</h3>
            </div>
            <div class="card-body">
                <form action="{{route('admin.our_history')}}" method="POST" enctype="multipart/form-data">
                    @csrf

                    @if($errors->any())
                  {!! implode('', $errors->all('<div>:message</div>')) !!}
                  @endif
                    <div class="mb-3">
                        <label for="" class="form-label">title</label>
                        <input type="text" class="form-control" name="title" value="{{$our_history?$our_history->title:''}}">
                    
                    </div>
                   
                    <div class="mb-3">
                        <label for="" class="form-label">Our History</label>
                       
                        <textarea name="our_history" id="" class="form-control" style="text-align: left;">
                            {{$our_history?$our_history->description:''}}
                        </textarea>
                    </div>
                    <div class="mb-3">
                        <label for="founder_picture" class="form-label">Founder Picture</label>
                        <input type="file" name="history_picture" id="history_picture" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <div id="history_picture_js" class="d-flex justify-content-center align-items-center" style="border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 100%; height: 200px; background-color: #f8f9fa;">
                           {{-- <img src="{{asset('/')}}/{{$our_history->image}}" alt="">{{$our_history->image}} --}}
                            @if(isset($our_history))
                         
                            <img src="{{asset('/')}}{{$our_history->image}}" style="max-width:100%;max-height:100%;" alt="">
                            @else
                            <span class="text-muted">Image preview will appear here</span>

                            @endif
                           
                           
                        </div>
                    </div>
                  
                  
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">Insert Data</button>
                    </div>
                </form>
                

            </div>
        </div>

    </div>

    <div class="col-lg-4 col-sm-4">
        <div class="card">
            <div class="card-header">
                <h3>Our Vision</h3>
            </div>
            <div class="card-body">
                <form action="{{route('admin.our_vision')}}" method="POST" enctype="multipart/form-data">
                    @csrf

                    @if($errors->any())
                  {!! implode('', $errors->all('<div>:message</div>')) !!}
                  @endif
                    <div class="mb-3">
                        <label for="" class="form-label">title</label>
                        <input type="text" class="form-control" name="titel" value="{{$our_vision?$our_vision->title:''}}">
                    
                    </div>
                   
                    <div class="mb-3">
                        <label for="" class="form-label">Our History</label>
                       
                        <textarea name="description" cols="0" rows="5" id="" class="form-control" style="">{{$our_vision?$our_vision->description:''}}</textarea>
                            
                     
                    </div>
                    <div class="mb-3">
                        <label for="founder_picture" class="form-label">Our Vision Picture</label>
                        <input type="file" name="our_vision_image" id="our_vision" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <div id="our_vision_js" class="d-flex justify-content-center align-items-center" style="border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 100%; height: 200px; background-color: #f8f9fa;">
                            {{-- {{$our_vision->image}} --}}
                            {{-- <img src="{{asset('/')}}{{$our_vision->image}}" alt=""> --}}

                            @if(isset($our_vision))
                         
                            <img src="{{asset('/')}}{{$our_vision->image}}" style="max-width:100%;max-height:100%;" alt="">
                            @else
                            <span class="text-muted">Image preview will appear here</span>

                            @endif
                           
                           
                        </div>
                    </div>
                  
                  
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">Insert Data</button>
                    </div>
                </form>
                

            </div>
        </div>

    </div>
   
</div>
<script>
    $(document).ready(function() {
        $('#our_vision').change(function(event) {
            const imagePreview = $('#our_vision_js');
            imagePreview.empty();
    
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
    </script>
<script>
    $(document).ready(function() {
        $('#founder_picture').change(function(event) {
            const imagePreview = $('#founder_picture_js');
            imagePreview.empty();
    
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
    </script>


<script>
    $(document).ready(function() {
        $('#history_picture').change(function(event) {
            const imagePreview = $('#history_picture_js');
            imagePreview.empty();
    
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
    </script>

<script>
    $(document).ready(function() {
        $('#founder_picture').change(function(event) {
            const imagePreview = $('#founder_picture_js');
            imagePreview.empty();
    
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
    </script>

<script>
    $(document).ready(function() {
        $('#founder_picture').change(function(event) {
            const imagePreview = $('#founder_picture');
            imagePreview.empty();
    
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
    </script>

<script>
    $(document).ready(function() {
        $('#slider').change(function(event) {
            const imagePreview = $('#imagePreview_carousel');
            imagePreview.empty();
    
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = $('<img>').attr('src', e.target.result).css({
                        'max-width': '100%',
                        'max-height': '100%'
                    });
                    imagePreview.append(img);
                }
                reader.readAsDataURL(file);
            } else {
                imagePreview.html('<span class="text-muted">Image preview will appear here</span>');
            }
        });
    });
    </script>

@if(session('success'))
<script>
    const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
Toast.fire({
icon: "success",
title: "{{session('success')}}"
});
</script>
@endif

@if(session('error'))
<script>
    const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
Toast.fire({
icon: "error",
title: "{{session('success')}}"
});
</script>
@endif
    
@endsection