@extends('admin.layouts.main')
@section('title', 'Data Produk')
@section('navProduk', 'active')
@section('content')

<div class="card product-card-header border-0 shadow-sm mb-4">
    <div class="card-body d-flex justify-content-between align-items-center">
        <div>
            <h3 class="fw-bold mb-1">Data Produk</h3>
            <small class="text-muted">Manajemen produk toko</small>
        </div>

        <div>
            <i class="bi bi-box-seam fs-2 text-primary"></i>
        </div>
    </div>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">

    <form method="GET"
        action="{{ route('dashboard-produk.index') }}"
        id="searchForm"
        class="d-flex">

        <div class="input-group">
            <span class="input-group-text bg-white border-end-0">
                <i class="fas fa-search"></i>
            </span>

            <input
                type="text"
                name="search"
                id="searchProduk"
                value="{{ request('search') }}"
                class="form-control border-start-0"
                placeholder="Cari nama produk..."
                autocomplete="off"
            >
        </div>

    </form>

    <a href="/dashboard-produk/create"
       class="btn btn-add-user">
        <i class="bi bi-plus-circle-fill me-2"></i>
        Tambah Produk
    </a>

</div>

<table class="table-dashboard" id="produkTable">
    <thead>
        <tr>
            <th>No</th>
            <th>Gambar</th>
            <th>Nama Produk</th>
            <th>Kategori</th>
            <th>Gender</th>
            <th>Usage</th>
            <th>Deskripsi</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($produks as $produk)
        <tr>
            <td>{{ $loop->iteration }}</td>
            <td>
                @php
                    $gambarUtama = $produk->gambarProduk->first();
                @endphp

                @if ($gambarUtama)
                    <img
                        src="{{ asset('storage/' . $gambarUtama->gambar) }}"
                        alt="{{ $produk->nama_produk }}"
                        style="
                            width: 65px;
                            height: 65px;
                            object-fit: cover;
                            border-radius: 8px;
                            border: 1px solid #e5d6c3;
                        "
                    >
                @else
                    <div
                        style="
                            width: 65px;
                            height: 65px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: #f8f3eb;
                            color: #8a6850;
                            border: 1px solid #e5d6c3;
                            border-radius: 8px;
                            font-size: 12px;
                        "
                    >
                        Tidak ada
                    </div>
                @endif
            </td>
            <td>{{ $produk->nama_produk }}</td>
            <td>
                {{ $produk->kategori?->namakategori ?? '-' }}
            </td>
            <td>{{ $produk->gender }}</td>
            <td>{{ $produk->usage }}</td>
            <td>{{ $produk->deskripsi }}</td>
            <td class="text-nowrap">
                <div class="d-flex align-items-center gap-2">

                    <button
                    type="button"
                    class="btn btn-info btn-sm btn-detail border-0 d-flex align-items-center justify-content-center"
                    data-nama="{{ $produk->nama_produk }}"
                    data-deskripsi="{{ $produk->deskripsi }}"
                    data-gender="{{ $produk->gender }}"
                    data-usage="{{ $produk->usage }}"
                    data-gambar='@json($produk->gambarProduk)'
                    title="Detail">

                    <i class="bi bi-eye"></i>

                </button>

                <a href="{{ route('dashboard-produk.edit', [
                    'dashboard_produk' => $produk->id,
                    'page' => $produks->currentPage()
                ]) }}"
                    class="btn btn-sm btn-primary border-0 d-flex align-items-center justify-content-center"
                    title="Edit">
                    <i class="bi bi-pencil-square"></i>
                </a>
                    <button type="button"
                        class="btn btn-danger btn-sm btn-delete border-0 d-flex align-items-center justify-content-center"
                        data-id="{{ $produk->id }}"
                        title="Hapus">
                        <i class="bi bi-trash-fill"></i>
                    </button>

                </div>

                <form id="form-delete-{{ $produk->id }}"
                    action="/dashboard-produk/{{ $produk->id }}"
                    method="POST"
                    class="d-none">
                    @csrf
                    @method('DELETE')
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
<div class="pagination-wrapper">

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

    <div class="pagination-custom">
        @if ($produks->onFirstPage())
            <span class="page-btn disabled">
                <i class="bi bi-chevron-left"></i>
            </span>
        @else
            <a href="{{ $produks->previousPageUrl() }}" class="page-btn">
                <i class="bi bi-chevron-left"></i>
            </a>
        @endif
        <a href="{{ $produks->url(1) }}"
           class="page-btn {{ $produks->currentPage() == 1 ? 'active' : '' }}">
            1
        </a>
        @if ($produks->lastPage() >= 2)
            <a href="{{ $produks->url(2) }}"
               class="page-btn {{ $produks->currentPage() == 2 ? 'active' : '' }}">
                2
            </a>
        @endif
        @if ($produks->lastPage() >= 3)
            <a href="{{ $produks->url(3) }}"
               class="page-btn {{ $produks->currentPage() == 3 ? 'active' : '' }}">
                3
            </a>
        @endif
        @if ($produks->currentPage() > 3 && $produks->currentPage() < $produks->lastPage())
            <span class="page-dots">...</span>
            <span class="page-btn active">
                {{ $produks->currentPage() }}
            </span>
            <span class="page-dots">...</span
        @elseif ($produks->lastPage() > 4)
            <span class="page-dots">...</span>
        @endif
        @if ($produks->lastPage() > 3)
            <a href="{{ $produks->url($produks->lastPage()) }}"
               class="page-btn {{ $produks->currentPage() == $produks->lastPage() ? 'active' : '' }}">
                {{ $produks->lastPage() }}
            </a>
        @endif
        @if ($produks->hasMorePages())
            <a href="{{ $produks->nextPageUrl() }}" class="page-btn">
                <i class="bi bi-chevron-right"></i>
            </a>
        @else
            <span class="page-btn disabled">
                <i class="bi bi-chevron-right"></i>
            </span>
        @endif
    </div>
