@extends('backend.layouts.app')
@section('setting') open @endsection
@section('about-setting') active @endsection

@section('content')
<!-- Page Content -->
<div class="content">

    <div class="row">
        <!-- Row #2 -->
        <div class="col-md-12 mx-auto">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Update About Us</h3>
                </div>
                <div class="block-content">
                    <!-- Form Horizontal - Default Style -->
                    <form class="mb-5" action="{{ route('about-us.update') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="old_image" value="{{ $data->image }}">
                        <input type="hidden" name="old_breadcrumb" value="{{ $data->breadcrumb }}">
                        <input type="hidden" name="old_small_image" value="{{ $data->small_image }}">
                        <input type="hidden" name="old_big_image" value="{{ $data->big_image }}">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="title">Title</label>
                                    <input type="text" class="form-control" id="title" name="title"
                                        placeholder="Your Title.." value="{{ $data->title }}">
                                    @error('title')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="video">Video Link</label>
                                    <input type="text" class="form-control" id="video" name="video"
                                        placeholder="Enter video number.." value="{{ $data->video }}">
                                    @error('video')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>                            
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="image">Choose Image</label>
                                    <input type="file" class="form-control" id="image" name="image"
                                        placeholder="Enter website logo.." onchange="loadFile(event)">
                                    @error('image')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    <br>
                                    @if (!empty($data->image) && file_exists($data->image))
                                    <img id="output" src="{{ asset($data->image) }}"
                                        alt="{{ $data->title }}" style="width: 120px; height: 80px;">
                                    @else
                                    <img id="output" src="{{ asset('common/no-image.jpg') }}"
                                        alt="{{ $data->title }}" style="width: 120px; height: 80px;">
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="breadcrumb">Choose Breadcrumb </label>
                                    <input type="file" class="form-control" id="breadcrumb" name="breadcrumb"
                                        placeholder="Enter website logo.." onchange="loadBreadcrumbFile(event)">
                                    @error('breadcrumb')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    <br>
                                    @if (!empty($data->breadcrumb) && file_exists($data->breadcrumb))
                                    <img id="preview-breadcrumb" src="{{ asset($data->breadcrumb) }}"
                                        alt="Image" style="width: 120px; height: 80px;">
                                    @else
                                    <img id="preview-breadcrumb" src="{{ asset('common/no-image.jpg') }}"
                                        alt="Image" style="width: 120px; height: 80px;">
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="small_image">Choose Small Image</label>
                                    <input type="file" class="form-control" id="small_image" name="small_image"
                                        placeholder="Enter website logo.." onchange="loadSmallImageFile(event)">
                                    @error('small_image')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    <br>
                                    @if (!empty($data->small_image) && file_exists($data->small_image))
                                    <img id="small_image_preview" src="{{ asset($data->small_image) }}"
                                        alt="Image" style="width: 120px; height: 80px;">
                                    @else
                                    <img id="small_image_preview" src="{{ asset('common/no-image.jpg') }}"
                                        alt="Image" style="width: 120px; height: 80px;">
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="big_image"> Choose Big Image </label>
                                    <input type="file" class="form-control" id="big_image" name="big_image"
                                        placeholder="Enter website logo.." onchange="loadBigImageFile(event)">
                                    @error('big_image')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    <br>
                                    @if (!empty($data->big_image) && file_exists($data->big_image))
                                    <img id="preview_big_image" src="{{ asset($data->big_image) }}"
                                        alt="Image" style="width: 120px; height: 80px;">
                                    @else
                                    <img id="preview_big_image" src="{{ asset('common/no-image.jpg') }}"
                                        alt="Image" style="width: 120px; height: 80px;">
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="charity">Charity</label>
                                    <input type="number" class="form-control" id="charity" name="charity"
                                        placeholder="Your charity.." value="{{ $data->charity }}">
                                    @error('charity')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="funding">Funding</label>
                                    <input type="number" class="form-control" id="funding" name="funding"
                                        placeholder="Your funding.." value="{{ $data->funding }}">
                                    @error('funding')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="mission">Our Mission</label>
                                    <textarea class="form-control" rows="4" name="mission">{{ $data->mission }}</textarea>
                                    @error('mission')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>  
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label" for="story"> Our Story</label>
                                    <textarea class="form-control" rows="4" name="story">{{ $data->story }}</textarea>
                                    @error('story')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-4">
                                    <label class="form-label" for="description">About Description</label>
                                    <textarea class="editor form-control"
                                        name="description">{{ $data->description }}</textarea>
                                    @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>                                    
                        </div>

                        <div class="mb-4">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                    <!-- END Form Horizontal - Default Style -->
                </div>
            </div>
        </div>
        <!-- END Row #2 -->
    </div>

</div>
<!-- END Page Content -->
@endsection

@section('script')
    <script>
        var loadBreadcrumbFile = function(event) {
            var reader = new FileReader();
            reader.onload = function(){
            var output = document.getElementById('preview-breadcrumb');
            output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        };
        var loadSmallImageFile = function(event) {
            var reader = new FileReader();
            reader.onload = function(){
            var output = document.getElementById('small_image_preview');
            output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        };
        var loadBigImageFile = function(event) {
            var reader = new FileReader();
            reader.onload = function(){
            var output = document.getElementById('preview_big_image');
            output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        };
    </script>
@endsection