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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <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"z>Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" id="btn-save-feedback" type="button">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan Feedback</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form method="POST" action="{{ URL::to($url_menu) }}" id="form-feedcs" enctype="multipart/form-data">
                    @csrf

                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                <i class="fas fa-file-invoice me-2 text-primary"></i>
                                Input Feedback Customer
                            </h6>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">

                            @include('components.alert')

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label font-weight-bold">ID PS <span class="text-danger">*</span></label>
                                        <select class="form-select select2" name="id_ps" id="id_ps" required>
                                            <option value="">-- Pilih ID PS --</option>
                                            @foreach($list_ps as $ps)
                                                <option value="{{ $ps->id_ps }}"
                                                    data-ps_date="{{ $ps->ps_date ?? '' }}"
                                                    data-customer="{{ $ps->customer ?? '' }}"
                                                    data-salesman="{{ $ps->salesman ?? '' }}"
                                                    data-alamat="{{ $ps->alamat_pengiriman ?? '' }}"
                                                    data-status="{{ $ps->status ?? '' }}"
                                                    {{ old('id_ps') == $ps->id_ps ? 'selected' : '' }}>
                                                    {{ $ps->id_ps }} @if($ps->customer) — {{ $ps->customer }} @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4" id="card-ps-detail" style="{{ old('id_ps') ? '' : 'display:none;' }}">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                <i class="fas fa-info-circle me-2 text-info"></i>
                                Informasi Picking Slip
                                <span id="badge-id-ps" class="badge bg-gradient-info ms-2"></span>
                            </h6>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6"><div class="form-group"><label>Tanggal PS</label><input type="text" class="form-control bg-light" id="disp_ps_date" disabled></div></div>
                                <div class="col-md-6"><div class="form-group"><label>Customer</label><input type="text" class="form-control bg-light" id="disp_customer" disabled></div></div>
                            </div>
                            <div class="row">
                                <div class="col-md-6"><div class="form-group"><label>Alamat Pengiriman</label><textarea class="form-control bg-light" id="disp_alamat" rows="2" disabled></textarea></div></div>
                                <div class="col-md-6"><div class="form-group"><label>Salesman</label><input type="text" class="form-control bg-light" id="disp_salesman" disabled></div></div>
                                <!-- <div class="col-md-4"><div class="form-group"><label>Status PS</label><input type="text" class="form-control bg-light" id="disp_status" disabled></div></div> -->
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4" id="card-ps-items" style="{{ old('id_ps') ? '' : 'display:none;' }}">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                <i class="fas fa-comments me-2 text-success"></i>
                                Material & Feedback
                            </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 table-bordered mb-0">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center" style="width:40px;">#</th>
                                            <th class="text-center" style="width:60px;">Pilih</th>
                                            <th>PP/PET</th>
                                            <th class="text-center">Gsm</th>
                                            <th>Color</th>
                                            <th class="text-center">Width</th>
                                            <th class="text-center">Length</th>
                                            <th class="text-center">Qty</th>
                                            <th>Feedback</th>
                                            <th class="text-center" style="width:120px;">Status</th>
                                            <th class="text-center" style="width:180px;">Attachment</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody-items">
                                        <tr><td colspan="11" class="text-center text-secondary text-sm py-3">Pilih ID PS terlebih dahulu.</td></tr>
                                    </tbody>
                                </table>
                                <div class="mt-2 text-sm text-muted"><span id="selected-item-count">0 item dipilih</span></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @php
        $psItemsJs = [];
        foreach($list_ps_items as $idPs => $items) {
            $psItemsJs[$idPs] = $items->map(function($item) {
                return [
                    'detail_id' => $item->detail_id,
                    'material_code' => $item->material_code,
                    'gsm' => $item->gsm ?? '',
                    'color' => $item->color ?? '',
                    'width' => $item->width ?? '',
                    'length' => $item->length ?? '',
                    'qty_sales' => $item->qty_sales ?? '',
                    'sales_unit' => $item->sales_unit ?? '',
                    'feedback_customer' => $item->feedback_customer ?? '',
                ];
            })->values()->toArray();
        }
    @endphp