</div>
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content modern-detail-modal border-0">
            <div class="modal-header-custom">
                <div>
                    <span class="badge-detail">
                        Produk
                    </span>
                    <h4 class="modal-title-detail mb-0">
                        Detail Produk
                    </h4>
                </div>
            </div>
            <div class="modal-body px-4 pb-4">
                <div class="row g-4 align-items-stretch">
                    <div class="col-md-5">
                        <div class="detail-image-box h-100">
                            <div id="detailCarousel" class="carousel slide h-100" data-bs-ride="carousel">
                                <div class="carousel-inner h-100 overflow-hidden"
                                    id="detailCarouselInner">
                                </div>
                                <button class="carousel-control-prev" type="button"
                                    data-bs-target="#detailCarousel" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </button>
                                <button class="carousel-control-next" type="button"
                                    data-bs-target="#detailCarousel" data-bs-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="detail-content">
                            <h2 class="detail-title mb-2" id="detailNama"></h2>
                            <div class="d-flex gap-2 mb-3">
                                <span class="badge-pill" id="detailGender"></span>
                                <span class="badge-pill dark" id="detailUsage"></span>
                            </div>
                            <p class="detail-desc mb-4" id="detailDeskripsi"></p>
                            <button type="button"
                                    class="btn-close-modern w-100"
                                    data-bs-dismiss="modal">
                                Tutup
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

    let searchInput = document.getElementById('searchProduk');
    let searchForm = document.getElementById('searchForm');
    let timeout;
    searchInput.addEventListener('keyup', function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            searchForm.submit();
        }, 500);
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.btn-delete').forEach(button => {
            button.addEventListener('click', function () {
                const produkId = this.getAttribute('data-id');
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data yang dihapus tidak bisa dikembalikan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('form-delete-' + produkId).submit();
                    }
                });
            });
        });
        document.querySelectorAll('.btn-detail').forEach(button => {
            button.addEventListener('click', function () {

                let nama = this.dataset.nama;
                let deskripsi = this.dataset.deskripsi;
                let gender = this.dataset.gender;
                let usage = this.dataset.usage;

                document.getElementById('detailNama').innerText = nama;
                document.getElementById('detailDeskripsi').innerText = deskripsi;

                document.getElementById('detailGender').innerText = gender;
                document.getElementById('detailUsage').innerText = usage;

                let gambar = JSON.parse(this.dataset.gambar);

                const carousel = document.getElementById('detailCarouselInner');
                carousel.innerHTML = '';

                gambar.forEach((item, index) => {
                    carousel.innerHTML += `
                        <div class="carousel-item ${index === 0 ? 'active' : ''}">
                            <img src="/storage/${item.gambar}" class="detail-image">
                        </div>
                    `;
                });

                let modal = new bootstrap.Modal(document.getElementById('detailModal'));
                modal.show();
            });
        });
        @if (session('pesan'))
            Swal.fire({
                title: 'Berhasil!',
                text: "{{ session('pesan') }}",
                icon: 'success',
                confirmButtonColor: '#0B773D'
            });
        @endif
    });
