@extends('layouts.app')

@section('content')

    <div class="page-wrapper">

        <div class="page-container">
            <!-- FILTER -->
            <div class="filter-card">

                <div class="card-heading">
                    FILTER DATA BARANG
                </div>

                <form action="{{ route('barang') }}" method="GET">

                    <div class="filter-grid">

                        <div class="form-group full-width">
                            <label>Pencarian Kata Kunci</label>
                            <input type="text" name="keyword" class="form-control"
                                placeholder="Masukkan kode, nama, atau merek..." value="{{ request('keyword') }}">
                        </div>

                        <div class="form-group">
                            <label>Kategori</label>

                            <select name="kategori" class="form-control">
                                <option value="">Semua Kategori</option>

                                @foreach ($kategori as $item)
                                    <option value="{{ $item->id_kategori }}"
                                        {{ request('kategori') == $item->id_kategori ? 'selected' : '' }}>
                                        {{ $item->nama_kategori }}
                                    </option>
                                @endforeach

                            </select>
                        </div>

                        <div class="form-group">
                            <label>Tipe</label>

                            <select name="tipe" class="form-control">
                                <option value="">Semua Tipe</option>

                                @foreach ($tipe as $item)
                                    <option value="{{ $item->id_tipe }}"
                                        {{ request('tipe') == $item->id_tipe ? 'selected' : '' }}>
                                        {{ $item->nama_tipe }}
                                    </option>
                                @endforeach

                            </select>
                        </div>

                        <div class="form-group">
                            <label>Status Lokasi</label>

                            <select name="status_lokasi" class="form-control">
                                <option value="">Semua Status</option>
                                <option value="gudang" {{ request('status_lokasi') === 'gudang' ? 'selected' : '' }}>
                                    Transit/Gudang
                                </option>
                                <option value="inventaris" {{ request('status_lokasi') === 'inventaris' ? 'selected' : '' }}>
                                    Inventaris
                                </option>
                                <option value="arsip" {{ request('status_lokasi') === 'arsip' ? 'selected' : '' }}>
                                    Arsip
                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Tanggal Masuk</label>

                            <input type="date" name="tanggal" class="form-control" value="{{ request('tanggal') }}">
                        </div>

                        <div class="form-group">
                            <label>Tanggal Beli</label>

                            <input type="date" name="tanggal_beli" class="form-control"
                                value="{{ request('tanggal_beli') }}">
                        </div>

                        <div class="form-group">
                            <label>Asal Barang</label>

                            <input type="text" name="asal_barang" class="form-control" placeholder="Masukkan asal barang"
                                value="{{ request('asal_barang') }}">
                        </div>

                    </div>

                    <div class="filter-footer">

                        <div class="filter-action">

                            <button type="submit" class="btn btn-primary">
                                <i class="fa-solid fa-magnifying-glass"></i>
                                Cari
                            </button>

                            <a href="{{ route('barang') }}" class="btn">
                                <i class="fa-solid fa-rotate-right"></i>
                                Reset
                            </a>

                        </div>

                        <div class="filter-tools">

                            <a href="{{ route('barang.export.pdf', request()->query()) }}" class="btn">

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

                            </a>

                            <a href="{{ route('barang.export.excel', request()->query()) }}" class="btn">

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

                            </a>

                            <button type="button" class="btn"
                                onclick="window.location.href='{{ route('barang.import') }}'">

                                <i class="fa-solid fa-upload"></i>
                                Import

                            </button>

                            <button type="button" class="btn btn-primary"
                                onclick="window.location='{{ route('barang.tambah') }}'">

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

                            </button>

                        </div>

                    </div>

                </form>

            </div>

            <!-- TABLE -->
            <div class="table-card">

                <div class="card-heading">
                    TABEL DATA BARANG
                </div>

                <div class="table-responsive">

                    <table class="data-table">

                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kode Barang</th>
                                <th>Nama Barang</th>
                                <th>Kategori</th>
                                <th>Merek</th>
                                <th>Tipe</th>
                                <th>Harga Barang</th>
                                <th>Tanggal Beli</th>
                                <th>Umur Ekonomis</th>
                                <th>Asal Barang</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>

                        <tbody>

                            @forelse($barang as $index => $item)
                                <tr>
                                    <td>
                                        {{ $barang->firstItem() + $index }}
                                    </td>

                                    <td>{{ $item->kode_barang }}</td>

                                    <td>{{ $item->nama_barang }}</td>

                                    <td>{{ $item->kategori->nama_kategori ?? '-' }}</td>

                                    <td>{{ $item->merek }}</td>

                                    <td>{{ $item->tipe->nama_tipe ?? '-' }}</td>

                                    <td>
                                        Rp {{ number_format($item->harga_barang, 0, ',', '.') }}
                                    </td>

                                    <td>
                                        {{ $item->tanggal_beli ? \Carbon\Carbon::parse($item->tanggal_beli)->format('d-m-Y') : '-' }}
                                    </td>

                                    <td>

                                        @php
                                            $tahun = floor($item->umur_ekonomis / 12);
                                            $bulan = $item->umur_ekonomis % 12;
                                        @endphp

                                        @if ($tahun > 0)
                                            {{ $tahun }} Tahun
                                        @endif

                                        @if ($bulan > 0)
                                            {{ $bulan }} Bulan
                                        @endif

                                    </td>

                                    <td>{{ $item->asal_barang }}</td>

                                    <td class="action-column">

                                        {{-- EDIT --}}
                                        <a href="{{ route('barang.edit', $item->id_barang) }}" class="btn-action btn-edit"
                                            title="Edit Barang">
                                            <i class="fa-solid fa-pen"></i>
                                        </a>

                                        {{-- DETAIL --}}
                                        <a href="{{ route('barang.detail', $item->id_barang) }}"
                                            class="btn-action btn-detail" title="Detail Barang">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>

                                        {{-- QR --}}
                                        {{-- =====================================================
                                            QR CODE BARANG
                                        ====================================================== --}}
                                        <a href="javascript:void(0)"
                                            class="btn-action btn-qr"
                                            onclick="showQr(
                                                {{ $item->id_barang }},
                                                @js($item->nama_barang),
                                                @js($item->kode_barang)
                                            )"
                                            title="QR Code">

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

                                        </a>

                                        {{-- =====================================================
                                            HAPUS BARANG
                                        ====================================================== --}}

                                        @php
                                            $tanggalUpload = $item->created_at
                                                ? \Carbon\Carbon::parse($item->created_at)
                                                : null;

                                            // Bisa dihapus selama 7 hari sejak tanggal upload
                                            $bolehHapus = $tanggalUpload
                                                ? now()->lt($tanggalUpload->copy()->addDays(7))
                                                : false;

                                            // Format umur ekonomis
                                            $tahun = floor($item->umur_ekonomis / 12);
                                            $bulan = $item->umur_ekonomis % 12;

                                            $umurEkonomis = '';

                                            if ($tahun > 0) {
                                                $umurEkonomis .= $tahun . ' Tahun';
                                            }

                                            if ($bulan > 0) {
                                                $umurEkonomis .= ($umurEkonomis ? ' ' : '') . $bulan . ' Bulan';
                                            }

                                            if (!$umurEkonomis) {
                                                $umurEkonomis = '-';
                                            }
                                        @endphp

                                        @if ($bolehHapus)
                                        
                                            {{-- MASIH DALAM 7 HARI --}}
                                            <button
                                                type="button"
                                                class="btn-action btn-delete btn-delete-open"

                                                data-id="{{ $item->id_barang }}"
                                                data-kode="{{ $item->kode_barang }}"
                                                data-nama="{{ $item->nama_barang }}"
                                                data-kategori="{{ $item->kategori->nama_kategori ?? '-' }}"
                                                data-merek="{{ $item->merek ?? '-' }}"
                                                data-tipe="{{ $item->tipe->nama_tipe ?? '-' }}"
                                                data-harga="Rp {{ number_format($item->harga_barang, 0, ',', '.') }}"
                                                data-tanggal-beli="{{ $item->tanggal_beli ? \Carbon\Carbon::parse($item->tanggal_beli)->format('d F Y') : '-' }}"
                                                data-umur-ekonomis="{{ $umurEkonomis }}"
                                                data-asal-barang="{{ $item->asal_barang ?? '-' }}"
                                                data-tanggal-masuk="{{ $item->created_at ? \Carbon\Carbon::parse($item->created_at)->format('d F Y') : '-' }}"

                                                title="Hapus Barang">

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

                                            </button>

                                        @else
                                            {{-- SUDAH LEBIH DARI 7 HARI --}}
                                            <button
                                                type="button"
                                                class="btn-action btn-delete-locked"
                                                disabled
                                                title="Penghapusan dikunci karena data sudah lebih dari 7 hari diupload">
                                                <i class="fa-solid fa-lock"></i>
                                            </button>
                                        @endif

                                    </td>
                                </tr>

                            @empty

                                <tr>
                                    <td colspan="10" align="center">
                                        Data barang belum tersedia
                                    </td>
                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

                <!-- PAGINATION -->
                <div class="pagination-wrapper">

                    <div class="pagination-info">
                        Menampilkan {{ $barang->firstItem() ?? 0 }} - {{ $barang->lastItem() ?? 0 }} dari {{ $barang->total() }} data
                    </div>

                    <div class="pagination">

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

                        {{-- Indikator Halaman Aktif --}}
                        <span class="active">{{ $barang->currentPage() }}</span>

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

                    </div>

                </div>

            </div>
        </div>

        <!-- MODAL QR -->
        {{-- =====================================================
     MODAL QR CODE BARANG
====================================================== --}}
<div id="qrModal" class="modal-qr">

    <div class="modal-content qr-modal-content">

        {{-- TOMBOL CLOSE --}}
        <button
            type="button"
            class="close-modal"
            onclick="closeQr()"
            aria-label="Tutup">

            &times;

        </button>


        {{-- =================================================
             HEADER QR
        ================================================== --}}
        <div class="qr-modal-header">

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

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

            </div>

            <h3>QR Code Barang</h3>

            <p>Scan QR Code untuk melihat informasi barang</p>

        </div>


        {{-- =================================================
             IDENTITAS BARANG
        ================================================== --}}
        <div class="qr-item-info">

            <div class="qr-item-name" id="qrNamaBarang">
                -
            </div>

            <div class="qr-item-code" id="qrKodeBarang">
                -
            </div>

        </div>


        {{-- =================================================
             QR CODE
        ================================================== --}}
        <div class="qr-preview-wrapper">

            <div
                id="qrContainer"
                class="qr-container">

                <div class="qr-loading">

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

                    <span>Memuat QR Code...</span>

                </div>

            </div>

        </div>


        {{-- =================================================
             DOWNLOAD
        ================================================== --}}
        <div class="qr-download-info">

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

            <span>
                File PNG akan menyertakan nama dan kode barang
                agar mudah dikenali saat dicetak.
            </span>

        </div>


        <div class="qr-modal-actions">

            {{-- DOWNLOAD PNG --}}
            <button
                type="button"
                id="btnDownloadQr"
                class="btn-download-qr"
                onclick="downloadQrPng()">

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

                Download PNG

            </button>


            {{-- TUTUP --}}
            <button
                type="button"
                class="btn-close-qr"
                onclick="closeQr()">

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

                Tutup

            </button>

        </div>

    </div>

