@extends('user.layouts.app')

@section('title', 'Warehouse Bookings')

@section('content')
    <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/bookingpopup.css') }}">

    <div class="container-fluid">
        <div class="ark__h1--wrap">
            <div class="page-title">
                <h1>My Warehouse Bookings</h1>
                <p>View and manage all your warehouse space bookings</p>
            </div>
            <button class="ark__create--quote-btn" id="openWarehouseDrawerBtn">
                <img src="{{ asset('assets/images/plus.svg') }}" alt="img">
                <p>Book Warehouse</p>
            </button>
        </div>
        <div id="warehouse-container">
            @if ($bookings->count() > 0)
                <div class="common-table card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <div class="table-head-wp">
                                <div class="table-search">
                                    <span>
                                        <svg width="23" height="23" viewBox="0 0 23 23" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M21.0713 21.0713L15.8989 15.8989M1.07129 9.69198C1.07129 4.9309 4.9309 1.07129 9.69198 1.07129C14.4531 1.07129 18.3127 4.9309 18.3127 9.69198C18.3127 14.4531 14.4531 18.3127 9.69198 18.3127C4.9309 18.3127 1.07129 14.4531 1.07129 9.69198Z"
                                                stroke="#545454" stroke-width="2.14286" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                    {{-- <input type="text" id="customSearchBox" placeholder="Search..."> --}}
                                    <input type="text" id="customSearchBox" placeholder="Search...">
                                    <button type="button" class="search-clear-btn"
                                        style="display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px;">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M15 5L5 15M5 5L15 15" stroke="#545454" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </button>
                                </div>
                                <div class="table-btns d-flex align-items-center" id="statusFilters">
                                    <button type="button" class="btn all-btn active-btn">All</button>
                                    <button type="button" class="btn pending-btn">Pending</button>
                                    <button type="button" class="btn cancel-btn">Completed</button>
                                    <button type="button" class="btn ark__table--active-btn">Active</button>
                                    <button type="button" class="btn confirm-btn">Confirmed</button>
                                </div>
                            </div>
                            <table id="bookingsTable" class="table mb-0" style="width:100%">
                                <thead class="table-light">
                                    <tr>
                                        <th>Booking Code</th>
                                        <th>Date</th>
                                        <th>Warehouse</th>
                                        <th>Period</th>
                                        <th>Space (SQFT)</th>
                                        <th>Final Price</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($bookings as $booking)
                                        <tr>
                                            <td><strong>#{{ $booking->booking_code }}</strong></td>
                                            <td>{{ $booking->created_at->format('M d, Y') }}</td>
                                            <td>{{ $booking->warehouse->name }}</td>
                                            <td>{{ $booking->start_date->format('M d') }} -
                                                {{ $booking->end_date->format('M d, Y') }}</td>
                                            <td>{{ number_format($booking->calculated_sqft) }}</td>
                                            <td><strong>${{ number_format($booking->final_price, 2) }}</strong></td>
                                            <td>
                                                @if ($booking->booking_status === 'pending')
                                                    <span class="badge-bg-pending">Pending</span>
                                                @elseif($booking->booking_status === 'confirmed')
                                                    <span class="badge-bg-confirmed">Confirmed</span>
                                                @elseif($booking->booking_status === 'active')
                                                    <span class="badge-bg-active">Active</span>
                                                @elseif($booking->booking_status === 'completed')
                                                    <span class="badge-bg-completed">Completed</span>
                                                @else
                                                    <span class="badge red">{{ ucfirst($booking->booking_status) }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button type="button" class="btn blue-btn btn-sm" data-bs-toggle="modal"
                                                    data-bs-target="#warehouseBookingDetailsModal"
                                                    onclick="loadBookingDetails({{ $booking->id }})">
                                                    <i class="fas fa-eye me-1"></i> View
                                                </button>
                                                @if ($booking->canBeExtended())
                                                    <button type="button" class="btn blue-btn btn-sm red-btn"
                                                        onclick="prepareExtensionDrawer({{ $booking->id }})"
                                                        title="Request Extension">
                                                        <i class="fas fa-calendar-plus me-1"></i>
                                                        Extend
                                                    </button>
                                                @endif
                                                @if ($booking->activeExtensionRequest)
                                                    <span class="badge orange ms-1" title="Extension request pending">
                                                        <i class="fas fa-clock"></i> Pending
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="page-num-wp d-flex justify-content-between align-items-center flex-wrap">
                        <span class="page-number-show">
                            Showing
                            {{ ($bookings->currentPage() - 1) * $bookings->perPage() + 1 }}-{{ min($bookings->currentPage() * $bookings->perPage(), $bookings->total()) }}
                            from {{ $bookings->total() }}
                        </span>
                        <nav aria-label="booking pagination"
                            class="custom-page-wp d-flex align-items-center justify-content-end">
                            <ul class="custom-pagination pagination mb-0">
                                {{-- Previous Button --}}
                                <li class="page-item {{ $bookings->onFirstPage() ? 'disabled' : '' }}">
                                    <a class="previous-page-link page-link" href="{{ $bookings->previousPageUrl() }}"
                                        {{ $bookings->onFirstPage() ? 'style=pointer-events:none;opacity:0.5;' : '' }}>
                                        <span>
                                            <svg width="17" height="14" viewBox="0 0 17 14" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M7.33279 0.625L0.625 6.625M0.625 6.625L7.33279 12.625M0.625 6.625H15.625"
                                                    stroke="#C04657" stroke-width="1.25" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </span>
                                        Previous
                                    </a>
                                </li>

                                {{-- Page Numbers --}}
                                <span class="d-flex align-items-center justify-content-center">
                                    @php
                                        $currentPage = $bookings->currentPage();
                                        $lastPage = $bookings->lastPage();
                                        $startPage = max(1, $currentPage - 2);
                                        $endPage = min($lastPage, $currentPage + 2);
                                    @endphp

                                    {{-- First page if not in range --}}
                                    @if ($startPage > 1)
                                        <li class="page-item">
                                            <a class="custom-page-link page-link" href="{{ $bookings->url(1) }}">1</a>
                                        </li>
                                        @if ($startPage > 2)
                                            <li class="page-item disabled">
                                                <span class="page-link bg-none">...</span>
                                            </li>
                                        @endif
                                    @endif

                                    {{-- Page range --}}
                                    @for ($i = $startPage; $i <= $endPage; $i++)
                                        <li class="page-item">
                                            <a class="custom-page-link page-link {{ $i == $currentPage ? 'active-link' : '' }}"
                                                href="{{ $bookings->url($i) }}">{{ $i }}</a>
                                        </li>
                                    @endfor

                                    {{-- Last page if not in range --}}
                                    @if ($endPage < $lastPage)
                                        @if ($endPage < $lastPage - 1)
                                            <li class="page-item disabled">
                                                <span class="page-link bg-none">...</span>
                                            </li>
                                        @endif
                                        <li class="page-item">
                                            <a class="custom-page-link page-link"
                                                href="{{ $bookings->url($lastPage) }}">{{ $lastPage }}</a>
                                        </li>
                                    @endif
                                </span>

                                {{-- Next Button --}}
                                <li class="page-item {{ !$bookings->hasMorePages() ? 'disabled' : '' }}">
                                    <a class="next-page-link page-link" href="{{ $bookings->nextPageUrl() }}"
                                        {{ !$bookings->hasMorePages() ? 'style=pointer-events:none;opacity:0.5;' : '' }}>
                                        Next
                                        <span>
                                            <svg width="17" height="14" viewBox="0 0 17 14" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M8.91721 0.625L15.625 6.625M15.625 6.625L8.91721 12.625M15.625 6.625H0.625"
                                                    stroke="#C04657" stroke-width="1.25" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            @else
                <div class="empty-state text-center py-5">
                    <h3>No bookings yet</h3>
                    <p>Book your first warehouse space to get started.</p>
                </div>
            @endif
        </div>
    </div>



    <!-- Warehouse Booking Details Modal -->
    <div class="common-modal track-modal booking-modal modal" id="warehouseBookingDetailsModal" tabindex="-1"
        aria-hidden="true">
        <div class="modal-backdrop" id="bookingDetailsBackdrop"></div>
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="booking-head d-flex align-items-center w-100">
                        <button type="button" class="btn-back me-3" data-bs-dismiss="modal">
                            <svg width="22" height="19" viewBox="0 0 22 19" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.94372 1L1 9.5M1 9.5L9.94372 18M1 9.5H21" stroke="black" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
                        <div>
                            <h5 class="modal-title">Booking Details</h5>
                            <div class="booking-date">
                                <span>
                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M4.56012 0.75V4.85345M13.9399 0.75V4.85345M4.26714 7.78448H14.2327M0.75 5.43966C0.75 4.14465 1.79981 3.09484 3.09483 3.09484H15.4052C16.7002 3.09484 17.75 4.14465 17.75 5.43966V15.4052C17.75 16.7002 16.7002 17.75 15.4052 17.75H3.09483C1.79981 17.75 0.75 16.7002 0.75 15.4052V5.43966Z"
                                            stroke="#545454" stroke-width="1.5" />
                                    </svg>
                                </span>
                                <span>Date: <strong id="modalBookingCreated"></strong></span>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body" id="bookingDetailsBody">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-3">Loading booking details...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Include the Warehouse Booking Wizard Component --}}
    @include('components.warehouse-booking-wizard', [
        'warehouses' => $warehouses,
    ])
    {{-- Include the Extension Request Sidebar Component --}}
    @include('components.warehouse-extension-sidebar')
