@extends('layouts.master')

@section('content')
<div class="container-xxl">

    <x-breadcrumb listRoute="{{ route('admin.packages.index') }}" model="Packages" item="Edit"></x-breadcrumb>
    <div class="card">
        <div class="card-body">
            <div class="d-flex" style="justify-content:space-between">
                @include('layouts._includes._package-navigation', ['active' => 'review'])

            </div>
            <div class="text-end">
                <button class="btn btn-sm btn-dark mb-2" data-bs-toggle="modal" data-bs-target="#modelCreate"><i
                        class='bx bx-xs bx-plus'> </i>Create</button>
            </div>
            <div class="table-responsive no-wrap">
                <table class="table" id="datatable">
                    <x-table.header :headers="['name', 'order','publish_date', 'Actions']" />
                    <tbody id="tablecontents"></tbody>
                </table>
            </div>
        </div>

    </div>
</div>

{{-- create --}}
<div class="modal fade" id="modelCreate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="modelCreate" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <x-form.wrapper action="{{ route('admin.packages.review.store', $package->id) }}" method="POST"
                enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Add Review</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Name" :req="true" id="name" name="name" />
                        <x-form.input type="email" col="6" label="Email" :req="true" id="email" name="email" />

                        <x-form.input :req="true" type="text" max="5" min="1" col="6" label="Rating" id="rating"
                            name="rating" />
                        {{--
                        <x-form.input type="text" col="6" label="Country" :req="true" id="country" name="address" />
                        --}}
                    </x-form.row>
                    <div class="col-lg-6">
                        <x-form.input type="file" label="Image" id="image" name="file" accept="image/*"
                            onchange="previewThumb(this,'featured-thumb')" />
                        <x-form.preview id="featured-thumb" />
                    </div>
                    {{-- <x-form.row>

                        <div class="col-lg-6">
                            <x-form.select label="Review Type" :options="\App\Models\Review::getTypeList()" name="type"
                                :req="true">
                            </x-form.select>
                        </div>
                    </x-form.row> --}}

                    <x-form.row>

                        <x-form.input :req="true" type="number" col="6" label="Order" id="order" name="order" />
                        <x-form.input :req="true" type="date" col="6" label="Publish Date" id="publish_date"
                            name="publish_date" />
                    </x-form.row>
                    <x-form.textarea isEditor="true" :req="true" label="Review" id="review" name="review" rows="3"
                        cols="5" />

                    <div class="mt-2">
                        <x-form.checkbox :req="true" type="date" col="6" label="Is Google Review" id="is_google"
                            name="is_google" />
                        <x-form.checkbox col="4" isBreak='break' label="Is Featured" id="is_featured" name="is_featured"
                            value="1" class="form-check-input" isEditMode="yes" />
                        </div>





                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-sm btn-dark"><i class='bx bx-save bx-xs'></i>
                            Save</button>
                    </div>
            </x-form.wrapper>
        </div>
    </div>
</div>

{{-- details --}}
<div class="modal fade" id="modelUpdate" tabindex="-1" style="display: none;" aria-hidden="true">
</div>
@endsection
@push('custom_js')
{{-- <script>
    $(document).on('show.bs.modal', '.modal', function(event) {
        let button = $(event.relatedTarget);
        let productId = button.data('show-id');
        let modal = $(this);

        let url = "{{ route('admin.reviews.show', ':review') }}".replace(':review', productId);
        modal.find('.modal-body').html("<p class='d-flex justify-content-center'>Loading...</p>");
        $.ajax({
            url: url
            , type: 'get'
            , dataType: 'html'
            , success: function(response) {
                modal.find('.modal-body').html(response);
            }
        });
    });

</script> --}}
@include('_helpers.row_reorder', ['url' => route('admin.packages.review.reorder', $package->id)])
@include('_helpers.ajax_form')
@include('_helpers.yajra', [
'url' => route('admin.packages.review.index', $package->id),
'columns' => $columns,
])
@include('_helpers.swal_delete')
@include('_helpers.image_preview', ['name' => 'image'])
@include('_helpers.status_change', ['url' => route('admin.packages.review.status', $package->id)])

<script>
    $(document).on("click", ".review-edit", function(e) {
            e.preventDefault();
            const itineraryId = $(this).attr("data-id");
            const url = $(this).attr("href");
            try {
                const response = fetch(url, {
                    headers: {
                        "Accept": "application/json"
                    }
                }).then(async response => {
                    let res = response.text();
                    return res
                }).then(response => {
                    $("#modelUpdate").html(response)
                    var myModal = new bootstrap.Modal(document.getElementById('modelUpdate'))
                    myModal.show()
                });

            } catch (error) {
                console.error(error);
            }
        });
</script>
@endpush