@extends('layouts.super-admin')

@section('page-title', 'Daftar Panduan')

@section('content')

    <div class="panduan-page">

        

        {{-- =====================================================
         ALERT SUCCESS
    ====================================================== --}}
        @if (session('success'))
            <div class="panduan-alert success">

                <i class="fa-solid fa-circle-check"></i>

                <span>
                    {{ session('success') }}
                </span>

            </div>
        @endif


        {{-- =====================================================
         ALERT ERROR
    ====================================================== --}}
        @if (session('error'))
            <div class="panduan-alert error">

                <i class="fa-solid fa-circle-exclamation"></i>

                <span>
                    {{ session('error') }}
                </span>

            </div>
        @endif


        {{-- =====================================================
         VALIDATION ERROR
    ====================================================== --}}
        @if ($errors->any())

            <div class="panduan-alert error">

                <i class="fa-solid fa-circle-exclamation"></i>

                <div>

                    @foreach ($errors->all() as $error)
                        <div>
                            {{ $error }}
                        </div>
                    @endforeach

                </div>

            </div>

        @endif


        {{-- =====================================================
         FILTER CARD
    ====================================================== --}}
        <section class="panduan-card">

            <div class="panduan-card-title">

                <div>

                    <h2>
                        Filter Data Panduan
                    </h2>

                    <p>
                        Gunakan filter untuk mencari panduan.
                    </p>

                </div>

            </div>


            <form action="{{ route('superadmin.panduan.index') }}" method="GET" class="panduan-filter">

                {{-- =================================================
                 SEARCH
            ================================================== --}}
                <div class="filter-group search-group">

                    <label for="search">
                        Pencarian Kata Kunci
                    </label>

                    <div class="input-with-icon">

                        <i class="fa-solid fa-magnifying-glass"></i>

                        <input type="text" id="search" name="search" value="{{ request('search') }}"
                            placeholder="Masukkan judul atau deskripsi...">

                    </div>

                </div>


                {{-- =================================================
                 STATUS
            ================================================== --}}
                <div class="filter-group">

                    <label for="status">
                        Status
                    </label>

                    <select name="status" id="status">

                        <option value="">
                            Semua Status
                        </option>

                        <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>
                            Aktif
                        </option>

                        <option value="nonaktif" {{ request('status') == 'nonaktif' ? 'selected' : '' }}>
                            Nonaktif
                        </option>

                    </select>

                </div>


                {{-- =================================================
                 FILTER ACTION
            ================================================== --}}
                <div class="filter-actions">

                    {{-- TAMBAH PANDUAN --}}
                    <button type="button" class="btn-add-panduan" id="openPanduanModal">

                        <i class="fa-solid fa-plus"></i>

                        Tambah Panduan

                    </button>


                    {{-- CARI --}}
                    <button type="submit" class="btn-search">

                        <i class="fa-solid fa-magnifying-glass"></i>

                        Cari

                    </button>


                    {{-- RESET --}}
                    <a href="{{ route('superadmin.panduan.index') }}" class="btn-reset">

                        <i class="fa-solid fa-rotate-left"></i>

                        Reset

                    </a>

                </div>

            </form>

        </section>


        {{-- =====================================================
         TABLE CARD
    ====================================================== --}}
        <section class="panduan-card table-card">

            {{-- =================================================
             TABLE HEADER
        ================================================== --}}
            <div class="table-header">

                <div>

                    <h2>
                        Tabel Data Panduan
                    </h2>

                    <p>
                        Daftar panduan yang tersedia dalam sistem.
                    </p>

                </div>


                <div class="table-total">

                    Total:

                    <strong>
                        {{ $panduan->total() }}
                    </strong>

                    panduan

                </div>

            </div>


            {{-- =================================================
             TABLE
        ================================================== --}}
            <div class="table-responsive">

                <table class="panduan-table">

                    <thead>

                        <tr>

                            <th width="55">
                                No
                            </th>

                            <th>
                                Judul Panduan
                            </th>

                            <th>
                                Deskripsi
                            </th>

                            <th>
                                Status
                            </th>

                            <th>
                                Tanggal
                            </th>

                            <th width="130">
                                Aksi
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @forelse($panduan as $item)
                            <tr>

                                {{-- NO --}}
                                <td data-label="No">

                                    {{ $panduan->firstItem() + $loop->index }}

                                </td>


                                {{-- JUDUL --}}
                                <td data-label="Judul">

                                    <div class="panduan-title">

                                        <div class="panduan-icon">

                                            <i class="fa-solid fa-book-open"></i>

                                        </div>


                                        <div>

                                            <strong>
                                                {{ $item->judul }}
                                            </strong>

                                        </div>

                                    </div>

                                </td>


                                {{-- DESKRIPSI --}}
                                <td data-label="Deskripsi">

                                    <div class="description-text">

                                        {{ $item->deskripsi ? Str::limit($item->deskripsi, 100) : '-' }}

                                    </div>

                                </td>


                                {{-- STATUS --}}
                                <td data-label="Status">

                                    @if ($item->status === 'aktif')
                                        <span class="status-badge active">

                                            <span class="status-dot"></span>

                                            Aktif

                                        </span>
                                    @else
                                        <span class="status-badge inactive">

                                            <span class="status-dot"></span>

                                            Nonaktif

                                        </span>
                                    @endif

                                </td>


                                {{-- TANGGAL --}}
                                <td data-label="Tanggal">

                                    {{ $item->created_at ? $item->created_at->format('d-m-Y') : '-' }}

                                </td>


                                {{-- AKSI --}}
                                <td data-label="Aksi">

                                    <div class="action-buttons">

                                        {{-- EDIT --}}
                                        <button type="button" class="action-button edit btn-edit-panduan" title="Edit"
                                            data-id="{{ $item->id }}" data-judul="{{ $item->judul }}"
                                            data-deskripsi="{{ $item->deskripsi }}" data-status="{{ $item->status }}"
                                            data-video="{{ $item->video }}" data-dokumen="{{ $item->dokumen }}">

                                            <i class="fa-solid fa-pen"></i>

                                        </button>


                                        {{-- LIHAT --}}
                                        <button type="button" class="action-button view btn-detail-panduan" title="Lihat"
                                            data-id="{{ $item->id }}" data-judul="{{ $item->judul }}"
                                            data-deskripsi="{{ $item->deskripsi }}" data-status="{{ $item->status }}"
                                            data-video="{{ $item->video }}" data-dokumen="{{ $item->dokumen }}"
                                            data-tanggal="{{ $item->created_at ? $item->created_at->format('d-m-Y H:i') : '-' }}">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>


                                        {{-- DELETE BUTTON --}}
                                        <button type="button" class="action-button delete btn-delete-panduan"
                                            title="Hapus" data-id="{{ $item->id }}" data-judul="{{ $item->judul }}">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="6" class="empty-table">

                                    <div class="empty-table-content">

                                        <div class="empty-table-icon">

                                            <i class="fa-solid fa-book-open"></i>

                                        </div>


                                        <h3>
                                            Belum Ada Panduan
                                        </h3>


                                        <p>
                                            Belum ada data panduan yang tersedia.
                                        </p>

                                    </div>

                                </td>

                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>


            {{-- =================================================
             PAGINATION
        ================================================== --}}
            @if ($panduan->hasPages())
                <div class="panduan-pagination">

                    <div class="pagination-info">

                        Menampilkan

                        <strong>
                            {{ $panduan->firstItem() }}
                        </strong>

                        -

                        <strong>
                            {{ $panduan->lastItem() }}
                        </strong>

                        dari

                        <strong>
                            {{ $panduan->total() }}
                        </strong>

                        data

                    </div>


                    <div class="pagination-links">

                        {{ $panduan->links() }}

                    </div>

                </div>
            @endif

        </section>

    </div>


    {{-- =========================================================
     MODAL TAMBAH PANDUAN
========================================================== --}}
    <div class="panduan-modal" id="panduanModal" aria-hidden="true">

        <div class="panduan-modal-overlay"></div>


        <div class="panduan-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="panduanModalTitle">

            {{-- =================================================
             MODAL HEADER
        ================================================== --}}
            <div class="panduan-modal-header">

                <div class="panduan-modal-header-left">

                    <button type="button" class="modal-back-button" id="closePanduanModalBack" title="Kembali">

                        <i class="fa-solid fa-arrow-left"></i>

                    </button>


                    <div class="modal-title-icon">

                        <i class="fa-solid fa-book-open"></i>

                    </div>


                    <div>

                        <h2 id="panduanModalTitle">
                            Tambah Panduan Baru
                        </h2>

                        <p>
                            Tambahkan panduan baru ke dalam sistem.
                        </p>

                    </div>

                </div>


                <button type="button" class="modal-close-button" id="closePanduanModal" aria-label="Tutup"
                    title="Tutup">

                    <i class="fa-solid fa-xmark"></i>

                </button>

            </div>


            {{-- =================================================
             FORM TAMBAH PANDUAN
        ================================================== --}}
            <form action="{{ route('superadmin.panduan.store') }}" method="POST" enctype="multipart/form-data"
                id="formTambahPanduan">

                @csrf


                <div class="panduan-modal-body">

                    {{-- =================================================
                     JUDUL
                ================================================== --}}
                    <div class="modal-form-group">

                        <label for="modal_judul">

                            Judul Panduan

                            <span>*</span>

                        </label>


                        <input type="text" id="modal_judul" name="judul" placeholder="Contoh: Cara Menambah Barang"
                            value="{{ old('judul') }}" required>

                    </div>


                    {{-- =================================================
                     DESKRIPSI
                ================================================== --}}
                    <div class="modal-form-group">

                        <label for="modal_deskripsi">

                            Deskripsi

                            <span>*</span>

                        </label>


                        <textarea id="modal_deskripsi" name="deskripsi" rows="4" placeholder="Penjelasan singkat panduan..." required>{{ old('deskripsi') }}</textarea>

                    </div>


                    {{-- =================================================
                     VIDEO
                ================================================== --}}
                    {{-- <div class="modal-form-group">

                        <label for="modal_video">

                            Video

                            <span class="optional">
                                Opsional
                            </span>

                        </label>


                        <label for="modal_video" class="file-upload-box" id="videoUploadBox">

                            <div class="file-upload-icon video">

                                <i class="fa-solid fa-film"></i>

                            </div>


                            <div class="file-upload-content">

                                <strong>
                                    Pilih Video
                                </strong>

                                <span>
                                    MP4 • Maks. 100 MB
                                </span>

                            </div>


                            <input type="file" id="modal_video" name="video" accept="video/mp4">

                        </label>


                        <div class="selected-file" id="selectedVideo">

                            <i class="fa-solid fa-film"></i>

                            <span></span>

                            <button type="button" class="remove-file" data-target="modal_video">

                                <i class="fa-solid fa-xmark"></i>

                            </button>

                        </div>

                    </div> --}}


                    {{-- =================================================
                     PDF / DOKUMEN
                ================================================== --}}
                    <div class="modal-form-group">

                        <label for="modal_dokumen">

                            PDF / Dokumen

                            <span class="optional">
                                Opsional
                            </span>

                        </label>


                        <label for="modal_dokumen" class="file-upload-box" id="documentUploadBox">

                            <div class="file-upload-icon document">

                                <i class="fa-solid fa-file-pdf"></i>

                            </div>


                            <div class="file-upload-content">

                                <strong>
                                    Pilih Dokumen
                                </strong>

                                <span>
                                    PDF, DOC, DOCX
                                </span>

                            </div>


                            <input type="file" id="modal_dokumen" name="dokumen" accept=".pdf,.doc,.docx">

                        </label>


                        <div class="selected-file" id="selectedDocument">

                            <i class="fa-solid fa-file"></i>

                            <span></span>

                            <button type="button" class="remove-file" data-target="modal_dokumen">

                                <i class="fa-solid fa-xmark"></i>

                            </button>

                        </div>

                    </div>

                </div>


                {{-- =================================================
                 MODAL FOOTER
            ================================================== --}}
                <div class="panduan-modal-footer">

                    <button type="button" class="modal-btn-cancel" id="cancelPanduanModal">

                        <i class="fa-solid fa-xmark"></i>

                        Batal

                    </button>


                    <button type="submit" class="modal-btn-submit">

                        <i class="fa-solid fa-floppy-disk"></i>

                        Simpan Panduan

                    </button>

                </div>

            </form>

        </div>

    </div>

@endsection

{{-- Pindahkan CSS ke stack CSS/Styles --}}
@push('styles')
    <link rel="stylesheet" href="{{ asset('super-admin/css/panduan.css') }}">
    <link rel="stylesheet" href="{{ asset('super-admin/css/modal-panduan.css') }}">
@endpush

@push('scripts')
    {{-- Set URL dynamic Laravel ke global JS --}}
    <script>
        window.baseUrlPanduan = "{{ url('/usm-panduan-admin/panduan') }}";
        window.shouldOpenCreateModal = {{ $errors->any() ? 'true' : 'false' }};
    </script>

    {{-- Partial Modals HTML --}}
    @include('super-admin.partials.modal-detail-panduan')
    @include('super-admin.partials.modal-edit-panduan')
    @include('super-admin.partials.modal-delete-panduan')

    {{-- File JS Tunggal --}}
    <script src="{{ asset('super-admin/js/panduan.js') }}"></script>
@endpush