@extends('layouts.admin')

@section('title', 'Paket Foto')

@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="d-flex gap-2 pb-3">

            <a href="#" class="btn-add-foto" data-bs-toggle="modal" data-bs-target="#createFoto">
                <i class="bi bi-plus fs-5"></i>
                Tambah Paket Foto
            </a>

            <a href="#" class="btn-add-additional" data-bs-toggle="modal" data-bs-target="#createAdd">
                <i class="bi bi-plus fs-5"></i>
                Tambah Additional
            </a>

        </div>

        <div class="card">
            <div class="card-body">

                <div class="nav nav-pills nav-fill mb-4" id="v-pills-tab" role="tablist" aria-orientation="horizontal">
                    <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home"
                        role="tab" aria-controls="v-pills-home" aria-selected="true">
                        Paket Foto
                    </a>
                    <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile"
                        role="tab" aria-controls="v-pills-profile" aria-selected="false">
                        Additional
                    </a>
                </div>

                <div class="tab-content" id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                        aria-labelledby="v-pills-home-tab">
                        <table class="table table-striped" id="table1">
                            <thead>
                                <tr>
                                    <th style="width: 5%">No.</th>
                                    <th style="width: 15%">Nama Paket</th>
                                    <th style="width: 35%">Deskripsi</th>
                                    <th>Durasi</th>
                                    <th style="width: 12%" class="text-nowrap">Harga</th>
                                    <th style="width: 10%">Foto</th>
                                    <th style="width: 15%">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($foto as $f)
                                    <tr>
                                        <td style="width: 5%" class="text-center">{{ $loop->iteration }}</td>
                                        <td style="width: 15%">{{ $f->nama }}</td>
                                        <td style="width: 35%">{{ Str::limit($f->deskripsi, 50) }}</td>
                                        <td class="text-center">
                                            {{ $f->durasi == 0 ? '-' : $f->durasi }}
                                        </td>
                                        <td style="width: 12%" class="text-center">Rp
                                            {{ number_format($f->harga, 0, ',', '.') }}</td>
                                        <td style="width:10%" class="text-center">
                                            <img src="{{ asset('storage/' . $f->foto) }}" alt="Foto Produk" class="rounded"
                                                style="width: 50px; height: 50px; object-fit: cover;">
                                        </td>
                                        <td class="col-auto text-center">
                                            <div class="d-flex flex-wrap justify-content-center gap-1">

                                                <a href="#" class="btn icon btn-primary btn-action"
                                                    data-bs-toggle="modal" data-bs-target="#foto{{ $f->id_paket }}">
                                                    <i class="bi bi-eye"></i>
                                                </a>

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

                                                <a href="#" class="btn icon btn-danger btn-action"
                                                    data-bs-toggle="modal" data-bs-target="#deleteFoto{{ $f->id_paket }}">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @include('admin.paket-foto.partials.modal-show-foto')
                                    @include('admin.paket-foto.partials.modal-edit-foto')
                                    @include('admin.paket-foto.partials.modal-delete-foto')
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">Belum ada data paket foto.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <table class="table table-striped" id="riwayat-foto">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Nama Additional</th>
                                    <th class="text-nowrap">Harga</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($additional as $add)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $add->nama }}</td>
                                        <td>Rp {{ number_format($add->harga, 0, ',', '.') }}</td>
                                        <td class="col-auto text-center">
                                            <div class="d-flex flex-wrap justify-content-center gap-1">
                                                <a href="#" class="btn icon btn-warning btn-action"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#editAdd{{ $add->id_additional }}">
                                                    <i class="bi bi-pencil"></i>
                                                </a>

                                                <a href="#" class="btn icon btn-danger btn-action"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#deleteAdd{{ $add->id_additional }}">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @include('admin.paket-foto.partials.modal-edit-additional')
                                    @include('admin.paket-foto.partials.modal-delete-additional')
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">Belum ada data layanan
                                            additional.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </section>
    @include('admin.paket-foto.partials.modal-create-foto')
    @include('admin.paket-foto.partials.modal-create-additional')
    <script>
        // FUNGSI PREVIEW UNIVERSAL (Bisa untuk Create & Edit)
        function previewImage(input, previewId, placeholderId) {
            const preview = document.getElementById(previewId);
            const placeholder = document.getElementById(placeholderId);
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                    if (placeholder) placeholder.classList.add('d-none');
                }
                reader.readAsDataURL(file);
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            function clearBackdrop() {
                const backdrops = document.querySelectorAll('.modal-backdrop');
                backdrops.forEach(b => b.remove());
                document.body.classList.remove('modal-open');
            }

            // Error Create Paket Foto
            @if (session('error_modal') === 'createFoto')
                new bootstrap.Modal(document.getElementById('createFoto')).show();
            @endif

            // Error Create Additional
            @if (session('error_modal') === 'createAdd')
                new bootstrap.Modal(document.getElementById('createAdd')).show();
            @endif

            // Error Edit Paket Foto
            @if (session('error_id_foto'))
                clearBackdrop();
                new bootstrap.Modal(document.getElementById("editFoto{{ session('error_id_foto') }}")).show();
            @endif

            // Error Edit Additional
            @if (session('error_id_add'))
                clearBackdrop();
                new bootstrap.Modal(document.getElementById("editAdd{{ session('error_id_add') }}")).show();
            @endif
        });

        // MODAL SHOW IMG
        function showImage(src) {
            var modalImg = document.getElementById('img-preview-target');
            modalImg.src = src;
            new bootstrap.Modal(document.getElementById('modalImagePreview')).show();
        }
    </script>

@endsection