@extends('layouts.master')

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

    <x-breadcrumb listRoute="{{ route('admin.bookings.index') }}" model="Bookings" item="Edit"></x-breadcrumb>

    <div class="card">
        <div class="card-body">


            <div class="modal fade" id="modelUpdate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="modelUpdate" aria-hidden="true">

        </div>


            <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a href="{{route('admin.bookings.edit',$booking->id)}}"
                        class="nav-link ">Edit General Detail</a>
                </li>
{{-- 
                <li class="nav-item" role="presentation">
                    <a href="{{route('admin.bookings.addon.index',$booking->id)}}"  class="nav-link active">Edit Add Ons</a>
                </li> --}}

            </ul>
            <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="modal fade" id="modelCreate" tabindex="-1" aria-labelledby="modelCreate" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <x-form.wrapper action="{{route('admin.bookings.addon.store',$booking->id)}}" method="POST"
                            enctype="multipart/form-data">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">Add Add Ons</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.select label="Title" col="12" :options="$package_addons" name="package_addons_id"
                                        id="package_addons_id" :req="true"
                                         {{-- value="{{ $booking_addon->packageAddon->id  }}" --}}
                                        >
                                    </x-form.select>
                                </x-form.row>
                
                                <x-form.row>
                                    <x-form.input type="number" col="6" label="No of travellers" :req="true" id="number_of_travellers"
                                        name="number_of_travellers" 
                                        {{-- value="{{ $booking_addon?->number_of_travellers }}" --}}
                                         />
                                </x-form.row>
                
                            </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 class="table-responsive no-wrap mt-2">
                <table class="table" id="datatable">
                    <x-table.header :headers="['Name','price','No Of Travellers','Actions']" />
                    <tbody>
                        @forelse ($booking->bookingAddons as $addon)
                        <tr>
                            <td>{{ $loop->iteration}}</td>
                            <td>{{ $addon->packageAddon->title ?? 'N/A' }}</td>
                            <td>{{ $addon->price }}</td>
                            <td>{{ $addon->number_of_travellers }}</td>
                            <td style="width:150px">
                                <div class="actions d-flex">
                                    <a href="{{ route('admin.bookings.addon.edit', $addon->id) }}"
                                        class="btn btn-sm btn-default viewContact" title="Edit"
                                        data-id="{{ $addon->id }}">
                                        <i class='bx bx-edit-alt'></i>
                                    </a>
                                    <x-table.delete_btn
                                                route-destroy="{{ route('admin.bookings.addon.destroy',['booking' => $addon->bookings_id, 'booking_addon' => $addon->id]) }}" />
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">No add-ons found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                    
                </table>
            </div>
        </div>
    </div>
    <hr />
   
</div>
@endsection

@push('custom_js')
@include('_helpers.ajax_form')
@include('_helpers.swal_delete')


<script>
    $(document).on("click", ".viewContact", 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');
             
                modal.addEventListener('hide.bs.modal', function(event) {
                    modal.querySelector('form').reset();
                })

            });

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