@push('js')
<script>
$(document).ready(function () {
    var psItems = @json($psItemsJs);

    $('#id_ps').select2({ placeholder: '-- Pilih ID PS --', allowClear: true, width: '100%' });

    function renderItemRow(i, item) {
        var detailId = item.detail_id || '';
        var unit = item.sales_unit ? String(item.sales_unit).toUpperCase() : '';
        var hasFeedback = String(item.feedback_customer || '').trim() !== '';
        var trClass = hasFeedback ? 'bg-light text-secondary' : '';
        var checkboxDisabled = hasFeedback ? ' disabled' : '';
        var textareaDisabled = hasFeedback ? ' disabled' : '';
        var tooltipTitle = hasFeedback ? 'Feedback sudah terisi, tidak bisa diubah' : '';
        
        return '<tr class="' + trClass + '" title="' + tooltipTitle + '">' +
            '<td class="text-center text-sm">' + (i + 1) + '</td>' +
            '<td class="text-center text-sm">' +
                '<div class="form-check d-flex justify-content-center mb-0">' +
                    '<input class="form-check-input item-select" type="checkbox" name="selected_detail_ids[]" value="' + detailId + '"' + checkboxDisabled + '>' +
                '</div>' +
            '</td>' +
            '<td class="text-sm font-weight-bold">' + (item.material_code || '-') + '</td>' +
            '<td class="text-center text-sm">' + (item.gsm || '-') + '</td>' +
            '<td class="text-sm">' + (item.color || '-') + '</td>' +
            '<td class="text-center text-sm">' + (item.width || '-') + '</td>' +
            '<td class="text-center text-sm">' + (item.length || '-') + '</td>' +
            '<td class="text-center text-sm">' + (item.qty_sales || '-') + ' ' + unit + '</td>' +
            '<td><textarea class="form-control form-control-sm inp-feedback" name="item_feedback[' + detailId + ']" rows="2" style="min-width:220px; max-height:90px; overflow-y:auto; resize:vertical;"' + textareaDisabled + '>' + (item.feedback_customer || '') + '</textarea></td>' +
            '<td class="text-center">' +
                '<select class="form-select form-select-sm" name="item_status_feedback[' + detailId + ']"' + textareaDisabled + '>' +
                    '<option value="">- Pilih -</option>' +
                    '<option value="1">Accepted</option>' +
                    '<option value="0">Not Accepted</option>' +
                '</select>' +
            '</td>' +
            '<td class="text-center">' +
                '<input type="file" class="form-control form-control-sm" name="attachment_' + detailId + '"' + textareaDisabled + '>' +
            '</td>' +
            '</tr>';
    }

    function updateSelectedCount() {
        $('#selected-item-count').text($('.item-select:checked').not(':disabled').length + ' item dipilih');
    }

    $('#id_ps').on('change', function () {
        var idPs = $(this).val();
        var option = $(this).find('option:selected');

        if (!idPs) {
            $('#card-ps-detail, #card-ps-items').slideUp();
            $('#selected-item-count').text('0 item dipilih');
            return;
        }

        $('#badge-id-ps').text(idPs);
        $('#disp_ps_date').val(option.data('ps_date') || '-');
        $('#disp_customer').val(option.data('customer') || '-');
        $('#disp_salesman').val(option.data('salesman') || '-');
        $('#disp_alamat').val(option.data('alamat') || '-');
        $('#disp_status').val(option.data('status') || '-');
        $('#card-ps-detail, #card-ps-items').slideDown();

        var tbody = $('#tbody-items').empty();
        var items = psItems[idPs] || [];
        if (items.length === 0) {
            tbody.append('<tr><td colspan="11" class="text-center text-secondary text-sm py-3">Tidak ada item untuk PS ini.</td></tr>');
            $('#selected-item-count').text('0 item dipilih');
        } else {
            $.each(items, function (i, item) { tbody.append(renderItemRow(i, item)); });
            updateSelectedCount();
        }
    });

    $(document).on('change', '.item-select', updateSelectedCount);

    @if(old('id_ps'))
        $('#id_ps').trigger('change');
    @endif

    $('#btn-save-feedback').on('click', function () {
        var btn = $(this);
        var idPs = $('#id_ps').val();
        var selectedRows = $('.item-select:checked').not(':disabled');

        if (!idPs) {
            Swal.fire('Peringatan', 'Silakan pilih ID PS terlebih dahulu.', 'warning');
            return;
        }

        if (selectedRows.length === 0) {
            Swal.fire('Peringatan', 'Pilih minimal 1 material untuk feedback.', 'warning');
            return;
        }

        var invalid = false;
        selectedRows.each(function () {
            var feedbackInput = $(this).closest('tr').find('.inp-feedback');
            if (!String(feedbackInput.val() || '').trim()) {
                invalid = true;
                feedbackInput.addClass('is-invalid');
            } else {
                feedbackInput.removeClass('is-invalid');
            }
        });

        if (invalid) {
            Swal.fire('Peringatan', 'Feedback wajib diisi untuk material yang dipilih.', 'warning');
            return;
        }

        Swal.fire({
            title: 'Simpan feedback customer?',
            html: 'ID PS: <strong>' + idPs + '</strong><br>Material dipilih: <strong>' + selectedRows.length + '</strong>',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (result.isConfirmed) {
                // Remove disabled checkboxes from form before submit
                $('.item-select:disabled').prop('name', '');
                
                btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');
                $('#form-feedcs').submit();
            }
        });
    });

    @if (Session::has('message'))
        @php
            $msg  = Session::get('message');
            $cls  = Session::get('class', 'info');
            $icon = $cls === 'success' ? 'success' : ($cls === 'danger' || $cls === 'error' ? 'error' : 'info');
        @endphp
        Swal.fire({ icon: '{{ $icon }}', title: '{{ $cls === "success" ? "Berhasil!" : "Info" }}', text: '{{ addslashes($msg) }}' });
    @endif
});
</script>
@endpush

@endsection