</script>
@endpush
<link rel="stylesheet" href="{{ asset('css/adminstyle.css') }}" id="main-style-link">
<style>
    .modern-detail-modal{
        background:#FFFFFF;
        border:1px solid #E9DDC8;
        border-radius:30px;
        overflow:hidden;
        color:#2B2B2B;
        box-shadow:0 20px 50px rgba(0,0,0,.12);
    }
    .modal-header-custom{
        padding:24px;
        background:#FCFAF6;
        border-bottom:1px solid #E9DDC8;
    }
    .badge-detail{
        display:inline-block;
        background:#F8E9C8;
        color:#C89A4B;
        padding:8px 16px;
        border-radius:999px;
        font-weight:600;
    }
    .modal-title-detail{
        color:#2B2B2B;
        margin-top:10px;
        font-weight:700;
    }
    .detail-image-box{
        background:#F8F5EF;
        border:1px solid #E9DDC8;
        border-radius:24px;
        overflow:hidden;
        padding:20px;
    }
    .detail-image{
        width:100%;
        max-height:260px;
        object-fit:contain;
    }
    #detailCarousel .carousel-item{
        overflow:hidden;
    }
    #detailCarousel .carousel-control-prev,
    #detailCarousel .carousel-control-next{
        width:48px;
    }
    #detailCarousel .carousel-control-prev-icon,
    #detailCarousel .carousel-control-next-icon{
        background-color:#C89A4B;
        border-radius:50%;
        padding:18px;
        background-size:60%;
    }
    .detail-content{
        padding:10px 5px;
    }
    #detailNama{
        color:#2B2B2B;
        font-size:2rem;
        font-weight:700;
    }
    #detailDeskripsi{
        color:#666;
        line-height:1.8;
    }
    .detail-content h6{
        color:#C89A4B;
        font-weight:700;
    }
    .badge-pill{
        display:inline-block;
        background:#F8E9C8;
        color:#C89A4B;
        padding:7px 16px;
        border-radius:999px;
        font-size:13px;
        font-weight:600;
    }
    .badge-pill.dark{
        background:#2B2B2B;
        color:#fff;
    }
    .btn-close-modern{
        background:#C89A4B;
        color:#fff;
        border:none;
        padding:12px 24px;
        border-radius:14px;
        font-weight:700;
        transition:.3s;
    }
    .btn-close-modern:hover{
        background:#B88437;
        transform:translateY(-2px);
    }
    .btn-close{
        filter:none;
        opacity:1;
    }
    #produkTable td{
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
        vertical-align: middle;
    }
    @media (max-width:768px){
        .product-card-header{
            border-radius:16px;
        }
        .product-card-header .card-body{
            padding:16px;
        }
        .product-card-header h3{
            font-size:22px;
        }
        .product-card-header small{
            font-size:12px;
        }
        .product-card-header i{
            font-size:28px !important;
        }
        .btn-add-user{
            width:100%;
            padding:10px 15px;
            font-size:14px;
            border-radius:12px;
            margin-bottom:15px;
        }
        .dataTables_wrapper{
            overflow-x:auto;
            padding:14px;
            border-radius:16px;
        }
        .dataTables_filter{
            width:100%;
            margin-bottom:10px;
        }
        .dataTables_filter input{
            width:100% !important;
            margin-left:0 !important;
        }
        .dataTables_length,
        .dataTables_info,
        .dataTables_paginate{
            font-size:12px;
        }
        .table-dashboard{
            min-width:850px;
        }
        .table-dashboard th{
            font-size:13px;
            white-space:nowrap;
        }
        .table-dashboard td{
            font-size:13px;
            padding:12px;
        }
        .btn-info,
        .btn-primary,
        .btn-danger{
            width:34px;
            height:34px;
            border-radius:10px !important;
        }
        .btn-info i,
        .btn-primary i,
        .btn-danger i{
            font-size:13px;
        }
        .modal-dialog{
            margin:10px;
        }
        .modern-detail-modal{
            border-radius:18px;
        }
        .modal-header-custom{
            padding:18px;
        }
        .badge-detail{
            padding:6px 12px;
            font-size:12px;
        }
        .modal-title-detail{
            font-size:20px;
        }
        .detail-image-box{
            padding:12px;
            border-radius:16px;
        }
        .detail-image{
            max-height:180px;
        }
        #detailNama{
            font-size:22px;
            text-align:center;
            margin-top:10px;
        }
        .detail-content{
            padding:0;
        }
        .detail-content .d-flex{
            justify-content:center;
            flex-wrap:wrap;
        }
        .badge-pill{
            font-size:12px;
            padding:6px 12px;
        }
        #detailDeskripsi{
            font-size:14px;
            line-height:1.7;
            text-align:justify;
        }
        .btn-close-modern{
            padding:10px;
            font-size:14px;
            border-radius:12px;
        }
        #detailCarousel .carousel-control-prev,
        #detailCarousel .carousel-control-next{
            width:36px;
        }
        #detailCarousel .carousel-control-prev-icon,
        #detailCarousel .carousel-control-next-icon{
            padding:14px;
        }
    }
    .pagination-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 24px;
        padding: 18px 20px;
        background: #fff;
        border: 1px solid #eadfd3;
        border-radius: 12px;
    }
    .pagination-info {
        color: #75685D;
        font-size: 14px;
        line-height: 1.5;
        white-space: nowrap;
    }
    .pagination-info strong {
        color: #4B3022;
        font-weight: 600;
    }
    .pagination-custom {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .page-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #E5D6C3;
        border-radius: 8px;
        background: #fff;
        color: #6E4B35;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            transform .2s ease;
    }
    .page-btn:hover {
        background: #F8F3EB;
        border-color: #B88A44;
        color: #6E4B35;
        text-decoration: none;
    }
    .page-btn.active {
        background: #6E4B35;
        border-color: #6E4B35;
        color: #fff;
        font-weight: 600;
    }
    .page-btn i {
        font-size: 13px;
    }
    .page-btn.disabled {
        background: #faf8f5;
        border-color: #eee5dc;
        color: #c8beb4;
        cursor: not-allowed;
    }
    @media (max-width: 768px) {
        .pagination-wrapper {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .pagination-info {
            font-size: 13px;
        }
        .pagination-custom {
            justify-content: center;
        }
        .page-btn {
            width: 34px;
            height: 34px;
        }
    }
</style>
@endsection