@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' => 'itinerary'])
                    <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="['day', 'title', 'Actions']" />
                        <tbody id="tablecontents"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal fade" id="modelUpdate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                aria-labelledby="modelUpdate" aria-hidden="true">

            </div>
            <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.itinerary.store', $package->id) }}" method="POST"
                            enctype="multipart/form-data">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">Add Itinerary</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="4" label="Day" :req="true" id="day" name="day" maxlength="5" placeholder="eg: 1 or 1-2"/>
                                    <x-form.input type="text" col="8" label="Title" :req="true" id="title" name="title" />
                                </x-form.row>
                                <x-form.row>
                                    <x-form.input type="text" col="4" label="max altitude" id="max_altitude" name="max_altitude" placeholder="eg: 1000m"/>
                                    <x-form.input type="text" col="4" label="meal" id="meal" name="meal" placeholder="eg: BF, Lunch, Dinner"/> 
                                    <x-form.input type="text" col="4" label="accomodation" id="accomodation" name="accomodation" placeholder="eg: Tea House, Hotel, Tent"/> 
                                </x-form.row>       
                                <x-form.row>
                                    <x-form.input type="text" col="6" label="Duration" id="duration" name="duration" placeholder="eg: 8 Hours"/>
                                    <x-form.input :req="true" type="text" col="6" label="Order" id="order" name="order" />
                                </x-form.row>
                               
                               
                                <x-form.textarea isEditor="true" :req="true" label="Description" id="description"
                                    name="description" rows="3" cols="5" />
                            </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>
        </div>
    </div>
@endsection
@push('custom_js')
    @include('_helpers.row_reorder', ['url' => route('admin.packages.itinerary.reorder', $package->id)])
    @include('_helpers.ajax_form')
    @include('_helpers.yajra', [
        'url' => route('admin.packages.itinerary.index', $package->id),
        'columns' => $columns,
    ])
    @include('_helpers.ck_editor')
    @include('_helpers.swal_delete')
    @include('_helpers.status_change', ['url' => route('admin.packages.itinerary.status', $package->id)])
 
    <script>
       
        $(document).on("click", ".itinerary-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();
                    var modal = document.getElementById('modelUpdate');
                    tinymce.init(editor_config);
                    modal.addEventListener('hide.bs.modal', function (event) {
                        tinymce.remove("textarea.tinymce");
                    })
                });

            } catch (error) {
                console.error(error);
            }
        });

    </script>
@endpush