</div>


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

        <div id="deleteModal" class="modal-delete">

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

                {{-- ==========================================
             ICON
        =========================================== --}}
                <div class="delete-icon">
                    <i class="fa-solid fa-trash"></i>
                </div>


                {{-- ==========================================
             JUDUL
        =========================================== --}}
                <h3>Hapus Barang?</h3>


                {{-- ==========================================
             PESAN
        =========================================== --}}
                <p>
                    Apakah Anda yakin ingin menghapus barang berikut?
                </p>


                {{-- ==========================================
             INFORMASI BARANG
        =========================================== --}}

                <div class="delete-info">

                    {{-- KODE --}}
                    <div class="delete-info-row">
                        <span>Kode Barang</span>
                        <strong id="deleteKode">-</strong>
                    </div>

                    {{-- NAMA --}}
                    <div class="delete-info-row">
                        <span>Nama Barang</span>
                        <strong id="deleteNama">-</strong>
                    </div>

                    {{-- KATEGORI --}}
                    <div class="delete-info-row">
                        <span>Kategori</span>
                        <strong id="deleteKategori">-</strong>
                    </div>

                    {{-- MEREK --}}
                    <div class="delete-info-row">
                        <span>Merek</span>
                        <strong id="deleteMerek">-</strong>
                    </div>

                    {{-- TIPE --}}
                    <div class="delete-info-row">
                        <span>Tipe</span>
                        <strong id="deleteTipe">-</strong>
                    </div>

                    {{-- HARGA --}}
                    <div class="delete-info-row">
                        <span>Harga Barang</span>
                        <strong id="deleteHarga">-</strong>
                    </div>

                    {{-- TANGGAL BELI --}}
                    <div class="delete-info-row">
                        <span>Tanggal Beli</span>
                        <strong id="deleteTanggalBeli">-</strong>
                    </div>

                    {{-- UMUR EKONOMIS --}}
                    <div class="delete-info-row">
                        <span>Umur Ekonomis</span>
                        <strong id="deleteUmurEkonomis">-</strong>
                    </div>

                    {{-- ASAL BARANG --}}
                    <div class="delete-info-row">
                        <span>Asal Barang</span>
                        <strong id="deleteAsalBarang">-</strong>
                    </div>

                    {{-- TANGGAL UPLOAD --}}
                    <div class="delete-info-row">
                        <span>Tanggal Upload</span>
                        <strong id="deleteTanggalMasuk">-</strong>
                    </div>

                </div>


                {{-- ==========================================
             WARNING
        =========================================== --}}

                <div class="delete-warning">

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

                    Data yang sudah dihapus tidak dapat dikembalikan.

                </div>


                {{-- ==========================================
             FORM DELETE
        =========================================== --}}

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

                    @csrf

                    @method('DELETE')

                    <div class="delete-actions">

                        {{-- BATAL --}}
                        <button type="button" class="btn-delete-cancel" onclick="closeDeleteModal()">

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

                            Batal

                        </button>


                        {{-- HAPUS --}}
                        <button type="submit" class="btn-delete-confirm">

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

                            Ya, Hapus

                        </button>

                    </div>

                </form>

            </div>

        </div>

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


    @endsection