@extends('admin.layouts.app')

@section('title', 'Pengajuan')

@push('styles')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">

    <style>
        .soft-card {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
        }

        .table-hlines {
            --line: #e9edf4;
        }

        .table-hlines> :not(caption)>*>* {
            border-top: 0;
            border-right: 0 !important;
            border-left: 0 !important;
            border-bottom: 1px solid var(--line);
            background: transparent;
        }

        .table-hlines thead th {
            border-bottom: 2px solid var(--line) !important;
        }

        .table-hlines.table-hover tbody tr:hover {
            background: transparent !important;
        }

        table.dataTable.hover>tbody>tr:hover>*,
        table.dataTable.display>tbody>tr:hover>* {
            background: transparent !important;
        }

        .table-sticky thead th {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1
        }

        div.dataTables_filter,
        div.dataTables_length {
            display: none
        }

        .badge-status-diterima {
            background: #a6e7d8;
            color: #008767;
            border: 1px solid rgba(0, 0, 0, .05)
        }

        .badge-status-diajukan {
            background: #ffd5b6;
            color: #a24c00;
            border: 1px solid rgba(0, 0, 0, .05)
        }

        .badge-status-ditolak {
            background: #ffc5c5;
            color: #df0404;
            border: 1px solid rgba(0, 0, 0, .05)
        }

        .dataTables_wrapper .dataTables_info {
            padding-top: .75rem
        }

        .dataTables_wrapper .dataTables_paginate .pagination {
            margin: 0
        }

        .dataTables_wrapper .form-select.form-select-sm {
            padding: .25rem 1.5rem .25rem .5rem
        }

        .dataTables_wrapper .dataTables_filter input {
            width: 180px
        }

        @media (min-width:992px) {
            .dataTables_wrapper .dataTables_filter input {
                width: 260px
            }
        }
    </style>
@endpush

@section('content')
    <div class="card soft-card">
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                <div>
                    <h4 class="mb-0">Pengajuan Izin</h4>
                    <small style="color: #0f766e">Anggota aktif</small>
                </div>
                @if (session('success'))
                    <div class="alert alert-success mt-4">
                        {{ session('success') }}
                    </div>
                @endif
                <div class="d-flex align-items-center gap-2">
                    <div class="input-group input-group-sm" style="max-width:260px;">
                        <span class="input-group-text bg-white"><i class="ti ti-search"></i></span>
                        <input id="tableSearch" type="text" class="form-control" placeholder="Search">
                    </div>
                    <div class="dropdown">
                        <button id="sortDropdownLabel" class="btn btn-sm btn-light border dropdown-toggle"
                            data-bs-toggle="dropdown">
                            Short by : Newest
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" data-sort="newest">Newest</a></li>
                            <li><a class="dropdown-item" href="#" data-sort="oldest">Oldest</a></li>
                            <li><a class="dropdown-item" href="#" data-sort="name-asc">Name A–Z</a></li>
                            <li><a class="dropdown-item" href="#" data-sort="name-desc">Name Z–A</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <table id="pengajuanTable" class="table align-middle w-100 table-sticky table-hlines table-hover">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Jabatan</th>
                        <th class="d-none d-md-table-cell">Tanggal</th>
                        <th class="d-none d-md-table-cell">Keterangan</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($data as $index => $r)
                        @php
                            $idPengajuan = $r->id;
                            $status = $r['status'];
                            $name = $r->user->name;
                            $jabatan = $r->user->role;
                            $tanggalDisp = \Carbon\Carbon::parse($r->date)->translatedFormat('d F Y');
                            $badgeClass =
                                [
                                    'disetujui' => 'badge-status-diterima',
                                    'diajukan' => 'badge-status-diajukan',
                                    'ditolak' => 'badge-status-ditolak',
                                ][$status] ?? 'badge-status-diajukan';
                            $statusText = ucfirst($status);
                        @endphp
                        <tr onclick="window.location='{{ route('admin.pengajuan.detail', ['id' => $idPengajuan]) }}'"
                            style="cursor:pointer">
                            <td>{{ $name }}</td>
                            <td>{{ $jabatan }}</td>
                            <td class="d-none d-md-table-cell" data-order="{{ $r['date'] }}">{{ $tanggalDisp }}</td>
                            <td class="d-none d-md-table-cell">{{ $r['keterangan'] }}</td>
                            <td><span class="badge rounded-pill {{ $badgeClass }}">{{ $statusText }}</span></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4">Data pengajuan masih kosong.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(function() {
            var hasData = $('#pengajuanTable tbody tr').length > 0 && !$('#pengajuanTable tbody tr td[colspan]')
                .length;
            if (typeof $.fn.DataTable !== 'undefined' && hasData) {
                var table = $('#pengajuanTable').DataTable({
                    autoWidth: false,
                    responsive: {
                        details: false
                    },
                    paging: true,
                    pageLength: 8,
                    lengthChange: false,
                    info: true,
                    ordering: true,
                    searching: true,
                    order: [
                        [2, 'desc']
                    ],
                    language: {
                        search: "Cari:",
                        searchPlaceholder: "Ketik untuk mencari...",
                        lengthMenu: "Tampilkan _MENU_",
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        infoFiltered: "(difilter dari _MAX_ total data)",
                        paginate: {
                            first: "Pertama",
                            last: "Terakhir",
                            next: "Selanjutnya",
                            previous: "Sebelumnya"
                        },
                        emptyTable: "Tidak ada data yang tersedia",
                        zeroRecords: "Tidak ada data yang cocok"
                    },
                    columnDefs: [{
                            targets: [2, 4],
                            className: 'text-nowrap'
                        },
                        {
                            targets: 4,
                            orderable: false
                        }
                    ],
                    dom: "rt<'row align-items-center mt-3'<'col-sm-6 text-center text-sm-start'i><'col-sm-6 d-flex justify-content-center justify-content-sm-end'p>>"
                });

                $('#tableSearch').on('keyup', function() {
                    table.search(this.value).draw();
                });

                $('[data-sort]').on('click', function(e) {
                    e.preventDefault();
                    const sort = $(this).data('sort');
                    if (sort === 'newest') table.order([
                        [2, 'desc']
                    ]).draw();
                    if (sort === 'oldest') table.order([
                        [2, 'asc']
                    ]).draw();
                    if (sort === 'name-asc') table.order([
                        [0, 'asc']
                    ]).draw();
                    if (sort === 'name-desc') table.order([
                        [0, 'desc']
                    ]).draw();
                    $('#sortDropdownLabel').text($(this).text());
                });
            }
        });
    </script>
@endpush