@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Generate PPS'])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">

                        {{-- ── Header ── --}}
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        {{-- ── Filter Bulan ── --}}
                        <div class="row px-4 pb-2">
                            <div class="col-lg">
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <label class="text-sm mb-0 text-secondary">Periode Bulan:</label>
                                    <input type="month" id="filter_month" class="form-control form-control-sm" style="width:180px;"
                                        value="{{ request('filter_month', now()->format('Y-m')) }}" onchange="applyMonthFilter()">
                                </div>
                            </div>
                        </div>

                        {{-- ── Toolbar ── --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="d-flex align-items-center gap-2 flex-wrap">

                                    {{-- Tambah Data --}}
                                    @if ($authorize->add == '1')
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ url($url_menu . '/add') }}'">
                                            <i class="fas fa-plus me-1"></i>
                                            <span class="font-weight-bold">Tambah Data</span>
                                        </button>
                                    @endif

                                    {{-- Export --}}
                                    @if ($authorize->excel == '1')
                                        <button class="btn btn-success mb-0" id="btn-export-excel">
                                            <i class="fas fa-file-excel me-1"></i>
                                            <span class="font-weight-bold">Excel</span>
                                        </button>
                                    @endif
                                    @if ($authorize->pdf == '1')
                                        <button class="btn btn-danger mb-0" id="btn-export-pdf">
                                            <i class="fas fa-file-pdf me-1"></i>
                                            <span class="font-weight-bold">PDF</span>
                                        </button>
                                    @endif
                                    <button class="btn btn-secondary mb-0" id="btn-print">
                                        <i class="fas fa-print me-1"></i>
                                        <span class="font-weight-bold">Print</span>
                                    </button>

                                    {{-- Search --}}
                                    <div class="ms-auto d-flex align-items-center gap-1">
                                        <label class="text-sm mb-0 me-1">Cari :</label>
                                        <input type="search" id="live-search" class="form-control form-control-sm"
                                            style="width:200px;" placeholder="No PPS / ID PS ...">
                                    </div>
                                </div>
                            </div>
                        </div>

                        

                        {{-- ── Table ── --}}
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}" data-skip-auto-dt="1">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>No PPS/SJS</th>
                                            <th>ID PS</th>
                                            <th>Kode Material</th>
                                            <th>Qty</th>
                                            <th>Customer</th>
                                            <th>Pembuatan</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($records as $i => $row)
                                            <tr>
                                                <td class="text-sm font-weight-normal">{{ $i + 1 }}</td>
                                                <td class="text-sm font-weight-bold text-dark">
                                                    {{ $row->no_pps ?? '-' }}
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    @if(!empty($row->id_ps))
                                                        <span class="badge bg-gradient-info text-xs">{{ $row->id_ps }}</span>
                                                    @else
                                                        <span class="badge badge-sm bg-gradient-secondary text-xs opacity-7">without PS</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm font-weight-normal">{!! $row->kode_material ?? '-' !!}</td>
                                                <td class="text-sm font-weight-bold text-dark">{{ $row->total_qty ?? '0' }}{{ !empty($row->sales_unit) ? ' ' . strtoupper($row->sales_unit) : '' }}</td>
                                                <td class="text-sm font-weight-normal">{{ $row->customer_ship_to_ps ?? '-' }}</td>
                                                <td class="text-sm font-weight-normal"
                                                    data-order="{{ \Carbon\Carbon::parse($row->created_at)->format('Ymd') }}">
                                                    {{ \Carbon\Carbon::parse($row->created_at)->format('d/m/Y') }}
                                                </td>
                                                <td class="text-sm text-center">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="Lihat Detail"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($row->id_pps)) }}'">
                                                            <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                                        </button>

                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>

                                                        <ul class="dropdown-menu">
                                                                <li>
                                                                    <button type="button" class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                        title="Edit Data"
                                                                        onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($row->id_pps)) }}'">
                                                                        <i class="fas fa-edit"></i>
                                                                        <span class="font-weight-bold"> Edit</span>
                                                                    </button>
                                                                </li>

                                                            @if ($authorize->pdf == '1')
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li>
                                                                    <a href="{{ route('genpps.viewpdf', ['idencrypt' => encrypt($row->id_pps)]) }}"
                                                                        target="_blank" class="btn btn-sm btn-info mx-2 mb-0 w-90" title="Lihat PDF">
                                                                        <i class="fas fa-file-pdf"></i>
                                                                        <span class="font-weight-bold"> PDF</span>
                                                                    </a>
                                                                </li>
                                                            @endif

                                                            @if ($authorize->delete == '1')
                                                                <li>
                                                                    <hr class="dropdown-divider">
                                                                </li>
                                                                <li>
                                                                    <button type="button" class="btn btn-sm btn-danger mx-2 mb-0 w-90 btn-delete"
                                                                        data-id="{{ encrypt($row->id_pps) }}"
                                                                        data-label="{{ $row->no_pps }}" title="Hapus Data">
                                                                        <i class="fas fa-trash"></i>
                                                                        <span class="font-weight-bold"> Hapus</span>
                                                                    </button>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>{{-- /card --}}
                </div>
            </div>
        </div>
    </div>

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

    // ── DataTable ──────────────────────────────────────────────────────────
    var tableSelector = '#list_{{ $dmenu }}';
    if ($.fn.DataTable.isDataTable(tableSelector)) {
        $(tableSelector).DataTable().destroy();
    }

    var table = $(tableSelector).DataTable({
        dom: 'lrtip',          // hide default search (kita pakai custom di atas)
        order: [[6, 'desc']],  // default urut Tanggal Buat desc
        pageLength: 25,
        language: {
            emptyTable: 'Belum ada data PPS. Klik Tambah Data untuk membuat baru.'
        },
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'List Generate PPS',
                className: 'd-none',
                exportOptions: { columns: ':not(:last-child)' }
            },
            {
                extend: 'pdfHtml5',
                title: 'List Generate PPS',
                className: 'd-none',
                orientation: 'landscape',
                exportOptions: { columns: ':not(:last-child)' }
            },
            {
                extend: 'print',
                title: 'List Generate PPS',
                className: 'd-none',
                exportOptions: { columns: ':not(:last-child)' }
            }
        ]
    });

    // Tombol Export terhubung ke DataTable buttons
    $('#btn-export-excel').on('click', function () {
        table.button('.buttons-excel').trigger();
    });
    $('#btn-export-pdf').on('click', function () {
        table.button('.buttons-pdf').trigger();
    });
    $('#btn-print').on('click', function () {
        table.button('.buttons-print').trigger();
    });

    // Custom search box
    $('#live-search').on('keyup', function () {
        table.search(this.value).draw();
    });

    // ── Flash message via SweetAlert ──────────────────────────────────────
    @if (Session::has('message'))
        @php
            $msg   = addslashes((string)Session::pull('message'));
            $msg   = str_replace(["\r", "\n"], "", $msg);
            $cls   = Session::pull('class', 'info');
            $icon  = $cls === 'success' ? 'success' : ($cls === 'danger' || $cls === 'error' ? 'error' : 'info');
        @endphp
        Swal.fire({
            icon: '{{ $icon }}',
            title: '{{ $cls === "success" ? "Berhasil!" : ($cls === "danger" || $cls === "error" ? "Gagal!" : "Info") }}',
            text: '{{ $msg }}',
            confirmButtonColor: '#3085d6',
            timer: 4000,
            timerProgressBar: true
        });
    @endif

    // ── Konfirmasi Hapus ──────────────────────────────────────────────────
    $(document).on('click', '.btn-delete', function () {
        var id    = $(this).data('id');
        var label = $(this).data('label');

        Swal.fire({
            title: 'Hapus PPS?',
            html: 'Data <b>' + label + '</b> akan dihapus permanen.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (result.isConfirmed) {
                var form = $('<form method="POST" action="{{ url($url_menu) }}/' + id + '"></form>');
                form.append('@csrf');
                form.append('<input type="hidden" name="_method" value="DELETE">');
                $('body').append(form);
                form.submit();
            }
        });
    });

    // ── Month Filter Logic ──────────────────────────────────────────
    window.applyMonthFilter = function () {
        const month = $('#filter_month').val();
        let url = new URL(window.location.href);

        if (month) {
            url.searchParams.set('filter_month', month);
        } else {
            url.searchParams.delete('filter_month');
        }

        window.location.href = url.toString();
    };

});
</script>
@endpush

@endsection