<x-app-layout>
    @section('title')
        System Settings
    @endsection

    <!-- DataTales Example -->
    <form action="{{ route('admin.general-settings.update',$data->id) }}" method="post" enctype="multipart/form-data">
        @csrf
        @method("PUT")
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    System Settings
                </h6>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label for="system_name" class="mb-0">System Name <span class="text-danger">*</span></label>
                    <input type="text" value="{{ $data->system_name }}" name="system_name" id="system_name" class="form-control">
                    @error('system_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="system_logo" class="mb-0">System Logo <span class="text-danger">*</span></label>
                    <input type="file" value="{{ $data->system_logo }}" name="system_logo" id="system_logo" class="form-control mb-2">
                    @error('system_logo')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                    @if ($data->system_logo==NULL)
                    <div>
                        <img id="systemlogoPrev" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="{{ asset('backend/assets/images/prev.jpg') }}" alt="{{ $data->system_name }}">
                    </div>
                    @else
                    <div>
                        <img id="systemlogoPrev" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="{{ asset($data->system_logo) }}" alt="{{ $data->system_name }}">
                    </div>
                    @endif

                </div>

                <div class="form-group">
                    <label for="system_favicon" class="mb-0">System Fabicon <span class="text-danger">*</span></label>
                    <input type="file" value="{{ $data->system_favicon }}" name="system_favicon" id="system_favicon" class="form-control mb-2">
                    @error('system_favicon')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                    @if ($data->system_favicon==NULL)
                    <div>
                        <img id="systemlogoPrev1" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="{{ asset('backend/assets/images/prev.jpg') }}" alt="{{ $data->system_name }}">
                    </div>
                    @else
                    <div>
                        <img id="systemlogoPrev1" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="{{ asset($data->system_logo) }}" alt="{{ $data->system_name }}">
                    </div>
                    @endif

                </div>

                <div class="form-group">
                    <label for="meta_title" class="mb-0">Meta Title <span class="text-danger">*</span></label>
                    <input type="text" value="{{ $data->meta_title }}" name="meta_title" value="About Us" class="form-control" />
                    @error('meta_title')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="meta_description" class="mb-0">Meta Description <span class="text-danger">*</span></label>
                    <textarea name="meta_description" id="meta_description" class="form-control" rows="4" cols="4">
                        {!! @$data->meta_description !!}
                    </textarea>
                    @error('meta_description')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="content" class="mb-0">Keywords <span class="text-danger">*</span></label>
                    <textarea name="meta_keywords" id="meta_keywords" class="form-control" rows="4" cols="4">
                        {!! @$data->meta_keywords !!}
                    </textarea>
                    @error('meta_keywords')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="meta_image" class="mb-0">Meta Image <span class="text-danger">*</span></label>
                    <input value="{{ $data->meta_image }}" type="file" name="meta_image" id="meta_image" class="form-control mb-2">
                    @error('meta_image')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                    @if ($data->meta_image==NULL)
                    <div>
                        <img id="metaimagePrev" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="{{ asset('backend/assets/images/prev.jpg') }}" alt="{{ $data->system_name }}">
                    </div>
                    @else
                    <div>
                        <img id="metaimagePrev" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="{{ asset($data->meta_image) }}" alt="{{ $data->system_name }}">
                    </div>
                    @endif

                </div>
            </div>
            <div class="card-footer text-right">
                <button class="btn btn-primary">Update</button>
            </div>
        </div>
    </form>

    @section('script')
    <script>
        $(document).ready(()=>{

        // System Image
          $('#system_logo').change(function(){
            const file = this.files[0];
            console.log(file);
            if (file){
              let reader = new FileReader();
              reader.onload = function(event){
                console.log(event.target.result);
                $('#systemlogoPrev').attr('src', event.target.result);
              }
              reader.readAsDataURL(file);
            }
          });
        // System Fabico
          $('#system_favicon').change(function(){
            const file = this.files[0];
            console.log(file);
            if (file){
              let reader = new FileReader();
              reader.onload = function(event){
                console.log(event.target.result);
                $('#systemlogoPrev1').attr('src', event.target.result);
              }
              reader.readAsDataURL(file);
            }
          });

          // Thumbnail Image
          $('#meta_image').change(function(){
            const file = this.files[0];
            console.log(file);
            if (file){
              let reader = new FileReader();
              reader.onload = function(event){
                console.log(event.target.result);
                $('#metaimagePrev').attr('src', event.target.result);
              }
              reader.readAsDataURL(file);
            }
          });

        });

        $('document').ready(function() {
            $('textarea').each(function() {
                $(this).val($(this).val().trim());
            });
        });

    </script>
    @endsection

</x-app-layout>
