@extends('layout.layout')

@php
    $title = 'Penjadwalan';
    $subTitle = 'Penjadwalan';
    $script = '
        <script src="' . asset('assets/js/backend/jadwal/flatpickr.js') . '"></script>
        <script>
            // Build disabled time ranges from existing jadwal
            (function(){
                const events = ' . json_encode($jadwal ?? []) . ';
                function parseToDate(s){
                    if(!s) return null;
                    if(/T/.test(s)) { // ISO 8601
                        return new Date(s);
                    }
                    if(/^\d{4}-\d{2}-\d{2}$/.test(s)) { // yyyy-mm-dd (all day)
                        return new Date(s + "T00:00:00");
                    }
                    const m = s.match(/^(\d{2})\/(\d{2})\/(\d{4})\s+(\d{2}):(\d{2})$/);
                    if(m){
                        const d = m[1], mo = m[2], y = m[3], H = m[4], i = m[5];
                        return new Date(`${y}-${mo}-${d}T${H}:${i}:00`);
                    }
                    return null;
                }
                const ranges = [];
                (events || []).forEach(ev => {
                    const from = parseToDate(ev.start);
                    let to = parseToDate(ev.end);
                    if(from && to){
                        // If end is date-only (no time) push to end of day
                        if(/^\d{4}-\d{2}-\d{2}$/.test(ev.end || "")){
                            to = new Date(to.getFullYear(), to.getMonth(), to.getDate(), 23, 59, 59);
                        }
                        ranges.push({ from, to });
                    }
                });
                window.disabledJadwalRanges = ranges;
            })();
        </script>
        <script src="' . asset('assets/js/backend/jadwal/datepickr.js') . '"></script>
        <script>
            let table = new DataTable("#dataTable");
            if (window.jQuery) {
                const initSelect2 = function(){
                    try {
                        jQuery(".select2").select2({ dropdownParent: jQuery("#exampleModal"), width: "100%" });
                    } catch(e) {}
                };
                initSelect2();
                document.addEventListener("shown.bs.modal", function(e){
                    if (e.target && e.target.id === "exampleModal") initSelect2();
                });
            }
        </script>';
@endphp

@section('content')

    <div class="card basic-data-table">
        <div class="card-body">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3 gap-3">
                <div>
                    <h5 class="mb-0">Data Jadwal Sidang</h5>
                </div>
                <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-end gap-2 w-md-auto">
                    <div class="flex-fill flex-sm-fill-0">
                        <button class="btn btn-primary btn-sm d-flex align-items-center justify-content-center gap-2 w-100" type="button">
                            <iconify-icon icon="material-symbols:info"></iconify-icon>
                            <span class="d-none d-sm-inline">Total Jadwal:</span>
                            <span class="d-inline d-sm-none">Total:</span>
                            <strong>{{ isset($jadwal) ? count($jadwal) : 0 }}</strong>
                        </button>
                    </div>
                    <div class="flex-fill flex-sm-fill-0">
                        <button class="btn btn-success btn-sm d-flex align-items-center justify-content-center gap-2 w-100" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            <iconify-icon icon="fa6-regular:square-plus"></iconify-icon>
                            <span class="d-none d-sm-inline">Buat Jadwal</span>
                            <span class="d-inline d-sm-none">Tambah</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
                    <thead>
                        <tr>
                            <th scope="col">
                                <div class="form-check style-check d-flex align-items-center">
                                    <label class="form-check-label">No</label>
                                </div>
                            </th>
                            <th scope="col">Perusahaan</th>
                            <th scope="col">Nama Kegiatan</th>
                            <th scope="col">Jenis Dokumen</th>
                            <th scope="col">Mulai</th>
                            <th scope="col">Selesai</th>
                            <th scope="col">Status</th>
                            <th scope="col">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($jadwal ?? []) as $item)
                            @php
                                $start = \Carbon\Carbon::parse($item['start'] ?? null);
                                $end = \Carbon\Carbon::parse($item['end'] ?? null);
                                $now = \Carbon\Carbon::now();

                                $status = 'Terjadwal';
                                $statusClass = 'bg-info-100 text-info-600';
                                if ($start && $end) {
                                    if ($now->between($start, $end)) {
                                        $status = 'Berjalan';
                                        $statusClass = 'bg-warning-100 text-warning-600';
                                    } elseif ($now->gt($end)) {
                                        $status = 'Selesai';
                                        $statusClass = 'bg-success-focus text-success-main';
                                    }
                                }
                            @endphp
                            <tr>
                                <td>
                                    <div class="form-check style-check d-flex align-items-center">
                                        <label class="form-check-label">{{ $loop->iteration }}</label>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-primary-600">{{ $item['perusahaan'] ?? "-" }}</span>
                                </td>
                                <td>
                                    <span class="text-primary-600">{{ $item['title'] ?? "-" }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-neutral-100 text-neutral-700 fw-medium radius-4 text-xs px-8 py-4 text-uppercase">{{ $item['documentType'] ?? '-' }}</span>
                                </td>
                                <td>{{ $start ? $start->format('d M Y H:i') : '-' }}</td>
                                <td>{{ $end ? $end->format('d M Y H:i') : '-' }}</td>
                                <td>
                                    <span class="px-24 py-4 rounded-pill fw-medium text-sm {{ $statusClass }}">{{ $status }}</span>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-light-primary" title="Detail" data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                        <iconify-icon icon="hugeicons:view" class="text-xl"></iconify-icon>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-secondary-light">Belum ada jadwal</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @include('components.backend.jadwal.modal_add')
    @include('components.backend.jadwal.modal_view')

@endsection