@endsection


@push('scripts')
    <script src="{{ asset('assets/js/warehouse.js') }}"></script>
    <script>
        window.WAREHOUSE_CALCULATE_URL = "{{ route('warehouse.calculate') }}";
        window.APP_BASE_URL = "{{ url('/') }}";
        window.ASSET_BASE_URL = "{{ asset('assets/images') }}";

        let table = null;
        let currentStatus = 'All';

        function initDataTable() {
            if (table) {
                table.destroy();
                table = null;
            }

            table = $('#bookingsTable').DataTable({
                paging: false,
                lengthChange: false,
                pageLength: 10,
                searching: true,
                info: false,
                order: [
                    [10, 'desc']
                ],
                ordering: true,
                dom: 'rt',
                language: {
                    emptyTable: "No bookings found",
                    zeroRecords: "No matching bookings found"
                }
            });
        }

        function loadBookings(url) {
            $.ajax({
                url: url,
                method: 'GET',
                success: function(html) {
                    $('#warehouse-container').html($(html).find('#warehouse-container').html());

                    initDataTable();
                    updateActiveButton(currentStatus);

                    history.replaceState({}, document.title, window.location.pathname);
                },
                error: function() {
                    alert('Failed to load bookings. Please refresh.');
                }
            });
        }

        function updateActiveButton(statusText) {
            $('#statusFilters button').removeClass('active-btn');
            const target = $('#statusFilters button').filter(function() {
                return $(this).text().trim() === statusText;
            });
            if (target.length) target.addClass('active-btn');
        }

        document.addEventListener("DOMContentLoaded", function() {
            @if ($bookings->count() > 0)
                initDataTable();
                updateActiveButton(currentStatus);

                $(document).on('click', '#statusFilters button', function() {
                    const clicked = $(this).text().trim();

                    if ($(this).hasClass('active-btn')) return;

                    $('#statusFilters button').removeClass('active-btn');
                    $(this).addClass('active-btn');
                    console.log($(this));

                    currentStatus = clicked;

                    let url = '{{ route('warehouse.index') }}';
                    if (clicked !== 'All') {
                        url += '?status=' + clicked.toLowerCase();
                    }

                    loadBookings(url);
                });

                $('#customSearchBox').on('keyup', function() {
                    var searchValue = this.value;
                    table.search(searchValue).draw();

                    if (searchValue.length > 0) {
                        $('.search-clear-btn').show();
                        $('.page-num-wp').toggle(searchValue.length === 0);
                    } else {
                        $('.search-clear-btn').hide();
                        $('.page-num-wp').show();
                    }
                });

                $('#customSearchBox').on('keydown', function(e) {
                    if (e.key === 'Escape') {
                        $(this).val('');
                        table.search('').draw();
                        $('.search-clear-btn').hide();
                    }
                });

                $(document).on('click', '.search-clear-btn', function() {
                    $('#customSearchBox').val('');
                    table.search('').draw();
                    $(this).hide();
                });

                $(document).on('click', '.custom-pagination .page-link', function(e) {
                    e.preventDefault();
                    const href = $(this).attr('href');
                    if (href) {
                        loadBookings(href);
                    }
                });

                if (window.location.search.includes('page=')) {
                    history.replaceState({}, document.title, window.location.pathname);
                }
            @endif
        });
    </script>
@endpush