@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card">
        <div class="card-header">
            @if ($authorize->add == '1')
                {{-- button add --}}
                <button class="btn btn-primary mb-0" onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                        class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
            @endif
        </div>
        <div class="card body">
            <div class="container-fluid">

                <div class="row g-2 align-items-center">
                    <div class="col-10 col-md-11">
                        <input class="form-control form-control-sm" type="text" placeholder="" id="searchInput">
                    </div>
                    <div class="col-2 col-md-1 text-end">
                        <button id="btn-filter" class="btn btn-sm btn-secondary">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                    </div>
                </div>

                <div class="accordion" id="accordionVendor">
                    @forelse($groupedRows as $vendorName => $vendorGroup)
                        <div class="accordion-item">
                            {{-- Header vendor --}}
                            <h2 class="accordion-header" id="heading-{{ Str::slug($vendorName) }}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse-{{ Str::slug($vendorName) }}" aria-expanded="false"
                                    aria-controls="collapse-{{ Str::slug($vendorName) }}">
                                    <i class="fas fa-chevron-down me-2"></i>
                                    <span class="fw-bold">{{ $vendorName }}</span>
                                </button>
                            </h2>

                            {{-- Body vendor --}}
                            <div id="collapse-{{ Str::slug($vendorName) }}" class="accordion-collapse collapse"
                                aria-labelledby="heading-{{ Str::slug($vendorName) }}" data-bs-parent="#accordionVendor">
                                <div class="accordion-body">

                                    {{-- Accordion dalam: per nama ukuran --}}
                                    <div class="accordion" id="accordionUkuran-{{ Str::slug($vendorName) }}">
                                        @foreach ($vendorGroup as $index => $row)
                                            @php($h = $row->header)
                                            @php($collapseId = 'collapse-ukuran-' . Str::slug($vendorName) . '-' . $index)
                                            <div class="accordion-item mb-2 shadow-sm vendor-item" data-isactive="{{ $h->isactive }}">
                                                <h2 class="accordion-header" id="heading-{{ $collapseId }}">
                                                    <button class="accordion-button collapsed py-2" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}"
                                                        aria-expanded="false" aria-controls="{{ $collapseId }}">
                                                        <div class="fw-bold me-2">{{ $h->nama_ukuran }}
                                                            ({{ strtoupper($h->jenis_kelamin ?? '-') }})
                                                        </div>
                                                        <small class="text-muted">Jenis: {{ $h->jenis_seragam ?: '-' }} ·
                                                            Vendor: {{ $h->vendor_name ?: '-' }}
                                                            <span class="badge {{ $h->isactive == 1 ? 'bg-success' : 'bg-danger' }}">
                                                                {{ $h->isactive == 1 ? 'Aktif' : 'Nonaktif' }}
                                                            </span>
                                                        </small>
                                                    </button>
                                                </h2>

                                                <div id="{{ $collapseId }}" class="accordion-collapse collapse"
                                                    aria-labelledby="heading-{{ $collapseId }}"
                                                    data-bs-parent="#accordionUkuran-{{ Str::slug($vendorName) }}">
                                                    <div class="accordion-body">
                                                        <div class="d-flex justify-content-end mb-2">
                                                            <button type="button" class="btn btn-sm btn-primary"
                                                                onclick="window.location='{{ url($url_menu . '/show/' . encrypt($h->id)) }}'">
                                                                <i class="fas fa-eye me-1"></i> View
                                                            </button>
                                                            @if ($authorize->edit == '1')
                                                                <button type="button" class="btn btn-sm btn-warning ms-1"
                                                                    onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($h->id)) }}'">
                                                                    <i class="fas fa-edit me-1"></i> Edit
                                                                </button>
                                                            @endif
                                                            @if ($authorize->delete == '1')
                                                                <button type="button"
                                                                    class="btn btn-sm {{ $h->isactive == 1 ? 'btn-danger' : 'btn-success' }} ms-1"
                                                                    onclick="deleteAction('{{ encrypt($h->id) }}', '{{ $h->isactive }}')">
                                                                    <i class="fas {{ $h->isactive == 1 ? 'fa-trash' : 'fa-check' }} me-1"></i>
                                                                    {{ $h->isactive == 1 ? 'Non-Aktifkan' : 'Aktifkan' }}
                                                                </button>
                                                            @endif
                                                            @if($h->kelompok_seragam !== 'aksesoris')
                                                                <button type="button" class="btn btn-sm btn-info ms-1"
                                                                    onclick="showSizeChart('{{ asset('storage/' . ($h->path_size_chart ?? 'noimage.png')) }}')">
                                                                    <i class="fas fa-image me-1"></i> Size Chart
                                                                </button>
                                                            @endif
                                                        </div>

                                                        @if (empty($row->sizeCols))
                                                            <em class="text-muted">Belum ada detail ukuran.</em>
                                                        @else
                                                            <div class="table-responsive">
                                                                <table
                                                                    class="table table-sm table-bordered align-middle mb-0">
                                                                    <thead class="table-light"
                                                                        style="background-color: #bcf4f5;">
                                                                        <tr>
                                                                            <th class="text-center" style="width:160px">
                                                                                Ukuran</th>
                                                                            @foreach ($row->kompRows as $komp)
                                                                                {{-- Cek kondisi DULU --}}
                                                                                @if ($komp['nama'] == 'Komponen 0')
                                                                                    {{-- Jika namanya 'Komponen 0', cetak tulisan 'Komponen' saja --}}
                                                                                    <th class="text-center">Komponen</th>
                                                                                @else
                                                                                    {{-- Jika namanya BUKAN 'Komponen 0', cetak nama aslinya --}}
                                                                                    <th class="text-center">{{ $komp['nama'] }}</th>
                                                                                @endif
                                                                            @endforeach
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @foreach ($row->sizeCols as $col)
                                                                        <tr>
                                                                            {{-- Kolom Nama Ukuran --}}
                                                                            <td class="fw-semibold">{{ $col }}</td>

                                                                            {{-- Loop Kolom Komponen --}}
                                                                            @foreach ($row->kompRows as $komp)

                                                                                {{-- PERBAIKAN BODY: Logika cek Komponen 0 --}}
                                                                                @if ($komp['nama'] == 'Komponen 0')
                                                                                    {{-- Jika Komponen 0, otomatis isi ALLSIZE --}}
                                                                                    <td class="text-center">ALLSIZE</td>
                                                                                @else
                                                                                    {{-- Jika BUKAN Komponen 0, ambil value dari map --}}
                                                                                    @php($key = $komp['id'] . '|' . $col)
                                                                                    @php($v = $row->valueMap[$key] ?? null)
                                                                                    <td class="text-center">{{ $v ?: '' }}</td>
                                                                                @endif

                                                                            @endforeach
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                                </table>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-info">Tidak ada data.</div>
                    @endforelse
                </div>

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



    <div class="modal fade" id="modalSizeChart" tabindex="-1" aria-labelledby="modalSizeChartLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="modalSizeChartLabel">Size Chart</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="size_chart_preview" src="" style="max-width: 100%; max-height: 70vh;"
                        alt="Size Chart">
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });

        function showSizeChart(path) {
            const img = document.getElementById('size_chart_preview');
            console.log(path);
            img.src = path || "{{ asset('storage/' . 'noimage.png') }}";
            const modal = new bootstrap.Modal(document.getElementById('modalSizeChart'));
            modal.show();
        }


        document.getElementById('searchInput').addEventListener('input', function() {
            const keyword = this.value.toLowerCase().trim();
            const vendors = document.querySelectorAll('#accordionVendor .accordion-item');

            vendors.forEach(vendor => {
                // Ambil teks vendor dan semua teks di dalamnya
                const text = vendor.textContent.toLowerCase();

                // Kalau mengandung kata kunci → tampilkan, kalau tidak → sembunyikan
                vendor.style.display = text.includes(keyword) ? '' : 'none';
            });
        });

        function deleteAction(id, isActive) {
        const action = isActive == 1 ? 'menonaktifkan' : 'mengaktifkan';
        const confirmText = isActive == 1 ? 'Nonaktifkan' : 'Aktifkan';
        const successMsg = isActive == 1
            ? 'Data berhasil dinonaktifkan!'
            : 'Data berhasil diaktifkan kembali!';
        const iconType = isActive == 1 ? 'warning' : 'info';

        Swal.fire({
            title: `Apakah Anda yakin ingin ${action} data ini?`,
            icon: iconType,
            showCancelButton: true,
            confirmButtonColor: isActive == 1 ? '#d33' : '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: `Ya, ${confirmText}`,
            cancelButtonText: 'Batal',
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ URL::to('/') }}/mstukr/delete', // route tetap sama
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: successMsg,
                            icon: 'success',
                            confirmButtonColor: '#3085d6'
                        }).then(() => {
                            location.reload(); // refresh setelah konfirmasi
                        });
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        Swal.fire({
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan, coba lagi nanti.',
                            icon: 'error',
                            confirmButtonColor: '#d33'
                        });
                    }
                });
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function () {
    const filterBtn = document.getElementById("btn-filter");
    const vendorAccordions = document.querySelectorAll("#accordionVendor > .accordion-item");
    let filterState = 0; // 0 = semua, 1 = aktif, 2 = nonaktif

    filterBtn.addEventListener("click", function () {
        filterState = (filterState + 1) % 3;

        vendorAccordions.forEach(vendor => {
            // ambil semua item ukuran di dalam vendor
            const items = vendor.querySelectorAll(".vendor-item");
            let hasVisible = false;

            items.forEach(item => {
                const isActive = item.getAttribute("data-isactive");
                item.style.display = ""; // reset

                if (filterState === 1 && isActive !== "1") {
                    item.style.display = "none"; // sembunyikan nonaktif
                } else if (filterState === 2 && isActive !== "0") {
                    item.style.display = "none"; // sembunyikan aktif
                }

                // jika item masih tampil (tidak di-hide)
                if (item.style.display !== "none") hasVisible = true;
            });

            // tampilkan/hilangkan vendor berdasarkan isi di dalamnya
            vendor.style.display = hasVisible ? "" : "none";
        });

        // ubah warna tombol sesuai status filter
        if (filterState === 0) {
            filterBtn.innerHTML = '<i class="fas fa-filter"></i> Semua';
            filterBtn.className = "btn btn-sm btn-secondary";
        } else if (filterState === 1) {
            filterBtn.innerHTML = '<i class="fas fa-filter"></i> Aktif';
            filterBtn.className = "btn btn-sm btn-success";
        } else {
            filterBtn.innerHTML = '<i class="fas fa-filter"></i> Nonaktif';
            filterBtn.className = "btn btn-sm btn-danger";
        }
    });
});

    </script>

   <style>
    /* Accordion styling */
    .accordion-button {
        background-color: #f8fafc;
        font-weight: 600;
        white-space: normal; /* biar teks tidak maksa lebar */
    }

    .accordion-button::after {
        filter: invert(0.5);
    }

    .accordion-item {
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        overflow: hidden;
    }

    .table td,
    .table th {
        text-align: center;
        vertical-align: middle;
    }

    .accordion-button .fa-chevron-down {
        transition: transform 0.3s ease;
    }

    .accordion-button[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

    /* 🔧 Tambahan perbaikan layout dan scrollbar */
    html, body {
        overflow-x: hidden; /* cegah horizontal scroll global */
        max-width: 100%;
    }

    .container,
    .container-fluid,
    .row,
    .col,
    .accordion-item,
    .accordion-body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .table {
        width: 100%;
        max-width: 100%;
        table-layout: auto;
        overflow-x: auto;
        display: block; /* supaya table bisa scroll sendiri, bukan body */
    }

    .accordion-button,
    .accordion-body {
        word-wrap: break-word;
    }

    .d-flex button {
        white-space: nowrap;
    }

    /* Hilangkan margin negatif bootstrap yang kadang bikin melebar */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Responsif saat zoom: pastikan tidak lebih lebar dari viewport */
    * {
        box-sizing: border-box;
    }

    .btn-search button {
    white-space: nowrap;
    min-width: 90px;
    }

    /* JIKA NONAKTIF → warnai seluruh item */
    .vendor-item[data-isactive="0"] {
        background-color: #ffe5e5 !important; /* merah muda *//* garis tebal biar jelas */
    }

    /* Warna tombol header-nya juga ikut */
    .vendor-item[data-isactive="0"] .accordion-button {
        background-color: #ffe5e5 !important;
    }

    /* Saat accordion dibuka */
    .vendor-item[data-isactive="0"] .accordion-body {
        background-color: #fff2f2 !important;
    }

</style>

@endpush