@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <style>
        /* 3D Export Button Hover Effects */
        .export-btn-3d {
            position: relative;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .export-btn-3d:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .export-btn-3d:active {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .export-excel:hover {
            box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4), 0 0 20px rgba(40, 167, 69, 0.2);
            border-color: #28a745 !important;
        }

        .export-pdf:hover {
            box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4), 0 0 20px rgba(220, 53, 69, 0.2);
            border-color: #dc3545 !important;
        }

        .export-print:hover {
            box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4), 0 0 20px rgba(108, 117, 125, 0.2);
            border-color: #6c757d !important;
        }

        .export-btn-3d:hover i {
            animation: iconBounce 0.6s ease-in-out;
        }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(-3px); }
        }

        .logo-panah {
            transition: transform 0.3s ease;
        }

        .logo-panah.rotate {
            transform: rotate(180deg);
        }
    </style>

    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">

                        {{-- ── Card Header ── --}}
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- ── Toolbar ── --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </a>
                                    </div>
                                    <div class="col-auto align-self-center">
                                        <div class="d-flex align-items-center">
                                            <label class="text-sm font-weight-bold text-secondary me-2 mb-0">Cari :</label>
                                            <div class="input-group input-group-sm" style="width: 280px;">
                                                <input type="search" id="server-search-box" class="form-control"
                                                    placeholder="No PSS / Customer / Material..."
                                                    value="{{ $filterParams['search_all'] ?? '' }}">
                                                <button class="btn btn-outline-primary mb-0" type="button"
                                                    id="btn-search-server">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ── Export buttons ── --}}
                        <div class="row px-4 pb-2">
                            <div class="col-lg">
                                <div class="d-flex gap-2">
                                    @if ($authorize->excel == '1')
                                        <button type="button"
                                            class="btn btn-sm btn-outline-success mb-0 export-btn-3d export-excel"
                                            id="exportAllExcel">
                                            <i class="fas fa-file-excel me-1"></i> Excel
                                        </button>
                                    @endif
                                    @if ($authorize->pdf == '1')
                                        <button type="button"
                                            class="btn btn-sm btn-outline-danger mb-0 export-btn-3d export-pdf"
                                            id="exportAllPDF">
                                            <i class="fas fa-file-pdf me-1"></i> PDF
                                        </button>
                                    @endif
                                    @if ($authorize->print == '1')
                                        <button type="button"
                                            class="btn btn-sm btn-outline-secondary mb-0 export-btn-3d export-print"
                                            id="printAll">
                                            <i class="fas fa-print me-1"></i> Print
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0 mb-2">

                        {{-- ── Result Table ── --}}
                        <div class="row px-4 py-2" id="real-result-container">

                            @forelse ($collapse_header as $pss)
                                <div class="card mb-3 sample-card"
                                    data-search="{{ strtolower($pss->no_pss . ' ' . $pss->customer) }}">

                                    {{-- Header Collapse --}}
                                    <div class="card-header d-flex justify-content-between align-items-center"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#pss-{{ $pss->id_pss }}"
                                        style="cursor:pointer;">
                                        <div>
                                            <span class="badge bg-primary text-white fw-semibold">
                                                {{ $pss->no_pss }}
                                            </span>
                                            <span>
                                                | Customer : {{ $pss->customer ?? '-' }}
                                                | Tgl Kirim :
                                                {{ $pss->delivery_date ? \Carbon\Carbon::parse($pss->delivery_date)->format('d-m-Y') : '-' }}
                                                | {{ count($details[$pss->id_pss] ?? []) }} Item
                                            </span>
                                        </div>
                                        <div>
                                            <span class="fas fa-circle-arrow-down text-primary logo-panah"></span>
                                        </div>
                                    </div>

                                    {{-- Detail Items --}}
                                    <div class="collapse" id="pss-{{ $pss->id_pss }}">
                                        <div class="card-body p-0">
                                            {{-- Alamat Pengiriman --}}
                                            @if (!empty($pss->delivery_address))
                                                <div class="px-3 pt-2 pb-1 text-sm text-secondary">
                                                    <i class="fas fa-map-marker-alt me-1"></i>
                                                    <strong>Alamat:</strong> {{ $pss->delivery_address }}
                                                </div>
                                            @endif

                                            <div class="table-responsive">
                                                <table class="table display"
                                                    id="list_{{ $dmenu }}_{{ $pss->id_pss }}">
                                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                        <tr>
                                                            <th class="text-center">No</th>
                                                            <th class="text-center">Kode Material</th>
                                                            <th class="text-center">Gsm</th>
                                                            <th class="text-center">No Roll</th>
                                                            <th class="text-center">No Jumbo</th>
                                                            <th class="text-center">Color</th>
                                                            <th class="text-center">Width</th>
                                                            <th class="text-center">Length</th>
                                                            <th class="text-center">Grade</th>
                                                            <th class="text-center">Qty</th>
                                                            <th class="text-center">Remark</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($details[$pss->id_pss] ?? [] as $idx => $row)
                                                            <tr>
                                                                <td class="align-middle text-center text-sm">{{ $idx + 1 }}</td>
                                                                <td class="align-middle text-sm font-weight-bold">{{ $row->kode_material ?? '-' }}</td>
                                                                <td class="align-middle text-center text-sm">{{ $row->gsm ?? '-' }}</td>
                                                                <td class="align-middle text-sm">{{ $row->no_roll ?? '-' }}</td>
                                                                <td class="align-middle text-sm">{{ $row->nomor_jumbo ?? '-' }}</td>
                                                                <td class="align-middle text-sm">{{ $row->color ?? '-' }}</td>
                                                                <td class="align-middle text-center text-sm">{{ $row->width ?? '-' }}</td>
                                                                <td class="align-middle text-center text-sm">{{ $row->length ?? '-' }}</td>
                                                                <td class="align-middle text-center text-sm">{{ $row->grade ?? '-' }}</td>
                                                                <td class="align-middle text-center text-sm font-weight-bold text-primary">{{ $row->qty ?? '-' }}</td>
                                                                <td class="align-middle text-sm">{{ $row->remark ?? '' }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="alert alert-info text-sm">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Tidak ada data PSS yang sesuai dengan filter yang dipilih.
                                    </div>
                                </div>
                            @endforelse

                            {{-- Hidden form for paging & search --}}
                            <form id="psPagingForm" method="POST" action="{{ URL::to($url_menu) }}">
                                @csrf
                                <input type="hidden" name="page" id="pageInput" value="{{ request('page', 1) }}">
                                @foreach ($filterParams ?? [] as $k => $v)
                                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                                @endforeach
                            </form>

                            <div class="d-flex justify-content-end px-4 py-2">
                                {{ $collapse_header->links('pagination::bootstrap-5') }}
                            </div>

                        </div>{{-- /real-result-container --}}

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if ($table_result)
                                    <div class="nav-wrapper">
                                        <code>Note : Data ditampilkan per nomor PSS</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code>Data not found!</code></div>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function () {

    // ── Init DataTables ────────────────────────────────────────────────────
    $('table.display').each(function () {
        const tableId = $(this).attr('id');
        if (tableId && !$.fn.DataTable.isDataTable('#' + tableId)) {
            $('#' + tableId).DataTable({
                language: {
                    search: 'Cari :',
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Tidak ada data',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(dari _MAX_ data)'
                },
                responsive: true,
                paging: true,
                ordering: true
            });
        }
    });

    // Reinit on collapse open
    $(document).on('shown.bs.collapse', '.collapse', function () {
        const $table = $(this).find('table.display');
        if ($table.length > 0) {
            const tableId = $table.attr('id');
            if ($.fn.DataTable.isDataTable('#' + tableId)) {
                $('#' + tableId).DataTable().columns.adjust().responsive.recalc();
            }
        }
    });

    // Arrow rotate on collapse
    document.querySelectorAll('.collapse').forEach(function (el) {
        const header = el.previousElementSibling;
        const arrow  = header ? header.querySelector('.logo-panah') : null;
        if (!arrow) return;
        el.addEventListener('show.bs.collapse',  () => arrow.classList.add('rotate'));
        el.addEventListener('hide.bs.collapse',  () => arrow.classList.remove('rotate'));
    });

    // ── Server-side search ─────────────────────────────────────────────────
    let searchTimeout;
    let currentRequest = null;

    $('#btn-search-server').on('click', function () {
        performAjaxSearch($('#server-search-box').val());
    });

    $('#server-search-box').on('input', function () {
        const val = $(this).val();
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => performAjaxSearch(val), 500);
    });

    $('#server-search-box').on('keypress', function (e) {
        if (e.which === 13) { e.preventDefault(); performAjaxSearch($(this).val()); }
    });

    function performAjaxSearch(val) {
        const $form = $('#psPagingForm');
        $form.find('input[name="search_all"]').remove();
        $form.append('<input type="hidden" name="search_all" value="' + val + '">');
        $('#pageInput').val(1);

        const formData  = $form.serialize();
        const actionUrl = $form.attr('action');
        $('#real-result-container').css('opacity', '0.5');

        if (currentRequest) currentRequest.abort();
        currentRequest = $.ajax({
            url: actionUrl,
            type: 'POST',
            data: formData,
            success: function (response) {
                const newContent = $('<div>').html(response).find('#real-result-container').html();
                if (newContent) $('#real-result-container').html(newContent);
                $('#real-result-container').css('opacity', '1');
            },
            error: function (xhr) {
                if (xhr.statusText !== 'abort') {
                    $('#real-result-container').css('opacity', '1');
                }
            }
        });
    }

    // ── Export ─────────────────────────────────────────────────────────────
    $('#exportAllExcel').on('click', () => exportAllData('excel'));
    $('#exportAllPDF').on('click',   () => exportAllData('pdf'));
    $('#printAll').on('click',       () => exportAllData('print'));

    function exportAllData(type) {
        const btnMap = { excel: '#exportAllExcel', pdf: '#exportAllPDF', print: '#printAll' };
        const $btn   = $(btnMap[type]);
        const orig   = $btn.html();
        $btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Processing...').prop('disabled', true);

        $.ajax({
            url:  $('#psPagingForm').attr('action'),
            type: 'POST',
            data: $('#psPagingForm').serialize() + '&export_type=' + type,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function (response) {
                if (response.success && response.data && response.data.length > 0) {
                    processExport(type, response.data);
                } else {
                    Swal.fire('Info', 'Tidak ada data untuk diekspor.', 'info');
                }
            },
            error: function () {
                Swal.fire('Error', 'Gagal mengambil data ekspor.', 'error');
            },
            complete: function () {
                $btn.html(orig).prop('disabled', false);
            }
        });
    }

    function processExport(type, data) {
        const columns = [
            { key: 'no',               header: 'No' },
            { key: 'no_pss',           header: 'No PSS' },
            { key: 'customer',         header: 'Customer' },
            { key: 'delivery_date',    header: 'Tgl Pengiriman' },
            { key: 'delivery_address', header: 'Alamat Pengiriman' },
            { key: 'kode_material',    header: 'Kode Material' },
            { key: 'gsm',              header: 'Gsm' },
            { key: 'no_roll',          header: 'No Roll' },
            { key: 'nomor_jumbo',      header: 'No Jumbo' },
            { key: 'color',            header: 'Color' },
            { key: 'width',            header: 'Width' },
            { key: 'length',           header: 'Length' },
            { key: 'grade',            header: 'Grade' },
            { key: 'qty',              header: 'Qty' },
            { key: 'remark',           header: 'Remark' },
            { key: 'tgl_buat',         header: 'Tgl Dibuat' },
        ];

        const tempId = 'tmpTbl_' + Date.now();
        let html = '<table id="' + tempId + '" class="display" style="display:none;"><thead><tr>';
        columns.forEach(c => html += '<th>' + c.header + '</th>');
        html += '</tr></thead><tbody>';

        data.forEach((row, i) => {
            html += '<tr>';
            columns.forEach(c => {
                const val = c.key === 'no' ? (i + 1) : (row[c.key] ?? '');
                html += '<td>' + $('<div>').text(String(val)).html() + '</td>';
            });
            html += '</tr>';
        });
        html += '</tbody></table>';

        $('body').append(html);

        const dt = $('#' + tempId).DataTable({
            dom: 'Bfrtip',
            paging: false, ordering: false, searching: false,
            buttons: [{
                extend: type === 'excel' ? 'excelHtml5' : (type === 'pdf' ? 'pdfHtml5' : 'print'),
                title: 'Report PSS',
                filename: 'Report_PSS_' + new Date().toISOString().slice(0, 10),
                orientation: type === 'pdf' ? 'landscape' : 'portrait',
                pageSize: type === 'pdf' ? 'A3' : 'A4'
            }]
        });

        setTimeout(() => {
            try {
                dt.button(0).trigger();
                setTimeout(() => { dt.destroy(); $('#' + tempId).remove(); }, 2000);
            } catch (err) {
                Swal.fire('Error', 'Export gagal: ' + err.message, 'error');
            }
        }, 500);
    }

    // ── Pagination via form ───────────────────────────────────────────────
    $(document).on('click', '.pagination a', function (e) {
        e.preventDefault();
        const href = $(this).attr('href');
        if (!href) return;
        const page = new URL(href, window.location.origin).searchParams.get('page') || 1;
        $('#pageInput').val(page);
        $('#psPagingForm').submit();
    });
});
</script>
@endpush