@extends('adminlte::page')

@section('title', 'Document Add')

@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Edit Document</h3>
                </div>
                <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('required.document.val.head.update', $id) }}" autocomplete="off">
                    @csrf
                    <div class="box-body">
                        <div class="form-group">
                            <label>Category</label>
                            <select id="photo_category_id" class="form-control" name="category">
                                @if ($mainCategory) 
                                    @foreach ($mainCategory as $key => $cat)
                                    <option value="{{ $cat['id'] ?? '' }}" {{($checkAlreadyExists->photo_category_id==$cat['id'])?'selected':''}}>
                                        {{ $cat['title'] }}
                                    </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Photo Document</label>
                            <select id="mainCategory" name="document" class="form-control">
                                @foreach ($documents as $key => $document)
                                <option value="{{ $document['id'] ?? '' }}" {{($checkAlreadyExists->photo_document_id==$document['id'])?'selected':''}}>
                                    {{ $document['name'] }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>From Country</label>
                            <select id="photo_category_id" class="form-control" name="from_country_id">
                                <option value="">Select From Country {{$checkAlreadyExists->to}}</option>
                                @foreach($countryList as $list)
                                    <option value="{{ $list['id'] }}"{{($checkAlreadyExists->from==$list['id'])?'selected':''}}>
                                        {{ $list['name'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="box-body" id="toCountryId" style="display:none">
                        <div class="form-group">
                            <label>To Country</label>
                            <select id="photo_category_id" class="form-control" name="to_country_id">
                            <option value="">Select To Country</option>
                                @foreach($countryList as $list)
                                    <option value="{{ $list['id'] }}"
                                        {{($checkAlreadyExists->to==$list['id'])?'selected':''}}>
                                        {{ $list['name'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Meta Title</label>
                            <input type="text" class="form-control" name="meta_title" placeholder="Meta Title"
                                value="{{ $checkAlreadyExists['meta_title'] }}" >
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Meta Description</label>
                            <input type="text" class="form-control" name="meta_description" placeholder="Meta Description"
                                value="{{ $checkAlreadyExists['meta_description'] }}" >
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Popular Image</label>

                            <img 
                                id="previewImage" 
                                width="50" 
                                src="{{ $front_url.'photo_maker/'.$checkAlreadyExists->image }}" 
                                onError="this.onerror=null;this.src='{{ asset('img/no-image.png') }}';"
                            />
                            <input 
                                type="file" 
                                class="form-control" 
                                name="image" 
                                onchange="previewSelectedImage(this)"
                                >
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Inner Page Image</label>

                            <img 
                                id="innerImage" 
                                width="50" 
                                src="{{ $front_url.'photo_maker/'.$checkAlreadyExists->inner_img }}" 
                                onError="this.onerror=null;this.src='{{ asset('img/no-image.png') }}';"
                            />
                            <input 
                                type="file" 
                                class="form-control" 
                                name="inner_img" 
                                onchange="previewSelectedImage2(this)"
                                >
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Slug</label>
                            <input type="text" class="form-control" name="slug" placeholder="Slug"
                                value="{{ $checkAlreadyExists['slug'] }}" required>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" name="title" placeholder="Meta Title"
                                value="{{ $checkAlreadyExists['title'] }}">
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" class="form-control" name="description" placeholder="Meta Description"
                                value="{{ $checkAlreadyExists['description'] }}">
                        </div>
                    </div>
                

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@stop
@section('js')
    <script>
        $(document).ready(function(){
            let data = @json($checkAlreadyExists);
            if (data.photo_category_id == '3') {
                $('#toCountryId').show()
            }
            $("#photo_category_id").on("change", function () {
                let curCatId = $(this).val();
                if (curCatId == '3') {
                    $('#toCountryId').show();
                }else{
                    $('#toCountryId').hide();  
                }
                $.ajax({
                    url: "{{ route('getPhotoMakerDocument') }}",
                    type: 'GET',
                    data: { id: $('#photo_category_id').val() },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.data) {
                            const documents = response.data;
                            const documentSelect = $('select[name="document"]');
                            documentSelect.empty();
                            documents.forEach(function (doc) {
                                documentSelect.append(
                                    `<option value="${doc.id}">${doc.name}</option>`
                                );
                            });
            }
                    },
                    error: function (xhr, status, error) {
                        console.error('Error fetching documents:', error);
                    }
                });
            });
        });

        function previewSelectedImage2(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const previewImage = document.getElementById('previewImage');
                    previewImage.src = e.target.result; 
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
        function previewSelectedImage2(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const previewImage = document.getElementById('innerImage');
                    previewImage.src = e.target.result; 
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@stop