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

@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">

                        {{-- ── CARD HEADER ── --}}
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- ── TOOLBAR ── --}}
                        <div class="row px-4 py-2 align-items-center g-2">
                            {{-- Tombol Tambah --}}
                            <div class="col-auto">
                                <button class="btn btn-primary mb-0"
                                    data-bs-toggle="modal" data-bs-target="#modalAdd">
                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold">Tambah</span>
                                </button>
                            </div>

                            {{-- Filter Kategori + Search dalam satu form --}}
                            <div class="col-auto ms-auto">
                                <form method="GET" action="{{ url($url_menu) }}"
                                    class="d-flex align-items-center gap-2">
                                    {{-- Dropdown Kategori --}}
                                    <select name="kategori" class="form-control form-control-sm mb-0"
                                            style="min-width:160px" onchange="this.form.submit()">
                                        <option value="">-- Semua Kategori --</option>
                                        @foreach ($kategori_options as $key => $label)
                                            <option value="{{ $key }}"
                                                {{ $kategori_filter === $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>

                                    {{-- Search Input --}}
                                    <div class="input-group input-group-sm mb-0" style="width:220px">
                                        <input type="text" name="search" class="form-control"
                                            placeholder="Cari judul..."
                                            value="{{ $search ?? '' }}">
                                        <button class="btn btn-outline-secondary mb-0" type="submit">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        {{-- ── TABLE ── --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_user_manual">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            <th>Judul</th>
                                            <th>Kategori</th>
                                            <th>Role</th>
                                            <th>File PDF</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_detail as $row)
                                            <tr {{ $row->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>

                                                <td class="text-sm font-weight-normal">
                                                    <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($row->id)) }}'">
                                                            <i class="fas fa-eye"></i>
                                                            <span class="font-weight-bold"> View</span>
                                                        </button>

                                                        <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">
                                                            @if ($row->isactive == 1)
                                                                <li><hr class="dropdown-divider"></li>
                                                                <button type="button"
                                                                    class="btn btn-sm btn-warning mx-2 mb-0 w-90 btn-edit"
                                                                    title="Edit Data"
                                                                    data-id="{{ encrypt($row->id) }}"
                                                                    data-judul="{{ $row->judul }}"
                                                                    data-kategori="{{ $row->kategori }}"
                                                                    data-role="{{ $row->role }}"
                                                                    data-file-pdf="{{ $row->file_pdf }}"
                                                                    data-show-url="{{ url($url_menu . '/show/' . encrypt($row->id)) }}"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#modalEdit">
                                                                    <i class="fas fa-edit"></i>
                                                                    <span class="font-weight-bold"> Edit</span>
                                                                </button>
                                                            @endif

                                                            <form action="{{ url($url_menu . '/' . encrypt($row->id)) }}"
                                                                method="POST" style="display: inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <li><hr class="dropdown-divider"></li>
                                                                <button type="submit"
                                                                    class="btn btn-sm btn-{{ $row->isactive == '0' ? 'success' : 'danger' }} mx-2 mb-0 w-90"
                                                                    onclick="return deleteData(event, '{{ $row->judul }}', '{{ $row->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                                    <i class="fas fa-random"></i>
                                                                    <span class="font-weight-bold">
                                                                        {{ $row->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}
                                                                    </span>
                                                                </button>
                                                            </form>

                                                            <li><hr class="dropdown-divider"></li>
                                                        </ul>
                                                    </div>
                                                </td>

                                                <td>{{ $table_detail->firstItem() + $loop->index }}</td>

                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $row->judul }}
                                                </td>

                                                {{-- Kolom Kategori --}}
                                                <td class="text-sm font-weight-normal">
                                                    @php
                                                        $badge = match($row->kategori) {
                                                            'permintaan_barang' => 'info',
                                                            'peminjaman_barang' => 'warning',
                                                            'ticketing'         => 'primary',
                                                            default             => 'secondary',
                                                        };
                                                    @endphp
                                                    <span class="badge badge-sm bg-{{ $badge }}">
                                                        {{ $kategori_options[$row->kategori] ?? $row->kategori }}
                                                    </span>
                                                </td>

                                                {{-- Kolom Role --}}
                                                <td class="text-sm font-weight-normal">
                                                    @php
                                                        $roleBadge = match($row->role) {
                                                            'admins' => 'danger',
                                                            'itstaf' => 'primary',
                                                            'guests' => 'secondary',
                                                            'head.s' => 'info',
                                                            'mis.it' => 'warning',
                                                            default  => 'secondary',
                                                        };
                                                        $roleLabel = $row->role ? ($role_options[$row->role] ?? $row->role) : 'Semua Role';
                                                    @endphp
                                                    <span class="badge badge-sm bg-{{ $roleBadge }}">
                                                        {{ $roleLabel }}
                                                    </span>
                                                </td>

                                                <td class="text-sm font-weight-normal">
                                                    @if ($row->file_pdf)
                                                        <a class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                            href="{{ url($url_menu . '/show/' . encrypt($row->id)) }}">
                                                            <i class="fas fa-file-pdf text-lg"></i> Buka PDF
                                                        </a>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>

                                                <td class="text-sm font-weight-normal">
                                                    <span class="badge badge-sm bg-{{ $row->isactive == 1 ? 'success' : 'danger' }}">
                                                        {{ $row->isactive == 1 ? 'Aktif' : 'Non-Aktif' }}
                                                    </span>
                                                </td>

                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        Data {{ $table_detail->firstItem() }} - {{ $table_detail->lastItem() }}
                                        dari {{ $table_detail->total() }} data.
                                    </div>
                                    <div>
                                        {{ $table_detail->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>Note : <i aria-hidden="true" style="color: #ffc2cd;"
                                            class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </div>
                        </div>

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

    {{-- ── MODAL ADD ── --}}
    <div class="modal fade" id="modalAdd" tabindex="-1" aria-labelledby="modalAddLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ url($url_menu) }}" method="POST">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title" id="modalAddLabel">
                            <i class="fas fa-plus-circle me-2 text-primary"></i>
                            Tambah {{ $title_menu }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>

                    <div class="modal-body">
                        {{-- Judul --}}
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-sm">
                                Judul <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="judul" class="form-control"
                                placeholder="Masukkan judul user manual" required>
                        </div>

                        {{-- Kategori --}}
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-sm">
                                Kategori <span class="text-danger">*</span>
                            </label>
                            <select name="kategori" class="form-control" required>
                                <option value="">-- Pilih Kategori --</option>
                                @foreach ($kategori_options as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Role --}}
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-sm">Role</label>
                            <select name="role" class="form-control">
                                <option value="">(Semua Role)</option>
                                @foreach ($role_options as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Link Google Drive --}}
                        <div class="mb-1">
                            <label class="form-label font-weight-bold text-sm">
                                Link Google Drive <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="link_gdrive" class="form-control"
                                placeholder="https://drive.google.com/file/d/.../view?usp=sharing" required>
                            <small class="text-muted">
                                Paste link share Google Drive. Pastikan akses file diset
                                <strong>"Anyone with the link"</strong>.
                            </small>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary mb-0"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary mb-0">
                            <i class="fas fa-save me-1"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── MODAL EDIT ── --}}
    <div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formEdit" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <h5 class="modal-title" id="modalEditLabel">
                            <i class="fas fa-edit me-2 text-warning"></i>
                            Edit {{ $title_menu }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>

                    <div class="modal-body">
                        {{-- Judul --}}
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-sm">
                                Judul <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="judul" id="editJudul" class="form-control"
                                placeholder="Masukkan judul user manual" required>
                        </div>

                        {{-- Kategori --}}
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-sm">
                                Kategori <span class="text-danger">*</span>
                            </label>
                            <select name="kategori" id="editKategori" class="form-control" required>
                                <option value="">-- Pilih Kategori --</option>
                                @foreach ($kategori_options as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Role --}}
                        <div class="mb-3">
                            <label class="form-label font-weight-bold text-sm">Role</label>
                            <select name="role" id="editRole" class="form-control">
                                <option value="">(Semua Role)</option>
                                @foreach ($role_options as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Link Google Drive baru --}}
                        <div class="mb-1">
                            <label class="form-label font-weight-bold text-sm">Link Google Drive Baru</label>
                            <input type="text" name="link_gdrive" id="editLinkGdrive" class="form-control"
                                placeholder="https://drive.google.com/file/d/.../view?usp=sharing">
                            <small class="text-muted">
                                Kosongkan jika tidak ingin mengganti file PDF yang sudah ada.
                            </small>
                        </div>

                        {{-- Link PDF saat ini --}}
                        <div id="currentPdfWrapper" class="mt-2" style="display:none;">
                            <small class="text-muted">
                                File saat ini:
                                <a id="currentPdfLink" href="#" class="text-success">
                                    <i class="fas fa-file-pdf"></i> Lihat PDF
                                </a>
                            </small>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary mb-0"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning mb-0">
                            <i class="fas fa-save me-1"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        // ── DATATABLES ──────────────────────────────────────────────────────
        $('#list_user_manual').DataTable({
            paging: false,
            info: false,
            searching: false,   // ← matikan search DataTables, sudah pakai server-side
            responsive: true,
            language: {
                zeroRecords: "Maaf - Data tidak ada",
            },
            dom: 't',           // ← hanya render table, tidak ada toolbar DataTables
        });

        // ── MODAL EDIT ──────────────────────────────────────────────────────
        document.querySelectorAll('.btn-edit').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const encryptedId = this.dataset.id;
                const judul       = this.dataset.judul;
                const kategori    = this.dataset.kategori;
                const filePdf     = this.dataset.filePdf;
                const showUrl     = this.dataset.showUrl;

                document.getElementById('formEdit').action =
                    `{{ url($url_menu) }}/${encryptedId}`;

                document.getElementById('editJudul').value      = judul;
                document.getElementById('editKategori').value   = kategori;
                document.getElementById('editRole').value        = this.dataset.role ?? '';
                document.getElementById('editLinkGdrive').value = '';

                if (filePdf) {
                    document.getElementById('currentPdfLink').href             = showUrl;
                    document.getElementById('currentPdfWrapper').style.display = 'block';
                } else {
                    document.getElementById('currentPdfWrapper').style.display = 'none';
                }
            });
        });

        // ── KONFIRMASI TOGGLE STATUS ────────────────────────────────────────
        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();
                }
            });
        }
    </script>
@endpush