@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- FullCalendar CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.css" rel="stylesheet">

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper d-flex gap-2">
                        @if ($authorize->add == '1')
                            <a href="{{ url($dmenu . '/add') }}" class="btn btn-primary mb-0">
                                <i class="fas fa-plus me-1"></i>
                                <span class="font-weight-bold">Booking Baru</span>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    {{-- Card Calendar --}}
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>Jadwal Workshop</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper d-flex flex-wrap align-items-center gap-2">

                                    {{-- Filter Workshop (dropdown) --}}
                                    <select class="form-select form-select-sm" id="filter-workshop"
                                        style="width: auto; min-width: 180px;">
                                        <option value="all">Semua Workshop</option>
                                        @foreach ($workshops as $ws)
                                            <option value="{{ $ws->id }}">{{ $ws->nama }} ({{ $ws->lokasi }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Legend --}}
                        <div class="row px-4">
                            <div class="col-lg">
                                <code>
                                    Note :
                                    (<i class="fas fa-circle" style="color: #235bafff;"></i> Booked)
                                    (<i class="fas fa-circle" style="color: #21a6aaff;"></i> Finished)
                                </code>
                            </div>
                        </div>

                        {{-- Calendar --}}
                        <div class="row px-4 py-3">
                            <div class="col-12">
                                <div id="workshop-calendar"></div>
                            </div>
                        </div>
                    </div>

                    {{-- Card Tabel Daftar Booking --}}
                    <div class="card mt-4">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0"><i class="fas fa-list me-2"></i>Daftar Booking Workshop</h5>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>Action</th>
                                            <th>ID Booking</th>
                                            <th>ID Permit</th>
                                            <th>Workshop</th>
                                            {{-- <th>Tanggal</th>
                                            <th>Jam</th> --}}
                                            <th>Start Penggunaan</th>
                                            <th>End Penggunaan</th>
                                            <th>Vendor/Dept</th>
                                            <th>Cara Penggunaan</th>
                                            <th>Status</th>
                                            <th>Dibuat Oleh</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($bookings as $idx => $b)
                                            <tr>
                                                <td>{{ $idx + 1 }}</td>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3 btn-detail"
                                                            data-id="{{ $b->id }}">
                                                            <i class="fas fa-eye"></i> <span
                                                                class="font-weight-bold">View</span>
                                                        </button>
                                                        @if ($authorize->edit == '1' && $b->status === 'Booked')
                                                            <button type="button"
                                                                class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                                <span class="visually-hidden">Toggle Dropdown</span>
                                                            </button>
                                                            <ul class="dropdown-menu p-2" style="min-width:180px">
                                                                <li>
                                                                    <div class="dropdown-item p-0">
                                                                        <button type="button"
                                                                            class="btn btn-warning btn-sm w-100 mb-1 btn-edit-booking"
                                                                            data-id="{{ $b->id }}">
                                                                            <i class="fas fa-edit me-1"></i> Edit
                                                                        </button>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="dropdown-item p-0">
                                                                        <button type="button"
                                                                            class="btn btn-success btn-sm w-100 mb-1 btn-selesai-booking"
                                                                            data-id="{{ $b->id }}">
                                                                            <i class="fas fa-check me-1"></i> Selesaikan
                                                                        </button>
                                                                    </div>
                                                                </li>
                                                                <li>
                                                                    <div class="dropdown-item p-0">
                                                                        <button type="button"
                                                                            class="btn btn-danger btn-sm w-100 mb-1 btn-batal-booking"
                                                                            data-id="{{ $b->id }}">
                                                                            <i class="fas fa-trash me-1"></i> Batal/Hapus
                                                                        </button>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="text-sm font-weight-bold text-dark">{{ $b->id }}</td>
                                                <td class="text-sm">{{ $b->id_permit }}</td>
                                                <td class="text-sm">{{ $b->nama_workshop ?? '-' }} <span
                                                        class="text-muted">({{ $b->lokasi_workshop ?? '' }})</span></td>
                                                <td class="text-sm">
                                                    <div class="fw-bold text-dark">
                                                        {{ $b->tanggal_booking ? \Carbon\Carbon::parse($b->tanggal_booking)->format('d/m/Y H:i') : '-' }}
                                                    </div>
                                                </td>

                                                <td class="text-sm">
                                                    @if ($b->tgl_selesai)
                                                        <div class="fw-bold text-dark">
                                                            {{ \Carbon\Carbon::parse($b->tgl_selesai)->format('d/m/Y H:i') }}
                                                        </div>
                                                    @else
                                                        <span class="badge bg-warning">
                                                            <i class="fas fa-hourglass-half me-1"></i> Belum selesai
                                                        </span>
                                                    @endif
                                                </td>

                                                <td class="text-sm">
                                                    @php
                                                        $isVendor = ($b->pihak_label ?? '') === 'Vendor';

                                                        $badgeText = $isVendor ? 'VENDOR' : 'INTERNAL';
                                                        $badgeClass = $isVendor ? 'bg-info' : 'bg-secondary';
                                                    @endphp

                                                    <span class="badge {{ $badgeClass }} text-white">
                                                        {{ $badgeText }}
                                                    </span>

                                                    <div class="fw-semibold mt-1 text-dark">
                                                        {{ $b->nama_pihak ?? '-' }}
                                                    </div>
                                                </td>
                                                <td class="text-sm text-center">
                                                    <span class="my-2 text-xs">
                                                        <img src="{{ empty($b->cara_penggunaan) ? asset('storage/Pengumuman_Penggunaan_Area_Workshop.jpeg') : (file_exists(public_path('storage/' . $b->cara_penggunaan . 'tumb.png')) ? asset('/storage' . '/' . $b->cara_penggunaan . 'tumb.png') : asset('storage/' . $b->cara_penggunaan)) }}"
                                                            alt="image" style="height: 50px; cursor: pointer;"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#imageModalCaraPenggunaan{{ $idx }}">
                                                    </span>
                                                    <!-- Modal -->
                                                    <div class="modal fade"
                                                        id="imageModalCaraPenggunaan{{ $idx }}" tabindex="-1"
                                                        role="dialog"
                                                        aria-labelledby="imageModalLabel{{ $idx }}"
                                                        aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title"
                                                                        id="imageModalLabel{{ $idx }}">
                                                                        Preview Image
                                                                    </h5>
                                                                    <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal" aria-label="Close"
                                                                        style="filter: invert(1) grayscale(100%) brightness(200%);">
                                                                        <span aria-hidden="true"></span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body text-center">
                                                                    <img src="{{ empty($b->cara_penggunaan) ? asset('storage/Pengumuman_Penggunaan_Area_Workshop.jpeg') : asset('/storage' . '/' . $b->cara_penggunaan) }}"
                                                                        alt="image"
                                                                        class="w-100 border-radius-lg shadow-sm">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-sm">
                                                    @if ($b->status === 'Booked')
                                                        <span class="badge"
                                                            style="background-color: #235bafff; color: white;">Booked</span>
                                                    @elseif ($b->status === 'Finished')
                                                        <span class="badge"
                                                            style="background-color: #21a6aaff; color: white;">Finished</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm">{{ $b->nama_pembuat ?? ($b->user_create ?? '-') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 pb-3">
                            <div class="col-lg">
                                <code>
                                    Note :
                                    (<i class="fas fa-circle" style="color: #235bafff;"></i> Booked)
                                    (<i class="fas fa-circle" style="color: #21a6aaff;"></i> Finished)
                                </code>
                                <p id="noted" class="mt-2 mb-0"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Booking Baru / Edit --}}
    <div class="modal fade" id="booking-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title text-white" id="booking-modal-title"><i
                            class="fas fa-calendar-plus me-2"></i>Booking Workshop</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        style="filter: brightness(0) invert(1); opacity: 1;"></button>
                </div>
                <div class="modal-body">
                    <form id="form-booking">
                        <input type="hidden" id="book-id" name="id">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Permit <span class="text-danger">*</span></label>
                                <select class="form-select custom-select" id="book-permit" name="id_permit" required
                                    style="width:100%">
                                    <option value="">-- Cari / Pilih Permit (Status Berlaku) --</option>
                                    @foreach ($permits as $p)
                                        <option value="{{ $p->id }}">{{ $p->id }} -
                                            {{ Str::limit($p->uraian_pekerjaan, 60) }}</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Hanya permit dengan status "Berlaku" yang ditampilkan</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Workshop <span class="text-danger">*</span></label>
                                <select class="form-select" id="book-workshop" name="id_workshop" required>
                                    <option value="">-- Pilih Workshop --</option>
                                    @foreach ($workshops as $ws)
                                        <option value="{{ $ws->id }}">{{ $ws->nama }} ({{ $ws->lokasi }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Buat<span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="book-tanggal" name="tanggal_booking"
                                    required>
                            </div> --}}
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Start Penggunaan <span class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control" id="book-tanggal"
                                    name="tanggal_booking" required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">End Penggunaan</label>
                                <input type="datetime-local" class="form-control" id="book-tgl-selesai"
                                    name="tgl_selesai">
                                <small class="text-muted">Boleh dikosongkan jika penggunaan belum selesai.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Keterangan</label>
                                <textarea class="form-control" id="book-keterangan" name="keterangan" rows="2"
                                    placeholder="Catatan tambahan (opsional)"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-submit-booking">
                        <i class="fas fa-save me-1"></i> Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Detail Booking --}}
    <div class="modal fade" id="detail-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title text-dark">
                        <i class="fas fa-info-circle me-2 text-info"></i>Detail Booking
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body pt-2 px-4 pb-3" id="detail-body"></div>

                <div class="modal-footer border-0 pt-0 px-4 pb-4" id="detail-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    {{-- FullCalendar JS --}}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js"></script>

    <style>
        /*
                |--------------------------------------------------------------------------
                | FullCalendar Base
                |--------------------------------------------------------------------------
                */
        .fc {
            font-family: 'Open Sans', sans-serif;
            color: #344767;
        }

        .fc .fc-toolbar-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #344767;
        }

        /*
                |--------------------------------------------------------------------------
                | FullCalendar Buttons
                |--------------------------------------------------------------------------
                */
        .fc .fc-button {
            background-color: #00b7bd;
            border-color: #00b7bd;
            color: #ffffff;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            box-shadow: none;
        }

        .fc .fc-button:hover,
        .fc .fc-button:focus {
            background-color: #009a9f;
            border-color: #009a9f;
            box-shadow: none;
        }

        .fc .fc-button-active {
            background-color: #008589 !important;
            border-color: #008589 !important;
        }

        /*
                |--------------------------------------------------------------------------
                | Calendar Header / Day
                |--------------------------------------------------------------------------
                */
        .fc .fc-col-header-cell,
        .fc .fc-timegrid-axis {
            background-color: #247272;
            color: #ffffff;
            font-weight: 700;
        }

        .fc .fc-col-header-cell-cushion,
        .fc .fc-timegrid-axis-cushion,
        .fc .fc-timegrid-slot-label-cushion {
            color: #ffffff !important;
            text-decoration: none;
        }

        .fc .fc-daygrid-day-number {
            font-weight: 700;
            color: #344767;
            text-decoration: none;
        }

        .fc .fc-daygrid-day:hover {
            background-color: #f0fafa;
            cursor: pointer;
        }

        .fc .fc-day-today {
            background-color: #e0f7f8 !important;
        }

        .fc .fc-col-header-cell.fc-day-today {
            background-color: #247272 !important;
        }

        /*
                |--------------------------------------------------------------------------
                | Event Month / Week View
                |--------------------------------------------------------------------------
                */
        .fc .fc-event {
            border: none;
            border-radius: 5px;
            padding: 2px 5px;
            cursor: pointer;
            overflow: hidden;
        }

        .fc-custom-event {
            line-height: 1.2;
            padding: 2px 3px;
            overflow: hidden;
        }

        .fc-event-time-custom {
            font-size: 0.68rem;
            font-weight: 700;
            color: #ffffff;
            opacity: 0.95;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fc-event-title-custom {
            font-size: 0.72rem;
            font-weight: 600;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fc-mini-badge {
            background: rgba(255, 255, 255, 0.22);
            color: #ffffff;
            border-radius: 999px;
            padding: 1px 5px;
            margin-left: 4px;
            font-size: 0.6rem;
            font-weight: 700;
        }

        /*
                |--------------------------------------------------------------------------
                | Event List View - Fix text putih
                |--------------------------------------------------------------------------
                */
        .fc-list .fc-custom-event,
        .fc-list .fc-event-time-custom,
        .fc-list .fc-event-title-custom {
            color: #344767 !important;
        }

        .fc-list .fc-event-time-custom {
            font-size: 0.78rem;
            font-weight: 700;
        }

        .fc-list .fc-event-title-custom {
            font-size: 0.82rem;
            font-weight: 600;
        }

        .fc-list .fc-mini-badge {
            background: #e8f1ff;
            color: #235baf;
        }

        .fc-list-event-title {
            padding: 10px 12px !important;
        }

        .fc-list-event:hover td {
            background: #f8fbff !important;
        }

        .fc-list-day-cushion {
            padding: 10px 14px !important;
            background: #f3f6f9 !important;
            color: #344767 !important;
            font-weight: 700;
        }

        /*
                |--------------------------------------------------------------------------
                | FullCalendar Popover
                |--------------------------------------------------------------------------
                */
        .fc-popover {
            border: none !important;
            border-radius: 10px !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
            overflow: hidden;
        }

        .fc-popover-header {
            background: #f3f6f9 !important;
            color: #344767 !important;
            font-weight: 700;
            padding: 8px 10px !important;
        }

        .fc-popover-body {
            padding: 8px !important;
        }

        /*
                |--------------------------------------------------------------------------
                | Detail Modal
                |--------------------------------------------------------------------------
                */
        .detail-box {
            padding: 6px 10px 2px 10px;
        }

        .detail-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid #edf0f4;
        }

        .detail-main-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: #172b4d;
            margin-bottom: 3px;
        }

        .detail-subtitle {
            font-size: 0.8rem;
            color: #8392ab;
        }

        .status-pill {
            border-radius: 999px;
            padding: 6px 13px;
            font-size: 0.72rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .status-booked {
            background: #e8f1ff;
            color: #235baf;
        }

        .status-finished {
            background: #e7f8f8;
            color: #16898c;
        }

        .detail-list {
            border-left: 4px solid #11cdef;
            padding-left: 16px;
        }

        .detail-item {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 12px;
            padding: 9px 0;
            border-bottom: 1px dashed #e9ecef;
        }

        .detail-item:last-child {
            border-bottom: none;
        }

        .detail-label {
            color: #8392ab;
            font-size: 0.85rem;
        }

        .detail-value {
            color: #344767;
            font-size: 0.9rem;
            font-weight: 600;
            word-break: break-word;
        }

        .detail-value.normal {
            font-weight: 400;
            line-height: 1.5;
        }

        /*
                |--------------------------------------------------------------------------
                | Responsive
                |--------------------------------------------------------------------------
                */
        @media (max-width: 576px) {
            .fc .fc-toolbar {
                flex-direction: column;
                gap: 8px;
            }

            .detail-head {
                flex-direction: column;
            }

            .detail-item {
                grid-template-columns: 1fr;
                gap: 2px;
            }
        }
    </style>

    <script>
        const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').content;
        const BASE_URL = '{{ url('/') }}';
        const isAdmin = {{ $authorize->edit == '1' ? 'true' : 'false' }};
        let calendar;
        let currentFilter = 'all';

        document.addEventListener('DOMContentLoaded', function() {
            initCalendar();
            initEvents();
            initDataTable();

            // Select2 untuk permit di modal
            $('#book-permit').select2({
                dropdownParent: $('#booking-modal'),
                placeholder: '-- Cari / Pilih Permit --',
                allowClear: true,
                width: '100%'
            });
        });

        function closeCalendarPopover() {
            $('.fc-popover').remove();
        }

        function initCalendar() {
            const calendarEl = document.getElementById('workshop-calendar');
            calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'id',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,listWeek'
                },
                buttonText: {
                    today: 'Hari Ini',
                    month: 'Bulan',
                    week: 'Minggu',
                    list: 'Daftar'
                },
                height: 'auto',
                navLinks: true,
                editable: false,
                selectable: isAdmin,
                selectMirror: true,

                dayMaxEvents: 3,
                moreLinkText: 'lainnya',
                moreLinkClick: 'popover',

                slotMinTime: '00:00:00',
                slotMaxTime: '24:00:00',
                slotDuration: '01:00:00',
                displayEventTime: false,

                eventContent: function(arg) {
                    const p = arg.event.extendedProps;

                    const timeText = p.jam_start && p.jam_end ?
                        `${p.jam_start} - ${p.jam_end}` :
                        p.jam_start || '';

                    const multiDayBadge = p.is_multi_day ?
                        `<span class="fc-mini-badge">Multi-day</span>` :
                        '';

                    return {
                        html: `
                <div class="fc-custom-event">
                    <div class="fc-event-time-custom">
                        ${timeText} ${multiDayBadge}
                    </div>
                    <div class="fc-event-title-custom">
                        ${arg.event.title}
                    </div>
                </div>
            `
                    };
                },

                dateClick: function(info) {
                    if (!isAdmin) return;
                    window.location.href = BASE_URL + '/trwksp/add?date=' + info.dateStr;
                },

                eventClick: function(info) {
                    info.jsEvent.preventDefault();
                    closeCalendarPopover();
                    openDetailModal(info.event.id);
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    $.ajax({
                        url: BASE_URL + '/trwksp/events',
                        method: 'GET',
                        data: {
                            start: fetchInfo.startStr.split('T')[0],
                            end: fetchInfo.endStr.split('T')[0],
                            workshop_id: currentFilter
                        },
                        success: function(data) {
                            successCallback(data);
                        },
                        error: function() {
                            failureCallback();
                        }
                    });
                }
            });
            calendar.render();
        }

        function initEvents() {
            // Filter workshop
            $('#filter-workshop').on('change', function() {
                currentFilter = $(this).val();
                closeCalendarPopover();
                calendar.refetchEvents();
            });

            $(document).on('click', function(e) {
                if (
                    !$(e.target).closest('.fc-popover').length &&
                    !$(e.target).closest('.fc-more-link').length
                ) {
                    closeCalendarPopover();
                }
            });
            // Tombol add booking mengarahkan ke halaman add (sudah menggunakan tag <a>)

            // Submit booking
            $('#btn-submit-booking').on('click', function() {
                submitBooking(false);
            });

            // Detail dari tabel
            $(document).on('click', '.btn-detail', function() {
                closeCalendarPopover();
                openDetailModal($(this).data('id'));
            });

            // Edit dari tabel
            $(document).on('click', '.btn-edit-booking', function() {
                openEditModal($(this).data('id'));
            });

            // Selesaikan dari tabel
            $(document).on('click', '.btn-selesai-booking', function() {
                updateBookingStatus($(this).data('id'), 'Finished');
            });

            // Batalkan/Hapus dari tabel
            $(document).on('click', '.btn-batal-booking', function() {
                deleteBooking($(this).data('id'));
            });
        }

        function initDataTable() {
            $('#list_{{ $dmenu }}').DataTable({
                "pageLength": 10,
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Semua"]
                ],
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Belum ada data booking workshop",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                    "paginate": {
                        "first": "Pertama",
                        "last": "Terakhir",
                        "next": "Next",
                        "previous": "Previous"
                    }
                },
                "order": [
                    [9, 'asc'],
                    [5, 'desc']
                ],
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                        exportOptions: {
                            columns: ':not(:nth-child(2))',
                            format: {
                                body: function(data, row, column, node) {
                                    if (column === 0) return row + 1;
                                    return $('<div>').html(data).text().trim();
                                }
                            }
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                        exportOptions: {
                            columns: ':not(:nth-child(2))',
                            format: {
                                body: function(data, row, column, node) {
                                    if (column === 0) return row + 1;
                                    return $('<div>').html(data).text().trim();
                                }
                            }
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                        exportOptions: {
                            columns: ':not(:nth-child(2))',
                            format: {
                                body: function(data, row, column, node) {
                                    if (column === 0) return row + 1;
                                    return $('<div>').html(data).text().trim();
                                }
                            }
                        }
                    }
                ],
                initComplete: function() {
                    $('.dt-button').addClass('btn btn-secondary');
                    $('.dt-button').removeClass('dt-button');
                    @if ($authorize->excel == '0')
                        $('.buttons-excel').remove();
                    @endif
                    @if ($authorize->pdf == '0')
                        $('.buttons-pdf').remove();
                    @endif
                    @if ($authorize->print == '0')
                        $('.buttons-print').remove();
                    @endif
                }
            });
        }

        function openBookingModal(dateStr) {
            $('#form-booking')[0].reset();
            $('#book-id').val('');
            $('#book-permit').val('').trigger('change');
            $('#booking-modal-title').html('<i class="fas fa-calendar-plus me-2"></i>Booking Workshop Baru');
            if (dateStr) {
                $('#book-tanggal').val(dateStr);
            }
            new bootstrap.Modal(document.getElementById('booking-modal')).show();
        }

        function toDatetimeLocal(value) {
            if (!value) return '';

            const d = new Date(value);
            if (isNaN(d.getTime())) {
                return value.replace(' ', 'T').substring(0, 16);
            }

            const pad = n => String(n).padStart(2, '0');

            return d.getFullYear() + '-' +
                pad(d.getMonth() + 1) + '-' +
                pad(d.getDate()) + 'T' +
                pad(d.getHours()) + ':' +
                pad(d.getMinutes());
        }

        function openEditModal(bookingId) {
            $.ajax({
                url: BASE_URL + '/trwksp/detail',
                method: 'GET',
                data: {
                    id: bookingId
                },
                success: function(res) {
                    if (!res.success) return;

                    const d = res.data;

                    $('#book-id').val(d.id);
                    $('#book-permit').val(d.id_permit).trigger('change');
                    $('#book-workshop').val(d.id_workshop);
                    $('#book-tanggal').val(toDatetimeLocal(d.tanggal_booking));
                    $('#book-tgl-selesai').val(toDatetimeLocal(d.tgl_selesai));
                    $('#book-keterangan').val(d.keterangan || '');

                    $('#booking-modal-title').html('<i class="fas fa-edit me-2"></i>Edit Booking Workshop');

                    new bootstrap.Modal(document.getElementById('booking-modal')).show();
                }
            });
        }

        function submitBooking(forceSave = false) {
            const editId = $('#book-id').val();

            const data = {
                id_permit: $('#book-permit').val(),
                id_workshop: $('#book-workshop').val(),
                tanggal_booking: $('#book-tanggal').val(),
                tgl_selesai: $('#book-tgl-selesai').val() || null,
                keterangan: $('#book-keterangan').val() || null,
                force_save: forceSave
            };

            if (editId) {
                data.id = editId;
            }

            if (!data.id_permit || !data.id_workshop || !data.tanggal_booking) {
                Swal.fire('Perhatian', 'Permit, Workshop, dan Start Penggunaan wajib diisi.', 'warning');
                return;
            }

            if (data.tgl_selesai && data.tgl_selesai <= data.tanggal_booking) {
                Swal.fire('Perhatian', 'End Penggunaan harus lebih besar dari Start Penggunaan.', 'warning');
                return;
            }

            const url = editId ?
                BASE_URL + '/trwksp/update-booking' :
                BASE_URL + '/trwksp/store-booking';

            $.ajax({
                url: url,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(res) {
                    const bookingModal = bootstrap.Modal.getInstance(document.getElementById('booking-modal'));
                    if (bookingModal) bookingModal.hide();

                    Swal.fire('Berhasil', res.message, 'success').then(() => location.reload());
                },
                error: function(xhr) {
                    const res = xhr.responseJSON || {};
                    const msg = res.message || 'Terjadi kesalahan.';

                    if (xhr.status === 409 && res.need_confirmation) {
                        Swal.fire({
                            title: 'Jadwal Bentrok',
                            html: msg,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Tetap Simpan',
                            cancelButtonText: 'Cancel',
                            confirmButtonColor: '#0d6efd',
                            cancelButtonColor: '#dc3545'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                submitBooking(true);
                            }
                        });

                        return;
                    }

                    Swal.fire('Gagal', msg, 'error');
                }
            });
        }

        function openDetailModal(bookingId) {
            $.ajax({
                url: BASE_URL + '/trwksp/detail',
                method: 'GET',
                data: {
                    id: bookingId
                },
                success: function(res) {
                    if (!res.success) return;

                    const d = res.data;

                    const statusText = d.status === 'Finished' ? 'Finished' : 'Booked';
                    const statusClass = d.status === 'Finished' ? 'status-finished' : 'status-booked';
                    const statusIcon = d.status === 'Finished' ? 'fa-check-circle' : 'fa-calendar-check';

                    const startText = d.tanggal_booking ?
                        new Date(d.tanggal_booking).toLocaleString('id-ID', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        }).replace('.', ':') :
                        '-';

                    const endText = d.tgl_selesai ?
                        new Date(d.tgl_selesai).toLocaleString('id-ID', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        }).replace('.', ':') :
                        '<span class="text-warning fw-bold"><i class="fas fa-hourglass-half me-1"></i>Belum selesai</span>';

                    const pihakText = d.nama_vendor || d.nama_departement || '-';

                    let html = `
                        <div class="detail-box">
                            <div class="detail-head">
                                <div>
                                    <div class="detail-main-title">Jadwal Workshop - Detail</div>
                                    <div class="detail-subtitle">Informasi penggunaan workshop</div>
                                </div>

                                <span class="status-pill ${statusClass}">
                                    <i class="fas ${statusIcon} me-1"></i>${statusText}
                                </span>
                            </div>

                            <div class="detail-list">
                                <div class="detail-item">
                                    <div class="detail-label">ID Booking</div>
                                    <div class="detail-value">${d.id || '-'}</div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">ID Permit</div>
                                    <div class="detail-value">${d.id_permit || '-'}</div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">Workshop</div>
                                    <div class="detail-value">
                                        ${d.nama_workshop || '-'}
                                        <span class="text-muted fw-normal">${d.lokasi_workshop ? '(' + d.lokasi_workshop + ')' : ''}</span>
                                    </div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">Start Penggunaan</div>
                                    <div class="detail-value">${startText}</div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">End Penggunaan</div>
                                    <div class="detail-value">${endText}</div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">Vendor / Dept</div>
                                    <div class="detail-value">${pihakText}</div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">Keterangan</div>
                                    <div class="detail-value normal">${d.keterangan || '-'}</div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-label">Dibuat Oleh</div>
                                    <div class="detail-value">${d.nama_pembuat || d.user_create || '-'}</div>
                                </div>
                            </div>
                        </div>
                    `;

                    $('#detail-body').html(html);

                    let footerHtml = `
                        <div class="d-flex justify-content-end gap-2 w-100 flex-wrap">
                            <a href="${BASE_URL}/trperl/show/${encodeURIComponent(d.id_permit_encrypted)}" 
                                class="btn btn-info btn-sm mb-0" target="_blank">
                                <i class="fas fa-external-link-alt me-1"></i> Detail Permit
                            </a>
                    `;

                    if (isAdmin && d.status === 'Booked') {
                        footerHtml += `
                            <button type="button" class="btn btn-warning btn-sm mb-0" onclick="editFromDetail('${d.id}')">
                                <i class="fas fa-edit me-1"></i> Edit
                            </button>

                            <button type="button" class="btn btn-danger btn-sm mb-0" onclick="deleteBooking('${d.id}')">
                                <i class="fas fa-trash me-1"></i> Hapus
                            </button>

                            <button type="button" class="btn btn-success btn-sm mb-0" onclick="updateBookingStatus('${d.id}', 'Finished')">
                                <i class="fas fa-check me-1"></i> Finish
                            </button>
                        `;
                    }

                    footerHtml += '</div>';

                    $('#detail-footer').html(footerHtml);

                    new bootstrap.Modal(document.getElementById('detail-modal')).show();
                }
            });
        }

        function editFromDetail(bookingId) {
            // Tutup modal detail dulu, lalu buka modal edit
            const detailModal = bootstrap.Modal.getInstance(document.getElementById('detail-modal'));
            if (detailModal) detailModal.hide();
            // Tunggu animasi close selesai
            setTimeout(function() {
                openEditModal(bookingId);
            }, 300);
        }

        function deleteBooking(id) {
            Swal.fire({
                title: 'Batal & Hapus Booking?',
                text: 'Booking akan dibatalkan dan dihapus dari daftar. Tindakan ini tidak dapat dikembalikan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: BASE_URL + '/trwksp/delete-booking',
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': CSRF_TOKEN
                        },
                        contentType: 'application/json',
                        data: JSON.stringify({
                            id: id
                        }),
                        success: function(res) {
                            const detailModal = bootstrap.Modal.getInstance(document.getElementById(
                                'detail-modal'));
                            if (detailModal) detailModal.hide();
                            Swal.fire('Berhasil', res.message, 'success').then(() => location.reload());
                        },
                        error: function(xhr) {
                            Swal.fire('Gagal', xhr.responseJSON?.message || 'Terjadi kesalahan.',
                                'error');
                        }
                    });
                }
            });
        }

        function getNowDatetimeLocal() {
            const d = new Date();
            const pad = n => String(n).padStart(2, '0');

            return d.getFullYear() + '-' +
                pad(d.getMonth() + 1) + '-' +
                pad(d.getDate()) + 'T' +
                pad(d.getHours()) + ':' +
                pad(d.getMinutes());
        }

        function updateBookingStatus(id, status) {
            if (status !== 'Finished') {
                return;
            }

            // Ambil detail dulu supaya dapat tanggal_booking dan tgl_selesai existing
            $.ajax({
                url: BASE_URL + '/trwksp/detail',
                method: 'GET',
                data: {
                    id: id
                },
                success: function(res) {
                    if (!res.success) {
                        Swal.fire('Gagal', 'Data booking tidak ditemukan.', 'error');
                        return;
                    }

                    const d = res.data;

                    const startVal = toDatetimeLocal(d.tanggal_booking);

                    let defaultFinish = d.tgl_selesai ?
                        toDatetimeLocal(d.tgl_selesai) :
                        getNowDatetimeLocal();

                    // Kalau default end lebih kecil dari start, paksa minimal sama dengan start
                    if (defaultFinish < startVal) {
                        defaultFinish = startVal;
                    }

                    Swal.fire({
                        title: 'Finish Booking',
                        html: `
                    <div class="text-start">
                        <label class="form-label">
                            End Penggunaan <span class="text-danger">*</span>
                        </label>

                        <input type="datetime-local"
                            id="finish-datetime"
                            class="form-control"
                            min="${startVal}"
                            value="${defaultFinish}">

                        <small class="text-muted d-block mt-2">
                            End Penggunaan tidak boleh kurang dari Start Penggunaan.
                        </small>
                    </div>
                `,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Finish',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#028284',
                        cancelButtonColor: '#6c757d',
                        didOpen: () => {
                            document.getElementById('finish-datetime').focus();
                        },
                        preConfirm: () => {
                            const finishVal = document.getElementById('finish-datetime').value;

                            if (!finishVal) {
                                Swal.showValidationMessage('End Penggunaan wajib diisi.');
                                return false;
                            }

                            if (finishVal < startVal) {
                                Swal.showValidationMessage(
                                    'End Penggunaan tidak boleh kurang dari Start Penggunaan.'
                                );
                                return false;
                            }

                            return finishVal;
                        }
                    }).then((result) => {
                        if (!result.isConfirmed) {
                            return;
                        }

                        $.ajax({
                            url: BASE_URL + '/trwksp/update-status',
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': CSRF_TOKEN
                            },
                            contentType: 'application/json',
                            data: JSON.stringify({
                                id: id,
                                status: 'Finished',
                                tgl_selesai: result.value
                            }),
                            success: function(res) {
                                const detailModal = bootstrap.Modal.getInstance(
                                    document.getElementById('detail-modal')
                                );

                                if (detailModal) {
                                    detailModal.hide();
                                }

                                Swal.fire('Berhasil', res.message, 'success')
                                    .then(() => location.reload());
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Gagal',
                                    xhr.responseJSON?.message || 'Terjadi kesalahan.',
                                    'error'
                                );
                            }
                        });
                    });
                },
                error: function(xhr) {
                    Swal.fire(
                        'Gagal',
                        xhr.responseJSON?.message || 'Gagal mengambil detail booking.',
                        'error'
                    );
                }
            });
        }
    </script>
@endpush