@extends('admin.layouts.base')

@section('title', 'Data Pakaian')

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

    <style>
        .search-input {
        width: 200px;
    }

    .btn-biru {
        background-color: #007bff; /* biru Bootstrap */
        color: white;
        border: none;
        padding: 6px 16px;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn-biru:hover {
        background-color: #0069d9;
    }

    .search-box {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
    }

    .search-box input[type="text"] {
        padding: 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .modern-select {
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 14px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: border 0.2s ease-in-out;
    }

    .modern-select:focus {
        border-color: #0d6efd;
        outline: none;
    }
    </style>
    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Berhasil!',
                text: '{{ session('success') }}',
                icon: 'success',
                timer: 3000,
                showConfirmButton: false
            });
        </script>
    @endif
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 text-grey-800">
            <i class="bi bi-boxes"></i> Data Pakaian
        </h1>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold" style="color: #064E3B;">
                <i class="bi bi-table"></i> Daftar Data Pakaian
            </h6>
            <button type="button" class="btn" style="background-color: #064E3B; color: white;" data-bs-toggle="modal"
                data-bs-target="#modalTambah">
                <i></i> Tambah Data
            </button>
        </div>

        <div class="card-body">
            <form method="GET" id="entriesForm" action="{{ route('admin.pakaian.index') }}"
                class="d-flex justify-content-between align-items-center mb-3 flex-wrap">

                {{-- KIRI --}}
                <div class="d-flex align-items-center gap-2 mb-2 mb-md-0">
                    <label for="entriesPerPage" class="mb-0 text-muted fw-semibold" style="margin-right: 8px;">Show</label>
                    <select name="entries" id="entriesPerPage" class="modern-select" style="margin-right: 8px;"
                        onchange="document.getElementById('entriesForm').submit()">
                        <option value="10" {{ request('entries') == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ request('entries') == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('entries') == 50 ? 'selected' : '' }}>50</option>
                    </select>

                    <span class="text-muted fw-semibold">entries</span>
                </div>
                {{-- KANAN --}}
                <div class="d-flex align-items-center" style="gap: 10px;">
                    <input type="text" name="search" value="{{ request('search') }}"
                        class="form-control form-control-sm" placeholder="Cari nama pakaian...">
                    <button type="submit" class="btn btn-success btn-sm" style="background-color: #14532d; border-color: #14532d;">
                        Cari
                    </button>
                </div>
            </form>
        </div>
                <div class="table-responsive">
                    <table class="table table-bordered border-secondary table-striped align-middle text-center">
                        <thead class="table-light">
                            <tr>
                                <th scope="col">No</th>
                                <th scope="col">Gambar</th>
                                <th scope="col">Nama Pakaian</th>
                                <th scope="col">Harga</th>
                                <th scope="col">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($alternatif as $index => $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        @if ($item->img)
                                            <img src="{{ asset($item->img) }}" alt="Gambar" class="img-thumbnail" style="width: 100px; height: 100px;">
                                        @else
                                            <span class="text-muted">Tidak ada gambar</span>
                                        @endif
                                    </td>
                                    <td>{{ $item->nama_pakaian }}</td>
                                    <td>Rp{{ number_format($item->harga, 0, ',', '.') }}</td>
                                    <td>
                                        <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#infoModal{{ $item->id }}">
                                            <i class="bi bi-info-circle"></i>
                                        </button>
                                        <a href="{{ route('admin.pakaian.edit', $item->id) }}" class="btn btn-warning btn-sm">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        <button type="button" class="btn btn-danger btn-sm btn-delete" data-id="{{ $item->id }}" data-nama="{{ $item->nama_pakaian }}">
                                            <i class="bi bi-trash"></i>
                                        </button>

                                        <!-- Form Hapus (disembunyikan) -->
                                        <form id="delete-form-{{ $item->id }}" action="{{ route('admin.pakaian.destroy', $item->id) }}" method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div class="d-flex justify-content-end">
                    {{ $alternatif->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
                </div>

                <!-- Modal Info --> 
                @foreach ($alternatif as $item)
                    <div class="modal fade" id="infoModal{{ $item->id }}" tabindex="-1"
                        aria-labelledby="infoModalLabel{{ $item->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="infoModalLabel{{ $item->id }}">
                                        Detail Subkriteria - {{ $item->nama_pakaian }}
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Kriteria</th>
                                                <th>Subkriteria</th>
                                                <th>Nilai</th>
                                                <th>Range Harga</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($item->subKriterias as $sub)
                                                <tr>
                                                    <td>{{ $sub->kriteria->nama_kriteria ?? '-' }}</td>
                                                    <td>{{ $sub->nama_sub }}</td>
                                                    <td>{{ $sub->nilai }}</td>
                                                    <td>
                                                        @if ($sub->kriteria->nama_kriteria === 'Harga')
                                                            Rp{{ number_format($sub->min_harga, 0, ',', '.') }}
                                                            -
                                                            Rp{{ number_format($sub->max_harga, 0, ',', '.') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Tutup</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <!-- Pagination -->
                <div class="d-flex justify-content-end">
                    {{ $alternatif->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
                </div>
    
    <!-- Modal Tambah Data Pakaian -->
    <div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered"> <!-- Centered vertically -->
            <div class="modal-content rounded-3 shadow-sm border-0">
                <!-- Header -->
                <div class="modal-header border-bottom-0">
                    <h5 class="modal-title fw-semibold" id="modalTambahLabel">
                        <i class="bi bi-plus-circle me-1"></i> Tambah Pakaian
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>

                <!-- Body -->
                <div class="modal-body pt-0">
                    <form action="{{ route('admin.pakaian.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <label for="nama_pakaian" class="form-label">Nama Pakaian</label>
                            <input type="text" class="form-control" name="nama_pakaian" required>
                        </div>

                        <div class="mb-3">
                            <label for="harga" class="form-label">Harga</label>
                            <input type="number" class="form-control" name="harga" required>
                        </div>

                        <div class="mb-3">
                            <label for="img" class="form-label">Upload Gambar</label>
                            <input type="file" class="form-control" name="img" accept="image/*">
                        </div>

                        <!-- Footer Buttons -->
                        <div class="modal-footer border-top-0 d-flex justify-content-end gap-2 pt-0">
                        <button type="button" class="btn" style="background-color: #90ee90; color: black; border-radius: 5px; padding: 6px 20px;" data-bs-dismiss="modal">
                            <i></i> Batal
                        </button>
                        <button type="submit" class="btn" style="background-color: #064e3b; color: white; border-radius: 5px; padding: 6px 20px;">
                            <i></i> Simpan
                        </button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @foreach ($alternatif as $item)
        <!-- Modal Edit -->
        <div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1"
            aria-labelledby="modalEdit{{ $item->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalEdit{{ $item->id }}">Edit Data Pakaian</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <form method="POST" action="{{ route('admin.pakaian.update', $item->id) }}"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="modal-body">
                            <!-- Nama Pakaian -->
                            <div class="mb-3">
                                <label for="edit_nama_pakaian{{ $item->id }}" class="form-label">Nama Pakaian</label>
                                <input type="text" class="form-control" id="edit_nama_pakaian{{ $item->id }}"
                                    name="nama_pakaian" value="{{ $item->nama_pakaian }}" required>
                            </div>
                            <!-- Harga -->
                            <div class="mb-3">
                                <label for="edit_harga{{ $item->id }}" class="form-label">Harga</label>
                                <input type="number" id="edit_harga{{ $item->id }}" name="harga"
                                    class="form-control" value="{{ $item->harga }}" required>
                            </div>

                            <!-- Upload Gambar Baru -->
                            <div class="mb-3">
                                <label for="edit_gambar{{ $item->id }}" class="form-label">Gambar Baru</label>
                                <input type="file" class="form-control" name="gambar"
                                    id="edit_gambar{{ $item->id }}" accept="image/*">
                            </div>

                            <!-- Preview Gambar Lama -->
                            <div class="mb-3">
                                <label class="form-label">Gambar Lama:</label><br>
                                <img src="{{ asset($item->img) }}" alt="Gambar Lama"
                                    style="width: 100px; height: 100px; object-fit: cover;" class="border rounded">
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn" style="background-color: #90ee90; color: black;"
                                data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn"
                                style="background-color: #064E3B; color: white;">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach


    <style>
        .label-spacing {
            margin-right: 0.3rem;
            /* Jarak antara label dan select */
        }

        .search-input {
            width: 200px;
            /* Lebar input search */
        }

        .justify-between {
            justify-content: space-between;
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
            /* Geser ke pojok kanan */
            align-items: center;
            padding: 10px;
        }

        .pagination .page-item .page-link {
            font-size: 14px;
            padding: 6px 12px;
            border-radius: 5px;
            border: none;
            color: white;
            background-color: #064E3B;
            /* Warna biru */
            margin: 0 2px;
            transition: 0.3s ease-in-out;
        }

        .pagination .page-item.active .page-link {
            background-color: #053B2D;
            /* Biru lebih gelap */
            font-weight: bold;
        }

        .pagination .page-item .page-link:hover {
            background-color: #046C4E;
        }

        .pagination .page-item.disabled .page-link {
            background-color: #e9ecef;
            color: #6c757d;
            cursor: not-allowed;
        }

        .entries-form {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .entries-left,
        .entries-right {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 14px;
        }

        .entries-left label,
        .entries-right label {
            margin: 0;
            line-height: 1;
        }

        .entries-left select,
        .entries-right input[type="text"] {
            padding: 4px 8px;
            height: 32px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .entries-right button {
            height: 32px;
            padding: 0 12px;
            font-size: 14px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .entries-right button:hover {
            background-color: #0056b3;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const deleteButtons = document.querySelectorAll(".btn-delete");

        deleteButtons.forEach(button => {
            button.addEventListener("click", function () {
                const id = this.getAttribute("data-id");
                const nama = this.getAttribute("data-nama");

                Swal.fire({
                    title: 'Hapus Data?',
                    text: `Data pakaian "${nama}" akan dihapus!`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById(`delete-form-${id}`).submit();
                    }
                });
            });
        });
    });
</script>

@endsection