@extends('layouts.app')

@section('content')

    <link rel="stylesheet" href="{{ asset('css/peminjaman.css') }}">

    <div class="page-wrapper">

        <div class="page-container">

            {{-- =====================================================
            FLASH MESSAGE
        ====================================================== --}}

            @if (session('success'))
                <div class="alert alert-success">

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

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

                </div>
            @endif


            @if (session('error'))
                <div class="alert alert-danger">

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

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

                </div>
            @endif


            {{-- =====================================================
            VALIDATION ERROR
        ====================================================== --}}

            @if ($errors->any())

                <div class="alert alert-danger">

                    <div>

                        <strong>
                            Data belum dapat disimpan.
                        </strong>

                        <ul style="margin:8px 0 0 20px;">

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

                        </ul>

                    </div>

                </div>

            @endif


            {{-- =====================================================
            FILTER
        ====================================================== --}}

            <form method="GET" action="{{ route('peminjaman') }}" class="filter-card">

                <div class="search-box">

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

                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Cari kode pemakaian atau unit...">

                </div>


                <select name="organisasi">

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

                    <option value="akademik" {{ request('organisasi') == 'akademik' ? 'selected' : '' }}>
                        Akademik
                    </option>

                    <option value="kemahasiswaan" {{ request('organisasi') == 'kemahasiswaan' ? 'selected' : '' }}>
                        Kemahasiswaan
                    </option>

                    <option value="umum" {{ request('organisasi') == 'umum' ? 'selected' : '' }}>
                        Bagian Umum
                    </option>

                    <option value="keuangan" {{ request('organisasi') == 'keuangan' ? 'selected' : '' }}>
                        Keuangan
                    </option>

                </select>


                <input type="date" name="tanggal" value="{{ request('tanggal') }}">


                <select name="status">

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

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

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

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

                </select>


                <div class="filter-actions">

                    <div class="filter-left">

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

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

                            Cari

                        </button>


                        <a href="{{ route('peminjaman') }}" class="btn btn-reset">

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

                            Reset

                        </a>

                    </div>


                    <div class="filter-right">

                        <button type="button" class="btn btn-pdf" id="btnExportPdf">

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

                            PDF

                        </button>


                        <button type="button" class="btn btn-excel" id="btnExportExcel">

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

                            Excel

                        </button>


                        <button type="button" class="btn btn-primary" id="btnTambahPeminjaman">

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

                            Tambah

                        </button>

                    </div>

                </div>

            </form>


            {{-- =====================================================
            TABEL
        ====================================================== --}}

            <div class="table-card">

                <div class="table-header">

                    <div>

                        <h3>
                            Data Pemakaian
                        </h3>

                        <p>
                            Daftar pencatatan penggunaan fasilitas
                        </p>

                    </div>


                    <span id="jumlahData">

                        {{ $peminjamans->total() }}

                        {{ $peminjamans->total() == 1 ? 'data' : 'data' }}

                    </span>

                </div>


                <div class="table-responsive">

                    <table>

                        <thead>

                            <tr>

                                <th>No</th>
                                <th>Kode Pemakaian</th>
                                <th>Unit</th>
                                <th>Penanggung Jawab</th>
                                <th>Tanggal</th>
                                <th>Waktu Pemakaian</th>
                                <th>Jumlah Peserta</th>
                                <th>Status</th>
                                <th>Aksi</th>

                            </tr>

                        </thead>


                        <tbody id="dataPemakaian">

                            @forelse($peminjamans as $index => $peminjaman)
                                @php

                                    $nomor = ($peminjamans->currentPage() - 1) * $peminjamans->perPage() + $index + 1;

                                    $status = $peminjaman->status ?? 'Belum Digunakan';

                                    $badgeClass = match ($status) {
                                        'Selesai' => 'badge-success',

                                        'Sedang Digunakan' => 'badge-warning',

                                        default => 'badge-secondary',
                                    };
                                @endphp


                                <tr>

                                    <td>
                                        {{ $nomor }}
                                    </td>


                                    <td>

                                        <strong>
                                            {{ $peminjaman->kode_pemakaian }}
                                        </strong>

                                    </td>


                                    <td>
                                        {{ $peminjaman->nama_organisasi }}
                                    </td>


                                    <td>
                                        {{ $peminjaman->penanggung_jawab }}
                                    </td>


                                    <td>

                                        {{ $peminjaman->tanggal_mulai
                                            ? \Carbon\Carbon::parse($peminjaman->tanggal_mulai)->translatedFormat('d F Y')
                                            : '-' }}

                                    </td>


                                    <td>

                                        <small>
                                            {{ $peminjaman->waktu_pemakaian }}
                                        </small>

                                    </td>


                                    <td>

                                        <strong>
                                            {{ number_format($peminjaman->jumlah_peserta ?? 0) }}
                                        </strong>

                                        peserta

                                    </td>


                                    <td>

                                        <span class="badge {{ $badgeClass }}">
                                            {{ $status }}
                                        </span>

                                    </td>


                                    <td>

                                        <div class="action-group">

                                            {{-- DETAIL --}}

                                            <button type="button" class="action-btn info btnDetail"
                                                title="Detail Pemakaian" data-id="{{ $peminjaman->id_peminjaman }}"
                                                data-detail-url="{{ route('peminjaman.show', $peminjaman->id_peminjaman) }}">

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

                                            </button>



                                            {{-- EDIT --}}

                                            @php
                                                $editTerkunci = in_array($status, ['Sedang Digunakan', 'Selesai']);
                                            @endphp

                                            <button type="button"
                                                class="action-btn edit btnEdit {{ $editTerkunci ? 'action-disabled' : '' }}"
                                                title="{{ $editTerkunci ? 'Data tidak dapat diedit karena status ' . $status : 'Edit Data' }}"
                                                data-id="{{ $peminjaman->id_peminjaman }}"
                                                data-detail-url="{{ route('peminjaman.show', $peminjaman->id_peminjaman) }}"
                                                data-edit-url="{{ route('peminjaman.update', $peminjaman->id_peminjaman) }}"
                                                {{ $editTerkunci ? 'disabled' : '' }}>

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

                                            </button>


                                            {{-- HAPUS --}}

                                            @php
                                                $hapusTerkunci = in_array($status, ['Sedang Digunakan', 'Selesai']);
                                            @endphp

                                            <button type="button"
                                                class="action-btn delete btnHapus {{ $hapusTerkunci ? 'action-disabled' : '' }}"
                                                title="{{ $hapusTerkunci ? 'Data tidak dapat dihapus karena status ' . $status : 'Hapus Data' }}"
                                                data-id="{{ $peminjaman->id_peminjaman }}"
                                                data-delete-url="{{ route('peminjaman.destroy', $peminjaman->id_peminjaman) }}"
                                                data-kode="{{ $peminjaman->kode_pemakaian }}"
                                                {{ $hapusTerkunci ? 'disabled' : '' }}>

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

                                            </button>

                                        </div>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="9" style="text-align:center;padding:40px;">

                                        <div style="font-size:40px;margin-bottom:10px;">

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

                                        </div>

                                        <strong>
                                            Belum ada data pemakaian
                                        </strong>

                                        <p>
                                            Data pemakaian akan muncul setelah
                                            pencatatan ditambahkan.
                                        </p>

                                    </td>

                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>


                {{-- =====================================================
                PAGINATION
            ====================================================== --}}

                @if ($peminjamans->total() > 0)
                    <div class="pagination-wrapper">

                        <div class="pagination-info">

                            Menampilkan {{ $peminjamans->firstItem() ?? 0 }} - {{ $peminjamans->lastItem() ?? 0 }} dari {{ $peminjamans->total() }} data

                        </div>


                        <div class="pagination">

                            @if ($peminjamans->onFirstPage())
                                <span class="disabled">‹ Prev</span>
                            @else
                                <a href="{{ $peminjamans->previousPageUrl() }}">‹ Prev</a>
                            @endif

                            <span class="active">{{ $peminjamans->currentPage() }}</span>

                            @if ($peminjamans->hasMorePages())
                                <a href="{{ $peminjamans->nextPageUrl() }}">Next ›</a>
                            @else
                                <span class="disabled">Next ›</span>
                            @endif

                        </div>

                    </div>
                @endif

            </div>

        </div>

    </div>


    {{-- =========================================================
    MODAL TAMBAH
========================================================= --}}

    <div class="modal-overlay" id="modalPeminjaman">

        <div class="modal-peminjaman">

            <div class="modal-header">

                <div>

                    <h3>
                        Tambah Pemakaian
                    </h3>

                    <p>
                        Catat penggunaan fasilitas berdasarkan surat masuk
                    </p>

                </div>


                <button type="button" class="close-modal" id="closeModal">

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

                </button>

            </div>


            <div class="modal-body">

                <form id="formPeminjaman" method="POST" action="{{ route('peminjaman.store') }}">

                    @csrf


                    {{-- INFORMASI --}}

                    <div class="form-section">

                        <div class="form-section-title">

                            <div class="section-icon">

                                <i class="fa-solid fa-clipboard-list"></i>

                            </div>

                            <div>

                                <strong>
                                    Informasi Pemakaian
                                </strong>

                                <span>
                                    Isi data sesuai surat yang masuk
                                </span>

                            </div>

                        </div>


                        <div class="form-grid">

                            <div class="form-group">

                                <label>
                                    Kode Pemakaian
                                </label>

                                <input type="text" name="kode_pemakaian" value="{{ $kodePeminjaman }}" readonly>

                            </div>


                            <div class="form-group">

                                <label>
                                    Unit
                                    <span>*</span>
                                </label>

                                <input type="text" name="nama_organisasi" value="{{ old('nama_organisasi') }}"
                                    placeholder="Contoh: Bagian Akademik" required>

                            </div>


                            <div class="form-group">

                                <label>
                                    Penanggung Jawab
                                    <span>*</span>
                                </label>

                                <input type="text" name="penanggung_jawab" value="{{ old('penanggung_jawab') }}"
                                    placeholder="Nama penanggung jawab" required>

                            </div>


                            <div class="form-group">

                                <label>
                                    No Telepon
                                </label>

                                <input type="text" name="no_telepon" value="{{ old('no_telepon') }}"
                                    placeholder="Contoh: 08123456789">

                            </div>


                            <div class="form-group">

                                <label>
                                    Jumlah Peserta
                                    <span>*</span>
                                </label>

                                <input type="number" name="jumlah_peserta" value="{{ old('jumlah_peserta') }}"
                                    min="1" placeholder="Contoh: 50" required>

                                <small class="form-help">
                                    Jumlah peserta kegiatan.
                                </small>

                            </div>


                            <div class="form-group">

                                <label>
                                    Tanggal Pemakaian
                                    <span>*</span>
                                </label>

                                <input type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}" required>

                            </div>


                            <div class="form-group">

                                <label>
                                    Waktu Pemakaian
                                </label>

                                <input type="text" name="waktu_pemakaian" value="{{ old('waktu_pemakaian') }}"
                                    placeholder="Contoh: 08.00 WIB s/d selesai" autocomplete="off">

                            </div>

                        </div>


                        <div class="form-group">

                            <label>
                                Keperluan
                                <span>*</span>
                            </label>

                            <textarea name="keperluan" rows="3" placeholder="Tuliskan keperluan penggunaan fasilitas..." required>{{ old('keperluan') }}</textarea>

                        </div>

                    </div>


                    {{-- FASILITAS --}}

                    <div class="form-section fasilitas-section">

                        <div class="form-section-title">

                            <div class="section-icon facility">

                                <i class="fa-solid fa-layer-group"></i>

                            </div>

                            <div>

                                <strong>
                                    Fasilitas yang Digunakan
                                </strong>

                                <span>
                                    Tambahkan semua fasilitas yang digunakan
                                </span>

                            </div>

                        </div>


                        <div id="fasilitasList" class="fasilitas-list">

                            <div class="fasilitas-item" data-index="0">

                                <div class="fasilitas-number">
                                    1
                                </div>


                                <div class="fasilitas-item-content">

                                    <div class="fasilitas-item-header">

                                        <strong>
                                            Fasilitas 1
                                        </strong>

                                        <button type="button" class="btn-hapus-fasilitas" title="Hapus fasilitas"
                                            disabled>

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

                                        </button>

                                    </div>


                                    <div class="fasilitas-fields">

                                        <div class="form-group">

                                            <label>
                                                Nama Fasilitas
                                                <span>*</span>
                                            </label>

                                            <input type="text" name="fasilitas[0][nama]"
                                                placeholder="Contoh: Gedung A, Ruang 203, Proyektor Epson" required>

                                        </div>


                                        <div class="form-group">

                                            <label>
                                                Keterangan
                                            </label>

                                            <textarea name="fasilitas[0][keterangan]" rows="2" placeholder="Keterangan fasilitas..."></textarea>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>


                        <button type="button" class="btn-tambah-fasilitas" id="btnTambahFasilitas">

                            <span class="plus-icon">

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

                            </span>

                            <span>
                                Tambah Fasilitas
                            </span>

                        </button>


                        <div class="fasilitas-hint">

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

                            <span>
                                Masukkan fasilitas secara manual.
                                Contoh: Gedung, ruangan, barang, kendaraan,
                                atau fasilitas lainnya.
                            </span>

                        </div>

                    </div>


                    {{-- RINGKASAN --}}

                    <div class="form-section summary-section">

                        <div class="form-section-title">

                            <div class="section-icon summary">

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

                            </div>

                            <div>

                                <strong>
                                    Ringkasan Fasilitas
                                </strong>

                                <span>
                                    Ringkasan otomatis dari fasilitas yang ditambahkan
                                </span>

                            </div>

                        </div>


                        <textarea id="ringkasanFasilitas" name="fasilitas_ringkasan" rows="6" readonly
                            placeholder="Ringkasan fasilitas akan muncul di sini..."></textarea>

                    </div>

                </form>

            </div>


            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" id="btnBatal">
                    Batal
                </button>


                <button type="submit" form="formPeminjaman" class="btn btn-primary">

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

                    Simpan Pencatatan

                </button>

            </div>

        </div>

    </div>


    {{-- =========================================================
    MODAL DETAIL
========================================================= --}}

    <div class="modal-overlay" id="modalDetail">

        <div class="modal-peminjaman detail-modal">

            <div class="modal-header">

                <div>

                    <h3>
                        Detail Pemakaian
                    </h3>

                    <p>
                        Informasi pencatatan penggunaan fasilitas
                    </p>

                </div>


                <button type="button" class="close-modal" id="closeDetail">

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

                </button>

            </div>


            <div class="modal-body" id="detailContent">

                <div style="text-align:center;padding:40px;">

                    <i class="fa-solid fa-spinner fa-spin"></i>

                    Memuat data...

                </div>

            </div>


            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" id="btnTutupDetail">
                    Tutup
                </button>

            </div>

        </div>

    </div>


    {{-- =========================================================
    MODAL EDIT
========================================================= --}}

    <div class="modal-overlay" id="modalEdit">

        <div class="modal-peminjaman">

            <div class="modal-header">

                <div>

                    <h3>
                        Edit Pemakaian
                    </h3>

                    <p>
                        Perbarui data pencatatan penggunaan fasilitas
                    </p>

                </div>


                <button type="button" class="close-modal" id="closeEdit">

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

                </button>

            </div>


            <div class="modal-body">

                <form id="formEdit" method="POST">

                    @csrf

                    @method('PUT')


                    <div class="form-section">

                        <div class="form-section-title">

                            <div class="section-icon">

                                <i class="fa-solid fa-clipboard-list"></i>

                            </div>

                            <div>

                                <strong>
                                    Informasi Pemakaian
                                </strong>

                                <span>
                                    Perbarui data pencatatan
                                </span>

                            </div>

                        </div>


                        <div class="form-grid">

                            <div class="form-group">

                                <label>
                                    Kode Pemakaian
                                </label>

                                <input type="text" id="editKodePemakaian" name="kode_pemakaian" readonly>

                            </div>


                            <div class="form-group">

                                <label>
                                    Unit
                                    <span>*</span>
                                </label>

                                <input type="text" id="editNamaOrganisasi" name="nama_organisasi" required>

                            </div>


                            <div class="form-group">

                                <label>
                                    Penanggung Jawab
                                    <span>*</span>
                                </label>

                                <input type="text" id="editPenanggungJawab" name="penanggung_jawab" required>

                            </div>


                            <div class="form-group">

                                <label>
                                    No Telepon
                                </label>

                                <input type="text" id="editNoTelepon" name="no_telepon">

                            </div>


                            <div class="form-group">

                                <label>
                                    Jumlah Peserta
                                    <span>*</span>
                                </label>

                                <input type="number" id="editJumlahPeserta" name="jumlah_peserta" min="1"
                                    required>

                            </div>


                            <div class="form-group">

                                <label>
                                    Tanggal Pemakaian
                                    <span>*</span>
                                </label>

                                <input type="date" id="editTanggalPemakaian" name="tanggal_mulai" required>

                            </div>


                            <div class="form-group">

                                <label>
                                    Waktu Pemakaian
                                </label>

                                <input type="text" id="editWaktuPemakaian" name="waktu_pemakaian">

                            </div>

                        </div>


                        <div class="form-group">

                            <label>
                                Keperluan
                                <span>*</span>
                            </label>

                            <textarea id="editKeperluan" name="keperluan" rows="3" required></textarea>

                        </div>

                    </div>


                    {{-- FASILITAS EDIT --}}

                    <div class="form-section fasilitas-section">

                        <div class="form-section-title">

                            <div class="section-icon facility">

                                <i class="fa-solid fa-layer-group"></i>

                            </div>

                            <div>

                                <strong>
                                    Fasilitas yang Digunakan
                                </strong>

                                <span>
                                    Perbarui atau tambahkan fasilitas
                                </span>

                            </div>

                        </div>


                        <div id="editFasilitasList" class="fasilitas-list"></div>


                        <button type="button" class="btn-tambah-fasilitas" id="btnTambahFasilitasEdit">

                            <span class="plus-icon">

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

                            </span>

                            <span>
                                Tambah Fasilitas
                            </span>

                        </button>

                    </div>


                    {{-- RINGKASAN EDIT --}}

                    <div class="form-section summary-section">

                        <div class="form-section-title">

                            <div class="section-icon summary">

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

                            </div>

                            <div>

                                <strong>
                                    Ringkasan Fasilitas
                                </strong>

                                <span>
                                    Ringkasan otomatis
                                </span>

                            </div>

                        </div>


                        <textarea id="editRingkasanFasilitas" name="fasilitas_ringkasan" rows="6" readonly></textarea>

                    </div>

                </form>

            </div>


            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" id="batalEdit">
                    Batal
                </button>


                <button type="submit" form="formEdit" class="btn btn-primary">

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

                    Simpan Perubahan

                </button>

            </div>

        </div>

    </div>


    {{-- =========================================================
    MODAL HAPUS
========================================================= --}}

    <div class="modal-overlay" id="modalHapus">

        <div class="modal-peminjaman small-modal">

            <div class="modal-header">

                <h3>
                    Konfirmasi Hapus
                </h3>


                <button type="button" class="close-modal" id="closeHapus">

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

                </button>

            </div>


            <div class="delete-content">

                <div class="delete-icon">

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

                </div>


                <h4>
                    Hapus Data Pemakaian?
                </h4>


                <p>

                    Data pencatatan pemakaian

                    <strong id="kodeHapus">
                        -
                    </strong>

                    akan dihapus.

                </p>


                <span>
                    Tindakan ini tidak dapat dibatalkan.
                </span>

            </div>


            <div class="modal-footer delete-footer">

                <button type="button" class="btn btn-secondary" id="batalHapus">
                    Batal
                </button>


                <form id="formHapus" method="POST" style="display:inline;">

                    @csrf

                    @method('DELETE')

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

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

                        Hapus Data

                    </button>

                </form>

            </div>

        </div>

    </div>


    {{-- =========================================================
    DATA ROUTE UNTUK JAVASCRIPT
========================================================= --}}

    <script>
        window.PEMINJAMAN_ROUTES = {

            index: @json(route('peminjaman')),

            store: @json(route('peminjaman.store')),

            show: @json(url('/peminjaman')),

            update: @json(url('/peminjaman')),

            destroy: @json(url('/peminjaman'))

        };
    </script>


    <script src="{{ asset('js/peminjaman.js') }}"></script>

@endsection