@section('title', 'Block Booking')
@section('heading', 'Block Booking')
@section('top-menu-items')
<x-partials.top-menu-item name="Orders" route="orders" />
<x-partials.top-menu-item name="Block Bookings" route="block-booking" />
<x-partials.top-menu-item name="Invoices" route="invoices" />
<x-partials.top-menu-item name="Reports" route="reports.daily-sales" />
@endsection

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
        <div class="card" style="background-color: #F3F3F3;">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <!--begin::Search-->
                    <div class="d-flex align-items-center position-relative my-1">
                        <span class="svg-icon svg-icon-1 position-absolute ms-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                    rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                <path
                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                    fill="black" />
                            </svg>
                        </span>

                        <!-- IMPORTANT: use a valid Livewire modifier. 'wire:model.live' is invalid.
                             Use debounce to avoid excessive requests. -->
                        <input type="text" data-kt-customer-table-filter="search"
                            wire:model.live="query"
                            class="form-control form-control-solid bg-white w-250px ps-15"
                            placeholder="Search Block Bookings" />
                    </div>
                    <!--end::Search-->
                </div>
            </div>

            <div class="card-body pt-0">
                @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
                @endif

                <table class="table table-row-gray-300 align-middle gs-0 gy-4">
                    <thead>
                        <tr class="fw-bold text-muted">
                            <th class="min-w-100px">Date</th>
                            <th class="min-w-100px">Group Title</th>
                            <th class="min-w-100px">Block Title</th>
                            <th class="min-w-100px">Vessel Name </th>
                            <th class="min-w-120px">Start Time</th>
                            <th class="min-w-120px">End Time</th>
                            <th class="min-w-120px">Duration</th>
                            <th class="min-w-100px">Partner Organization</th>
                            <th class="min-w-120px">Block Schedule Notes</th>
                            @can('write_billing')
                            <th class="text-center min-w-100px">Actions</th>
                            @endcan
                        </tr>
                    </thead>
                    <tbody class="fw-bold text-gray-600" style="color: #3E3D3D !important;">
                        @forelse ($selectedBlocks as $block)
                        @php
                        // compute date/time display safely
                        $startDateTime = \Carbon\Carbon::parse($block->booking_date);
                        $bookingDate = $startDateTime->format('Y-m-d');
                        $startTime = $startDateTime->format('H:i');
                        $endTime = $startDateTime->copy()->addMinutes($block->selected_duration)->format('H:i');
                        $partnerOrganization = $block->order?->block_schedule_partner_organization ?? 'N/A';
                        $blockScheduleNotes = $block->order?->block_schedule_notes ?? 'N/A';
                        @endphp
                        <tr wire:key="block-{{ $block->id }}">
                            <td>{{ \Carbon\Carbon::parse($bookingDate)->format('Y-m-d') }}</td>
                            <td>{{ $block->order->group_title ?? 'N/A'}}</td>
                            <td>{{ $block->block_title }}</td>
                            <td>{{ $block->vessel->name }}</td>
                            <td>{{ \Carbon\Carbon::parse($bookingDate . ' ' . $startTime)->format('h:i A') }}</td>
                            <td>{{ \Carbon\Carbon::parse($bookingDate . ' ' . $endTime)->format('h:i A') }}</td>
                            <td>{{ $block->selected_duration }} mins</td>
                            <td style="max-width: 133px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">{{ $partnerOrganization }}</td>
                            <td style="max-width: 133px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">
                                {{ $blockScheduleNotes }}
                            </td>
                            @can('write_billing')
                            <td class="text-end">
                                <a href="#" class="btn btn-sm btn-light bg-white custom-action"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                    Actions
                                    <span class="svg-icon svg-icon-5 m-0">
                                        <!-- icon omitted -->
                                    </span>
                                </a>

                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
                                    data-kt-menu="true" style="width: 150px !important;">
                                    <!-- <div class="menu-item px-3">
                                        <a href="#" class="menu-link act-btn px-3"
                                            wire:click.prevent="edit({{ $block->id  }})" data-bs-toggle="modal"
                                            data-bs-target="#kt_modal_add_customer">Edit</a>
                                    </div>                                 -->
                                       <div class="menu-item px-3">
                                            <a href="#"   class="menu-link act-btn"
                                        data-kt-customer-table-filter="delete_row"      wire:click.prevent="deleteBlock({{ $block->id }})">
                                            Delete Block
                                            </a>
                                        </div>     
                                                             
                                    <div class="menu-item px-3">
                                        <a href="#" wire:click.prevent="deleteGroup({{ $block->id }})"                                        
                                           data-kt-customer-table-filter="delete_row"   class="menu-link act-btn">
                                            Delete Group
                                        </a>
                                    </div>
                                    <div class="menu-item px-3">
                                        <a href="#"
                                            wire:click="viewSchedule({{ $block->id  }})"
                                           class="menu-link act-btn">
                                            View Schedule
                                        </a>
                                    </div>
                                </div>
                            </td>
                            @endcan
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">No Block Bookings found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="d-flex justify-content-center mt-4">
                    {{ $selectedBlocks->onEachSide(1)->links('livewire::bootstrap') }}
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="kt_modal_add_customer" tabindex="-1" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <form class="form" wire:submit.prevent="update" id="kt_modal_add_customer_form">
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_add_customer_header">
                        <h2 class="fw-bolder">Edit Block Booking</h2>
                        <div id="kt_modal_add_customer_close" class="btn btn-icon btn-sm btn-active-icon-primary">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                        rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <!--end::Modal header-->

                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true"
                            data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                            data-kt-scroll-dependencies="#kt_modal_add_customer_header"
                            data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">

                            <!-- Vessel -->
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold mb-2">Vessel</label><br>
                                <span class="text-muted">Select the vessel for this block booking.</span>
                                <select class="form-control form-control-solid" wire:model.defer="vesselId">
                                    <option value="">Select Vessel</option>
                                    @foreach ($vessels as $vessel)
                                    <option value="{{ $vessel->id }}">{{ $vessel->name }}</option>
                                    @endforeach
                                </select>
                                @error('vesselId')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Date -->
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold mb-2">Date</label><br>
                                <span class="text-muted">Choose the booking date.</span>
                                <input type="date" class="form-control form-control-solid" wire:model.defer="bookingDate"
                                    placeholder="Select booking date" />
                                @error('bookingDate')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Start Time -->
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold mb-2">Start Time</label><br>
                                <span class="text-muted">Set the start time for the block.</span>
                                <input type="time" class="form-control form-control-solid" wire:model.defer="startTime"
                                    placeholder="Select start time" />
                                @error('startTime')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- End Time -->
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold mb-2">End Time</label><br>
                                <span class="text-muted">Set the end time for the block.</span>
                                <input type="time" class="form-control form-control-solid" wire:model.defer="endTime"
                                    placeholder="Select end time" />
                                @error('endTime')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Partner Organization -->
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold mb-2">Partner Organization</label><br>
                                <span class="text-muted">What is the name of the organization you have partnered with?</span>
                                <input type="text" class="form-control form-control-solid"
                                    placeholder="Enter partner organization name"
                                    wire:model.defer="partnerOrganization" />
                                @error('partnerOrganization')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Block Schedule Notes -->
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-bold mb-2">Block Schedule Notes</label><br>
                                <span class="text-muted">Add any notes for this block schedule.</span>
                                <textarea class="form-control form-control-solid" wire:model.defer="blockScheduleNotes"
                                    placeholder="Enter block schedule notes"></textarea>
                                @error('blockScheduleNotes')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                        </div>
                    </div>
                    <!--end::Modal body-->

                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Cancel</button>
                        <button type="submit" id="kt_modal_add_customer_submit" class="btn btn-primary">
                            <span class="indicator-label">Save</span>
                            <span class="indicator-progress">Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                    </div>
                    <!--end::Modal footer-->
                </form>

                @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
                @endif
                @if (session()->has('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
            </div>
        </div>
    </div>
<style>
    .menu.menu-sub.menu-sub-dropdown {
    width: 150px !important;
}

</style>
</div>

@push('scripts')
<script src="assets/js/custom/apps/customers/list/export.js"></script>
<script src="/assets/js/custom/apps/customers/list/list.js"></script>
<!--end::Page Custom Javascript-->

@endpush