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

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

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">

                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @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">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ url($url_menu . '/add') }}'">
                                            <i class="fas fa-plus me-1"></i>
                                            <span class="font-weight-bold">Tambah</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="display table" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="80">Action</th>
                                            <th>No</th>
                                            <th>Tahun</th>
                                            <th>Periode</th>
                                            <th>Rentang Periode</th>
                                            <th>Deadline Penilaian</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($periods as $period)
                                            @php
                                                $primary = $period->id;
                                                $rowClass = '';
                                                $rowStyle = '';
                                                $periodLabel =
                                                    $period->period_range ?? $period->year . ' Q' . $period->quarter;
                                                $periodModel = \App\Models\Period::find($period->id);
                                                $canActivate = false;
                                                $canLock = false;
                                                $lockTooltip = 'Tombol kunci hanya tersedia saat status Aktif.';
                                                $activateTooltip =
                                                    'Tombol aktifkan hanya tersedia saat status Persiapan.';
                                                $today = \Carbon\Carbon::today();

                                                if (isset($period->isactive) && $period->isactive == '0') {
                                                    $rowClass = 'not';
                                                    $rowStyle = 'background-color:#ffe9ed;';
                                                } elseif (isset($period->status)) {
                                                    if ($period->status === 'active') {
                                                        $rowStyle = 'background-color:#e8f5e8;'; // Light green for active
                                                    } elseif ($period->status === 'prep') {
                                                        $rowStyle = 'background-color:#fff3cd;'; // Light yellow for prep
                                                    } elseif ($period->status === 'locked') {
                                                        $rowStyle = 'background-color:#f8f9fa;'; // Light gray for locked
                                                    }
                                                }

                                                // if ($period->status === 'prep' && $period->start_date) {
                                                //     $startDate = \Carbon\Carbon::parse(
                                                //         $period->start_date,
                                                //     )->startOfDay();
                                                //     if ($today->greaterThanOrEqualTo($startDate)) {
                                                //         $canActivate = true;
                                                //         $activateTooltip = 'Aktifkan periode.';
                                                //     } else {
                                                //         $activateTooltip =
                                                //             'Periode dapat diaktifkan 1 minggu sebelum tanggal mulai.';
                                                //     }
                                                // }

                                                // if ($period->status === 'active' && $period->end_date) {
                                                //     $lockDate = \Carbon\Carbon::parse($period->end_date)
                                                //         ->addDay()
                                                //         ->startOfDay();
                                                //     if ($today->greaterThanOrEqualTo($lockDate)) {
                                                //         $canLock = true;
                                                //         $lockTooltip = 'Kunci periode.';
                                                //     } else {
                                                //         $lockTooltip =
                                                //             'Periode dapat dikunci mulai sehari setelah tanggal selesai.';
                                                //     }
                                                // } elseif ($period->status !== 'active') {
                                                //     $lockTooltip = 'Tombol kunci hanya tersedia saat status Aktif.';
                                                // }

                                            @endphp

                                            <tr {{ $rowClass ? 'class=' . $rowClass : '' }}
                                                {{ $rowStyle ? 'style=' . $rowStyle : '' }}>
                                                <td class="font-weight-normal text-sm">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($primary)) }}'">
                                                            <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                                View</span>
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split mb-0 px-3"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>

                                                        <ul class="dropdown-menu">
                                                            {{-- Edit button --}}
                                                            @if ($authorize && $authorize->edit == '1')
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-warning w-90 mx-2 mb-0"
                                                                    title="Edit Data"
                                                                    onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($primary)) }}'">
                                                                    <i class="fas fa-edit"></i>
                                                                    <span class="font-weight-bold">Edit</span>
                                                                </button>
                                                            @endif

                                                            {{-- Delete button (only for prep status) --}}
                                                            @if ($authorize && $authorize->delete == '1' && $period->status === 'prep')
                                                                <form
                                                                    action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                                    method="POST" style="display: inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="submit"
                                                                        class="btn btn-sm btn-danger w-90 mx-2 mb-0"
                                                                        title="Hapus Periode"
                                                                        onclick="return deleteData(event, '{{ addslashes($periodLabel) }}', 'Hapus')">
                                                                        <i class="fas fa-trash-alt"></i>
                                                                        <span class="font-weight-bold">Hapus</span>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>

                                                <td>{{ $periods->firstItem() + $loop->index }}</td>
                                                <td class="font-weight-bold text-dark text-sm">{{ $period->year }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    @switch($period->quarter)
                                                        @case(1)
                                                            Periode 1
                                                        @break

                                                        @case(2)
                                                            Periode 2
                                                        @break

                                                        @case(3)
                                                            Periode 3
                                                        @break

                                                        @case(4)
                                                            Periode 4
                                                        @break

                                                        @default
                                                            -
                                                    @endswitch
                                                </td>
                                                <td class="font-weight-normal text-sm">{{ $period->period_range }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    {{ $format->tanggal($period->deadline_date) }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    <span
                                                        class="badge badge-sm bg-{{ $period->status == 'active' ? 'success' : ($period->status == 'prep' ? 'warning' : 'secondary') }}">
                                                        @switch($period->status)
                                                            @case('active')
                                                                Aktif
                                                            @break

                                                            @case('prep')
                                                                Persiapan
                                                            @break

                                                            @case('locked')
                                                                Terkunci
                                                            @break

                                                            @case('injury')
                                                                Injury
                                                            @break

                                                            @default
                                                                Tidak Diketahui
                                                        @endswitch
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        Data {{ $periods->firstItem() }} - {{ $periods->lastItem() }} dari
                                        {{ $periods->total() }} data.
                                    </div>
                                    <div>
                                        {{ $periods->appends(request()->query())->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>
                                        Catatan:
                                        (<i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>) Data
                                        tidak aktif,
                                        (<i aria-hidden="true" style="color: #e8f5e8;" class="fas fa-circle"></i>) Periode
                                        aktif,
                                        (<i aria-hidden="true" style="color: #fff3cd;" class="fas fa-circle"></i>)
                                        Persiapan,
                                        (<i aria-hidden="true" style="color: #f8f9fa;" class="fas fa-circle"></i>) Terkunci,
                                        (<i aria-hidden="true" style="color: #d1ecf1;" class="fas fa-circle"></i>) Injury
                                    </code>
                                </div>
                            </div>
                        </div>

                        {{-- CARD INFO PERIODE PREP --}}
                        @if ($nextPeriodToActivate)
                            @php
                                $nextStart = \Carbon\Carbon::parse($nextPeriodToActivate->start_date)->format(
                                    'Y-m-d H:i:s',
                                );
                                $isReady = now()->greaterThanOrEqualTo(
                                    \Carbon\Carbon::parse($nextPeriodToActivate->start_date),
                                );
                            @endphp

                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    <div class="card mb-3 shadow-sm" style="position: sticky; top: 80px; z-index: 1000;">
                                        <div class="card-body">

                                            <div class="d-flex justify-content-between align-items-center">

                                                {{-- BAGIAN KIRI --}}
                                                <div>
                                                    <h6 class="fw-bold text-primary mb-2">
                                                        <i class="fas fa-clock me-1"></i>
                                                        Periode Selanjutnya Belum Dibuka
                                                    </h6>

                                                    <p class="text-dark mb-1">
                                                        Periode <strong>{{ $nextPeriodToActivate->period_range }}</strong>
                                                        memiliki status
                                                        <strong>PREP</strong>. Periode dapat diaktifkan pada:
                                                        <strong>{{ $format->tanggal($nextPeriodToActivate->start_date) }}</strong>
                                                    </p>
                                                </div>

                                                {{-- BAGIAN KANAN (TIMER / STATUS SIAP) --}}
                                                <div class="text-end"
                                                    style="min-width: 220px; font-size: 1rem;
                                                    color: {{ $isReady ? '#00b894' : '#d63031' }};">

                                                    @if ($isReady)
                                                        <button class="badge badge-sm bg-primary" disabled><span>SUdah bisa
                                                                diaktifkan!</span></button>
                                                    @else
                                                        <button class="badge badge-sm bg-danger" disabled><span
                                                                id="countdownTimer"></span></button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- Optional per-page JS include gate --}}
@push('addjs')
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @include("js.$dmenu")
        @else
            <script>
                Swal.fire({
                    title: 'JS Not Found!!',
                    text: 'Please Create File JS',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            </script>
        @endif
    @endif
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            // set table into datatables
            const dt = $('#list_{{ $dmenu }}').DataTable({
                paging: false,
                info: false,
                searching: true,
                responsive: true,
                order: [
                    [1, 'asc']
                ], // Keep the sequence as rendered by server (No column)
                columnDefs: [{
                        targets: 0,
                        orderable: false
                    }, // Action column
                ],
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                buttons: [{
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            window.location.href = "{{ url($url_menu) }}?export=excel";
                        },
                        className: 'buttons-excel'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        action: function() {
                            window.location.href = "{{ url($url_menu) }}?export=pdf";
                        },
                        className: 'buttons-pdf'
                    }
                ],
                initComplete: function() {
                    const searchBarHtml = `
          <div class=\"dataTables_filter d-flex justify-content-end\">
            <form method=\"GET\" action=\"{{ url($url_menu) }}\" class=\"d-flex\">
              <input type=\"text\" name=\"search\" class=\"form-control me-2\" placeholder=\"Search...\" value=\"{{ request('search') }}\">
            </form>
          </div>`;
                    $('.dataTables_filter').remove();
                    $(searchBarHtml).insertAfter('.dt-buttons');
                }
            });

            // style buttons
            $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');

            // permission-based buttons
            @if (isset($authorize->excel) && $authorize->excel == '0')
                $('.buttons-excel').remove();
            @endif
            @if (isset($authorize->pdf) && $authorize->pdf == '0')
                $('.buttons-pdf').remove();
            @endif
            @if (isset($authorize->print) && $authorize->print == '0')
                $('.buttons-print').remove();
            @endif
        });

        // confirm delete / toggle active
        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }

        // confirm lock handler
        function confirmLock(event, periodLabel, targetUrl) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda yakin mengunci periode? Tindakan ini akan menonaktifkan perubahan lebih lanjut.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Kunci',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = targetUrl;
                }
            });
            return false;
        }

        // confirm activate handler
        function confirmActivate(event, periodLabel, targetUrl) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Aktifkan periode? Periode akan dibuka untuk penilaian.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Aktifkan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = targetUrl;
                }
            });
            return false;
        }

        // === COUNTDOWN TIMER UNTUK AKTIVASI PERIODE ===
        @if ($nextPeriodToActivate)
            const targetDate = new Date("{{ $nextStart }}").getTime();
            const el = document.getElementById("countdownTimer");

            setInterval(() => {
                const now = Date.now();
                const diff = targetDate - now;

                if (diff <= 0) {
                    el.innerHTML = "Sudah bisa diaktifkan!";
                    el.style.color = "#00b894";
                    return;
                }

                const d = Math.floor(diff / (1000 * 60 * 60 * 24));
                const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const s = Math.floor((diff % (1000 * 60)) / 1000);

                el.innerHTML = `${d} Hari : ${h} Jam : ${m} Menit : ${s} Detik`;
            }, 1000);
        @endif
    </script>
@endpush