@extends('layouts.admin')

@section('title', 'Produk Buket')

@section('content')
    {{-- ALERT SUKSES --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- ALERT ERROR UMUM (Jika ada error selain validasi modal) --}}
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <section class="section">
        <div class="buttons pb-3">
            <a href="#" class="btn-add-custom" data-bs-toggle="modal" data-bs-target="#create">
                <i class="bi bi-plus fs-5"></i>
                Tambah Produk Buket
            </a>
        </div>
        <div class="card">
            <div class="card-body">
                <table class="table table-striped" id="table1">
                    <thead>
                        <tr class="text-center">
                            <th style="width: 5%">No.</th>
                            <th style="width: 20%">Nama Buket</th>
                            <th style="width: 35%">Deskripsi</th>
                            <th style="width: 15%" class="text-nowrap">Harga</th>
                            <th style="width: 10%">Foto</th>
                            <th style="width: 15%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($buket as $b)
                            <tr>
                                <td style="width: 5%">{{ $loop->iteration }}</td>
                                <td style="width: 20%">{{ $b->nama }}</td>
                                <td style="width: 35%">{{ Str::limit($b->deskripsi, 50) }}</td>
                                <td style="width: 15%">Rp {{ number_format($b->harga, 0, ',', '.') }}</td>
                                <td style="width:10%">
                                    <img src="{{ asset('storage/' . $b->foto) }}" alt="Foto Produk" class="rounded"
                                        style="width: 50px; height: 50px; object-fit: cover;">
                                </td>
                                <td class="col-auto text-center" style="width: 15%">
                                    <a href="#" class="btn icon btn-primary btn-action" data-bs-toggle="modal"
                                        data-bs-target="#show{{ $b->id_buket }}">
                                        <i class="bi bi-eye"></i>
                                    </a>

                                    <a href="#" class="btn icon btn-warning btn-action" data-bs-toggle="modal"
                                        data-bs-target="#edit{{ $b->id_buket }}">
                                        <i class="bi bi-pencil"></i>
                                    </a>

                                    <a href="#" class="btn icon btn-danger btn-action" data-bs-toggle="modal"
                                        data-bs-target="#delete{{ $b->id_buket }}">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            @include('admin.produk-buket.partials.modal-show')
                            @include('admin.produk-buket.partials.modal-edit')
                            @include('admin.produk-buket.partials.modal-delete')
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">Tidak ada data buket.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </section>
    @include('admin.produk-buket.partials.modal-create')
    @push('scripts')
        <script>
            // LOGIC CLOSE MODAL
            document.addEventListener('DOMContentLoaded', function() {
                // Fungsi untuk membersihkan semua backdrop yang tertinggal
                function clearBackdrop() {
                    const backdrops = document.querySelectorAll('.modal-backdrop');
                    backdrops.forEach(b => b.remove());
                    document.body.classList.remove('modal-open');
                    document.body.style.paddingRight = '';
                }

                // 1. Jika error di Modal Create
                @if (session('error_modal') === 'create')
                    clearBackdrop(); // Bersihkan dulu
                    var createModal = new bootstrap.Modal(document.getElementById('create'));
                    createModal.show();
                @endif

                // 2. Jika error di Modal Edit (menggunakan session error_id)
                @if (session('error_id'))
                    clearBackdrop(); // Bersihkan dulu
                    var editModalId = "edit{{ session('error_id') }}";
                    var editModal = new bootstrap.Modal(document.getElementById(editModalId));
                    editModal.show();
                @endif
            });
            // LOGIC SHOW DETAIL IMG
            function showImage(src) {
                var modalImg = document.getElementById('img-preview-target');
                modalImg.src = src;
                var myModal = new bootstrap.Modal(document.getElementById('modalImagePreview'));
                myModal.show();
            }
            // LOGIC PREVIEW EDIT IMG
            function previewEditImage(event, id) {
                const file = event.target.files[0];
                const preview = document.getElementById('editImgPreview' + id);
                const placeholder = document.getElementById('editPlaceholder' + id);

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.classList.remove('d-none');
                        placeholder.classList.add('d-none');
                    }
                    reader.readAsDataURL(file);
                }
            }
            // LOGIC CREATE IMG
            document.addEventListener('DOMContentLoaded', function() {
                // Ambil elemen berdasarkan ID unik yang baru
                const input = document.getElementById('createFotoInput');
                const preview = document.getElementById('createImgPreview');
                const placeholder = document.getElementById('createPlaceholder');

                if (input) {
                    input.addEventListener('change', function(event) {
                        const file = event.target.files[0];

                        if (file) {
                            const reader = new FileReader();

                            reader.onload = function(e) {
                                preview.src = e.target.result;
                                preview.classList.remove('d-none'); // Munculkan gambar
                                placeholder.classList.add('d-none'); // Sembunyikan teks
                            }

                            reader.readAsDataURL(file);
                        } else {
                            // Reset kalau batal pilih
                            preview.src = "#";
                            preview.classList.add('d-none');
                            placeholder.classList.remove('d-none');
                        }
                    });
                }
            });
        </script>
    @endpush
@endsection
