@extends('backend.layout.main')
@section('content')

<x-success-message key="message" />
<x-error-message key="not_permitted" />

<section>
    <div class="container-fluid">

        <ul class="nav nav-tabs" id="bookingTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="calendar-tab" data-toggle="tab" href="#tab-calendar" role="tab">
                    <i class="dripicons-calendar"></i> {{ __('db.Calendar View') }}
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="list-tab" data-toggle="tab" href="#tab-list" role="tab">
                    <i class="dripicons-list"></i> {{ __('db.List View') }}
                </a>
            </li>
        </ul>

        <div class="tab-content">

            {{-- TAB 1: CALENDAR --}}
            <div class="tab-pane fade show active" id="tab-calendar" role="tabpanel">
                <div class="card border-top-0">
                    <div class="card-body p-0">
                        <div class="row no-gutters">

                            {{-- Sidebar --}}
                            <div class="col-auto border-right" style="width:230px;min-height:650px;background:#fafafa;">
                                <div class="p-3 border-bottom">
                                    <button class="btn btn-primary btn-block" id="addBookingBtn">
                                        <i class="dripicons-plus"></i> {{ __('db.Add Booking') }}
                                    </button>
                                </div>
                                <div class="p-3">
                                    <p class="text-muted text-uppercase" style="font-size:11px;font-weight:600;letter-spacing:1px;">{{ __("db.Filters") }}</p>

                                    @if(Auth::user()->role_id <= 2)
                                    <div class="mb-3">
                                        <select id="warehouseFilter" class="selectpicker form-control form-control-sm"
                                                data-live-search="true" title="All Warehouses">
                                            <option value="">{{ __('db.All Warehouses') }}</option>
                                            @foreach($lims_warehouse_list as $wh)
                                                <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @endif

                                    <div class="filter-item d-flex align-items-center mb-2 p-2 rounded" style="cursor:pointer;" onclick="toggleFilter('Booked')">
                                        <span style="width:12px;height:12px;border-radius:50%;background:#696cff;flex-shrink:0;margin-right:8px;"></span>
                                        <span>{{ __('db.Booked') }}</span>
                                        <input type="checkbox" class="cal-filter d-none" id="filter-booked" data-value="Booked" checked>
                                        <i class="dripicons-checkmark ml-auto text-primary filter-icon-booked"></i>
                                    </div>
                                    <div class="filter-item d-flex align-items-center mb-2 p-2 rounded" style="cursor:pointer;" onclick="toggleFilter('Waiting')">
                                        <span style="width:12px;height:12px;border-radius:50%;background:#ffab00;flex-shrink:0;margin-right:8px;"></span>
                                        <span>{{ __('db.Waiting') }}</span>
                                        <input type="checkbox" class="cal-filter d-none" id="filter-waiting" data-value="Waiting" checked>
                                        <i class="dripicons-checkmark ml-auto text-warning filter-icon-waiting"></i>
                                    </div>
                                    <div class="filter-item d-flex align-items-center mb-2 p-2 rounded" style="cursor:pointer;" onclick="toggleFilter('Completed')">
                                        <span style="width:12px;height:12px;border-radius:50%;background:#28c76f;flex-shrink:0;margin-right:8px;"></span>
                                        <span>{{ __('db.Completed') }}</span>
                                        <input type="checkbox" class="cal-filter d-none" id="filter-completed" data-value="Completed" checked>
                                        <i class="dripicons-checkmark ml-auto text-success filter-icon-completed"></i>
                                    </div>
                                    <div class="filter-item d-flex align-items-center mb-2 p-2 rounded" style="cursor:pointer;" onclick="toggleFilter('Cancelled')">
                                        <span style="width:12px;height:12px;border-radius:50%;background:#ea5455;flex-shrink:0;margin-right:8px;"></span>
                                        <span>{{ __('db.Cancelled') }}</span>
                                        <input type="checkbox" class="cal-filter d-none" id="filter-cancelled" data-value="Cancelled" checked>
                                        <i class="dripicons-checkmark ml-auto text-danger filter-icon-cancelled"></i>
                                    </div>

                                </div>
                            </div>

                            {{-- Calendar with loader --}}
                            <div class="col p-3 position-relative">
                                <div id="calendarLoader" style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.85);z-index:10;display:flex;align-items:center;justify-content:center;border-radius:4px;">
                                    <div class="text-center">
                                        <div class="spinner-border text-primary" style="width:3rem;height:3rem;" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                        <p class="mt-2 text-muted">Loading calendar...</p>
                                    </div>
                                </div>
                                <div id="calendar"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            {{-- TAB 2: LIST --}}
            <div class="tab-pane fade" id="tab-list" role="tabpanel">
                <div class="card border-top-0">
                    <div class="card-header mt-2">
                        <h3 class="text-center">{{ __('db.Booking List') }}</h3>
                    </div>
                    <form method="GET" action="{{ route('booking.index') }}" id="listFilterForm">
                        <input type="hidden" name="tab" value="list">
                        <div class="row mb-3 px-3">
                            <div class="col-md-4 mt-3">
                                <div class="d-flex align-items-center">
                                    <label class="mb-0 mr-2 text-nowrap">{{ __('db.date') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="daterangepicker-field form-control" value="{{ \Carbon\Carbon::parse($starting_date)->format($general_setting->date_format) }} To {{ \Carbon\Carbon::parse($ending_date)->format($general_setting->date_format) }}" />
                                        <input type="hidden" name="starting_date" value="{{ $starting_date }}" />
                                        <input type="hidden" name="ending_date" value="{{ $ending_date }}" />
                                    </div>
                                </div>
                            </div>
                            @if(Auth::user()->role_id <= 2)
                            <div class="col-md-3 mt-3">
                                <div class="d-flex align-items-center">
                                    <label class="mb-0 mr-2 text-nowrap">{{ __('db.Warehouse') }}</label>
                                    <select name="warehouse_id" class="selectpicker form-control" data-live-search="true">
                                        <option value="0">{{ __('db.All') }}</option>
                                        @foreach($lims_warehouse_list as $wh)
                                            <option value="{{ $wh->id }}" @if($wh->id == $warehouse_id) selected @endif>{{ $wh->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @endif
                            <div class="col-md-2 mt-3">
                                <div class="d-flex align-items-center">
                                    <label class="mb-0 mr-2">{{ __('db.Status') }}</label>
                                    <select name="status" class="selectpicker form-control">
                                        <option value="0">{{ __('db.All') }}</option>
                                        <option value="Booked"    @if($status=='Booked')    selected @endif>{{ __('db.Booked') }}</option>
                                        <option value="Waiting"   @if($status=='Waiting')   selected @endif>{{ __('db.Waiting') }}</option>
                                        <option value="Completed" @if($status=='Completed') selected @endif>{{ __('db.Completed') }}</option>
                                        <option value="Cancelled" @if($status=='Cancelled') selected @endif>{{ __('db.Cancelled') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1 mt-3">
                                <button class="btn btn-primary btn-sm" type="submit">{{ __('db.submit') }}</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                        <table id="booking-table" class="table booking-list">
                            <thead>
                                <tr>
                                    <th class="not-exported"></th>
                                    <th>{{ __('db.date') }}</th>
                                    <th>{{ __('db.Warehouse') }}</th>
                                    <th>{{ __('db.customer') }}</th>
                                    <th>{{ __('db.Employee') }}</th>
                                    <th>Product / Service</th>
                                    <th>Price</th>
                                    <th>{{ __('db.Start') }}</th>
                                    <th>{{ __('db.End') }}</th>
                                    <th>{{ __('db.Status') }}</th>
                                    <th>{{ __('db.Note') }}</th>
                                    <th class="not-exported">{{ __('db.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($lims_booking_all as $key => $booking)
                                <tr data-id="{{ $booking->id }}">
                                    <td>{{ $key }}</td>
                                    <td>{{ $booking->created_at->format($general_setting->date_format) }}</td>
                                    <td>{{ $booking->warehouse->name ?? '—' }}</td>
                                    <td>{{ $booking->customer->name ?? '—' }}<br><small class="text-muted">{{ $booking->customer->phone_number ?? '' }}</small></td>
                                    <td>{{ $booking->employee->name ?? '—' }}</td>
                                    <td>{{ $booking->product->name ?? '—' }}</td>
                                    <td>{{ $booking->price ?? '—' }}</td>
                                    <td>{{ \Carbon\Carbon::parse($booking->start_date)->format($general_setting->date_format . ' H:i') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($booking->end_date)->format($general_setting->date_format . ' H:i') }}</td>
                                    <td>
                                        @if($booking->status == 'Booked') <span class="badge badge-primary">{{ __('db.Booked') }}</span>
                                        @elseif($booking->status == 'Waiting') <span class="badge badge-warning">{{ __('db.Waiting') }}</span>
                                        @elseif($booking->status == 'Completed') <span class="badge badge-success">{{ __('db.Completed') }}</span>
                                        @elseif($booking->status == 'Cancelled') <span class="badge badge-danger">{{ __('db.Cancelled') }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $booking->note }}</td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                                                {{ __('db.action') }}<span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu edit-options dropdown-menu-right dropdown-default">
                                                <li>
                                                    <button type="button" class="btn btn-link edit-booking-btn" data-id="{{ $booking->id }}">
                                                        <i class="dripicons-document-edit"></i> {{ __('db.edit') }}
                                                    </button>
                                                </li>
                                                <li class="divider"></li>
                                                <form action="{{ route('bookings.destroy', $booking->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <li>
                                                        <button type="submit" class="btn btn-link" onclick="return confirm('Are you sure want to delete?')">
                                                            <i class="dripicons-trash"></i> {{ __('db.delete') }}
                                                        </button>
                                                    </li>
                                                </form>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- Booking Modal --}}
<div id="booking-modal" tabindex="-1" role="dialog" aria-labelledby="bookingModalLabel" aria-hidden="true" class="modal fade text-left">
    <div role="document" class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="bookingModalLabel" class="modal-title">{{ __("db.Add Booking") }}</h5>
                <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                    <span aria-hidden="true"><i class="dripicons-cross"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <p class="italic"><small>{{ __('db.The field labels marked with * are required input fields') }}.</small></p>
                <form id="bookingForm" method="POST" action="{{ route('bookings.store') }}">
                    @csrf
                    <input type="hidden" id="formMethod" name="_method" value="POST">
                    <div class="row">

                        {{-- Warehouse --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('db.Warehouse') }} *</label>
                            <select name="warehouse_id" id="b_warehouse_id" class="selectpicker form-control" required
                                    data-live-search="true" title="Select Warehouse...">
                                @foreach($lims_warehouse_list as $wh)
                                    <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Customer --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('db.customer') }} *</label>
                            <select name="customer_id" id="b_customer_id" class="selectpicker form-control" required
                                    data-live-search="true" title="Select Customer...">
                                @foreach($lims_customer_list as $customer)
                                    <option value="{{ $customer->id }}" data-phone="{{ $customer->phone_number }}">
                                        {{ $customer->name }} ({{ $customer->phone_number }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Employee --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('db.Employee') }}</label>
                            <select name="user_id" id="b_user_id" class="selectpicker form-control"
                                    data-live-search="true" title="Select Employee...">
                                <option value="">— No Employee —</option>
                                @foreach($lims_user_list as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} @if($user->phone)({{ $user->phone }})@endif</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Status --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('db.status') }} *</label>
                            <select name="status" id="b_status" class="selectpicker form-control" required>
                                <option value="Booked" selected>{{ __('db.Booked') }}</option>
                                <option value="Waiting">{{ __('db.Waiting') }}</option>
                                <option value="Completed">{{ __('db.Completed') }}</option>
                                <option value="Cancelled">{{ __('db.Cancelled') }}</option>
                            </select>
                        </div>

                        {{-- Product --}}
                        <div class="col-md-6 form-group">
                            <label>Product / Service</label>
                            <select name="product_id" id="b_product_id" class="selectpicker form-control"
                                    data-live-search="true" title="Select Service...">
                                <option value="">— No Product —</option>
                                @foreach($lims_service_products as $product)
                                    <option value="{{ $product->id }}" data-price="{{ $product->price }}">
                                        {{ $product->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Price --}}
                        <div class="col-md-6 form-group">
                            <label>Price</label>
                            <input type="number" name="price" id="b_price"
                                   class="form-control" placeholder="0.00" step="any" min="0">
                        </div>

                        {{-- Start Date & Time — plain input, click to open picker --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('db.Start Date') }} & Time *</label>
                            <input type="text" name="start_date" id="b_start_date"
                                   class="form-control"
                                   placeholder="Select start date & time"
                                   autocomplete="off" readonly required>
                        </div>

                        {{-- End Date & Time — plain input, click to open picker --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('db.End Date') }} & Time *</label>
                            <input type="text" name="end_date" id="b_end_date"
                                   class="form-control"
                                   placeholder="Select end date & time"
                                   autocomplete="off" readonly required>
                        </div>

                    </div>

                    <div class="form-group">
                        <label>{{ __('db.Note') }}</label>
                        <textarea name="note" id="b_note" rows="3" class="form-control" placeholder="Enter note..."></textarea>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="b_send_email" name="send_email" value="1">
                            <label class="form-check-label" for="b_send_email">{{ __('db.Send Email') }}</label>
                        </div>
                    </div>
                    <div class="form-group d-flex justify-content-between">
                        <div>
                            <button type="submit" id="bookingSubmitBtn" class="btn btn-primary">{{ __('db.submit') }}</button>
                            <button type="button" class="btn btn-secondary ml-2" data-dismiss="modal">{{ __('db.Cancel') }}</button>
                        </div>
                        <button type="button" id="bookingDeleteBtn" class="btn btn-danger d-none">
                            <i class="dripicons-trash"></i> {{ __('db.delete') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" />
<style>
    #calendar { min-height: 650px; }
    .fc .fc-button-primary { background-color: #5a8dee !important; border-color: #5a8dee !important; }
    .fc .fc-button-primary:hover,
    .fc .fc-button-primary:not(:disabled).fc-button-active { background-color: #4a7de2 !important; border-color: #4a7de2 !important; }
    .fc .fc-daygrid-day.fc-day-today { background: #eff3ff !important; }
    .fc-event { border-radius: 4px !important; font-size: 12px !important; padding: 2px 5px !important; }
    .fc-col-header-cell { background: #f8f9fa; font-weight: 600; }
    .filter-item { transition: background .15s; }
    .filter-item:hover { background: #f0f0f0; }
    .filter-item.inactive { opacity: .4; }
    .nav-tabs { border-bottom: 2px solid #dee2e6; }
    .tab-content > .tab-pane { border: 1px solid #dee2e6; border-top: none; }

    /* Input click cursor */
    #b_start_date, #b_end_date { cursor: pointer; background: #fff; }

    /* Picker must float above modal overlay (z-index 1050) */
    .bootstrap-datetimepicker-widget { z-index: 99999 !important; }
</style>
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script>
var dateFormat     = '{{ $general_setting->date_format }}';
var datetimeFormat = dateFormat.toUpperCase() + ' HH:mm';

$(document).ready(function () {

    $("ul#booking").siblings('a').attr('aria-expanded', 'true');
    $("ul#booking").addClass("show");
    $("ul#booking #booking-menu").addClass("active");

    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
    $('.selectpicker').selectpicker({ style: 'btn-link' });

    // ── DateTime Pickers ──────────────────────────────────────────
    // widgetParent: 'body'  → body-তে render হবে, modal-এর z-index block করবে না
    // inline: false         → dropdown হিসেবে খুলবে
    // sideBySide: false     → overlap হবে না
    // useCurrent: false     → resetModal()-এ manually set করা হবে
    var dtpOptions = {
        format      : datetimeFormat,
        locale      : 'en',
        stepping    : 15,
        useCurrent  : false,
        sideBySide  : false,
        inline      : false,
        widgetParent: 'body',
        icons: {
            previous: 'fa fa-chevron-left',
            next    : 'fa fa-chevron-right',
            up      : 'fa fa-chevron-up',
            down    : 'fa fa-chevron-down',
            today   : 'fa fa-calendar-check',
            clear   : 'fa fa-trash'
        }
    };

    $('#b_start_date').datetimepicker(dtpOptions);
    $('#b_end_date').datetimepicker(dtpOptions);

    // Input-এ click করলে picker open হবে
    $('#b_start_date').on('click', function () { $(this).datetimepicker('show'); });
    $('#b_end_date').on('click',   function () { $(this).datetimepicker('show'); });

    // ── DataTable ─────────────────────────────────────────────────
    var booking_id    = [];
    var user_verified =