@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>
<a href="/dashboard-produk/create"
   class="btn btn-add-user mb-3">
    <i class="bi bi-plus-circle-fill me-2"></i>
    Tambah Produk
</a>

<table id=produkTable class="table table-dashboard">
    <thead>
        <tr>
            <th>No</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>{{ $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="/dashboard-produk/{{ $produk->id }}/edit"
                        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="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">

                    <!-- IMAGE -->
                    <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>

                    <!-- DETAIL -->
                    <div class="col-md-7">

                        <div class="detail-content">

                            <!-- TITLE -->
                            <h2 class="detail-title mb-2" id="detailNama"></h2>

                            <!-- BADGES -->
                            <div class="d-flex gap-2 mb-3">
                                <span class="badge-pill" id="detailGender"></span>
                                <span class="badge-pill dark" id="detailUsage"></span>
                            </div>

                            <!-- DESC -->
                            <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>
    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>
<script>
    $(document).ready(function() {
        $('#produkTable').DataTable({
            paging: true,
            searching: true,
            ordering:  true,
            lengthChange: true,
            language: {
                "sSearch": "Cari:",
                "lengthMenu": "Tampilkan _MENU_ data per halaman",
                "zeroRecords": "Data tidak ditemukan",
                "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "infoEmpty": "Tidak ada data",
                "paginate": {
                    "first": "Pertama",
                    "last": "Terakhir",
                    "next": "Berikutnya",
                    "previous": "Sebelumnya"
                }
            }
        });
    });
</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){

        /* Header */
        .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;
        }

        /* Tombol tambah */
        .btn-add-user{
            width:100%;
            padding:10px 15px;
            font-size:14px;
            border-radius:12px;
            margin-bottom:15px;
        }

        /* DataTable */
        .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;
        }

        /* Tabel */
        .table-dashboard{
            min-width:850px;
        }

        .table-dashboard th{
            font-size:13px;
            white-space:nowrap;
        }

        .table-dashboard td{
            font-size:13px;
            padding:12px;
        }

        /* Tombol aksi */
        .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 */
        .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;
        }
    }
</style>
@endsection