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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="nav-wrapper d-flex gap-2">
                <button class="btn btn-secondary mb-0" onclick="history.back()">
                    <i class="fas fa-circle-left me-1"></i>
                    <span class="font-weight-bold">Kembali</span>
                </button>
                <button class="btn btn-primary mb-0" id="btn-update-pss" type="button" data-shortcut="save">
                    <i class="fas fa-floppy-disk me-1"></i>
                    <span class="font-weight-bold">Simpan Perubahan</span>
                </button>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}" id="form-edit-pss">
                    @csrf
                    @method('PUT')

                    {{-- ── Informasi Header ── --}}
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 text-uppercase text-sm font-weight-bold">Informasi PSS</h6>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-control-label">No PSS</label>
                                        <input type="text" class="form-control bg-light font-weight-bold"
                                            value="{{ $header->no_pss }}" disabled>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer</label>
                                        <input type="text" class="form-control" name="customer"
                                            value="{{ old('customer', $header->customer) }}">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-control-label">Tgl Pengiriman</label>
                                        <input type="date" class="form-control" name="delivery_date"
                                            value="{{ old('delivery_date', $header->delivery_date) }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Alamat Pengiriman</label>
                                        <textarea class="form-control" name="delivery_address"
                                            rows="1">{{ old('delivery_address', $header->delivery_address) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ── Detail Item ── --}}
                    <div class="card">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 text-uppercase text-sm font-weight-bold">Edit Detail Item</h6>
                        </div>
                        <div class="card-body p-0">
                            <hr class="horizontal dark mt-0 mx-3">
                            <div class="table-responsive px-3 pb-3">
                                <table class="table table-sm align-items-center mb-0 excel-table">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center" style="width:40px;">Aksi</th>
                                            <th class="text-center" style="width:40px;">No</th>
                                            <th>Kode Material</th>
                                            <th class="text-center" style="width:60px;">Gsm</th>
                                            <th style="width: 150px; min-width: 150px;">No Roll</th>
                                            <th style="width: 150px; min-width: 150px;">No Jumbo</th>
                                            <th>Color</th>
                                            <th class="text-center" style="width:60px;">Width</th>
                                            <th class="text-center" style="width:60px;">Length</th>
                                            <th class="text-center" style="width:80px;">Grade</th>
                                            <th class="text-center" style="width:70px;">Qty</th>
                                            <th class="text-center" style="width:60px;">UOM</th>
                                            <th>Remark</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($items as $i => $item)
                                            <tr data-detail-id="{{ $item->id }}">
                                                <td class="text-center">
                                                    <button type="button"
                                                        class="btn btn-danger btn-sm mb-0 px-2 py-1 btn-delete-detail"
                                                        data-id="{{ $item->id }}"
                                                        data-url="{{ url('genpss/detail/' . $item->id) }}"
                                                        title="Hapus baris ini">
                                                        <i class="fas fa-trash-alt"></i>
                                                    </button>
                                                </td>
                                                <td class="text-center text-sm row-number">
                                                    {{ $i + 1 }}
                                                    <input type="hidden" name="pss_detail_id[]" value="{{ $item->id }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="kode_material[]"
                                                        value="{{ old('kode_material.' . $i, $item->kode_material ?? '') }}"
                                                        oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm text-center"
                                                        name="gsm[]" value="{{ old('gsm.' . $i, $item->gsm ?? '') }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm" name="no_roll[]"
                                                        value="{{ old('no_roll.' . $i, $item->no_roll ?? '') }}"
                                                        oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm" name="nomor_jumbo[]"
                                                        value="{{ old('nomor_jumbo.' . $i, $item->nomor_jumbo ?? '') }}"
                                                        oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm" name="color[]"
                                                        value="{{ old('color.' . $i, $item->color ?? '') }}"
                                                        oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm text-center"
                                                        name="width[]" value="{{ old('width.' . $i, $item->width ?? '') }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm text-center"
                                                        name="length[]" value="{{ old('length.' . $i, $item->length ?? '') }}">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm text-center"
                                                        name="grade[]" value="{{ old('grade.' . $i, $item->grade ?? '') }}"
                                                        oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control form-control-sm text-center"
                                                        name="qty[]" value="{{ old('qty.' . $i, $item->qty ?? '') }}" min="1">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm text-center"
                                                        name="uom[]" value="{{ old('uom.' . $i, $item->uom ?? '') }}" oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-sm" name="remark[]"
                                                        value="{{ old('remark.' . $i, $item->remark ?? '') }}"
                                                        oninput="this.value=this.value.toUpperCase()">
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="13" class="text-center py-3 text-secondary">Tidak ada detail item.
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')
        <script src="{{ asset('assets/js/modules/alert.js') }}"></script>
        <script src="{{ asset('assets/js/modules/excelTable.js') }}"></script>
        <script src="{{ asset('assets/js/modules/shortcut.js') }}"></script>
        <script src="{{ asset('assets/js/global.js') }}"></script>
        <script>
            $(document).ready(function () {
                var isSubmitting = false;

                // ── Simpan Perubahan ──────────────────────────────────────────
                $('#form-edit-pss').on('submit', function () {
                    if (isSubmitting) return false;
                    isSubmitting = true;
                    $('#btn-update-pss').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');
                });

                $('#btn-update-pss').on('click', function () {
                    if (isSubmitting) return;
                    Swal.fire({
                        title: 'Simpan Perubahan?',
                        text: 'Data PSS akan diperbarui.',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#aaa',
                        confirmButtonText: 'Ya, Simpan',
                        cancelButtonText: 'Batal'
                    }).then(function (result) {
                        if (result.isConfirmed) $('#form-edit-pss').submit();
                    });
                });

                // ── CTRL+S shortcut ───────────────────────────────────────────────
                $(document).on('keydown', function (e) {
                    var isMac = navigator.platform.toUpperCase().includes('MAC');
                    var isCtrl = (isMac && e.metaKey) || (!isMac && e.ctrlKey);
                    if (isCtrl && e.key.toLowerCase() === 's') {
                        e.preventDefault();
                        $('#btn-update-pss').trigger('click');
                    }
                });

                // ── Delete Detail Item ────────────────────────────────────────
                $(document).on('click', '.btn-delete-detail', function () {
                    var $btn    = $(this);
                    var url     = $btn.data('url');
                    var $row    = $btn.closest('tr');

                    Swal.fire({
                        title: 'Hapus Item Ini?',
                        text: 'Baris item ini akan dihapus dari PSS.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#aaa',
                        confirmButtonText: 'Ya, Hapus',
                        cancelButtonText: 'Batal'
                    }).then(function (result) {
                        if (!result.isConfirmed) return;

                        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'DELETE'
                            },
                            success: function (res) {
                                if (res.success) {
                                    $row.fadeOut(300, function () {
                                        $(this).remove();
                                        // Re-numbering
                                        $('tbody tr').each(function (idx) {
                                            $(this).find('.row-number').contents().filter(function () {
                                                return this.nodeType === 3;
                                            }).first().replaceWith(idx + 1);
                                        });
                                        // Jika tidak ada baris tersisa
                                        if ($('tbody tr').length === 0) {
                                            $('tbody').append(
                                                '<tr><td colspan="13" class="text-center py-3 text-secondary">Tidak ada detail item.</td></tr>'
                                            );
                                        }
                                    });
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Berhasil',
                                        text: res.message ?? 'Item berhasil dihapus.',
                                        timer: 1800,
                                        showConfirmButton: false
                                    });
                                } else {
                                    Swal.fire('Gagal', res.message ?? 'Terjadi kesalahan.', 'error');
                                    $btn.prop('disabled', false).html('<i class="fas fa-trash-alt"></i>');
                                }
                            },
                            error: function (xhr) {
                                var msg = xhr.responseJSON?.message ?? 'Terjadi kesalahan server.';
                                Swal.fire('Gagal', msg, 'error');
                                $btn.prop('disabled', false).html('<i class="fas fa-trash-alt"></i>');
                            }
                        });
                    });
                });
            });
        </script>
    @endpush

@endsection