@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection

@section('content') 
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                    </div>
                    <div class="card-body">
                        <form id="formID" method="post" action="{{ route('item_requests.store', ['prm_id' => $data->id]) }}">
                            @csrf

                            <!-- Info SPB Regular dari SO -->
                            @if($data->id && $data->request_type == 'Regular' && $data->stockOpname)
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="alert alert-info alert-sm">
                                        <i class="fas fa-info-circle"></i>
                                        <strong>SPB Regular</strong> - Dibuat otomatis dari Stock Opname:
                                        <a href="{{ route('stock_opnames.show', $data->stockOpname->id) }}" target="_blank" class="alert-link">
                                            <strong>{{ $data->stockOpname->so_number }}</strong>
                                        </a>
                                        ({{ $data->stockOpname->so_date->format('d M Y') }})
                                    </div>
                                </div>
                            </div>
                            @endif
                            <!-- Header Information -->
                            <div class="row mb-4">
                                <!-- Hidden fields -->
                                @if($data->id)
                                <input type="hidden" name="request_type" value="{{ $data->request_type }}">
                                <input type="hidden" name="stock_opname_id" value="{{ $data->stock_opname_id }}">
                                @else
                                <input type="hidden" name="request_type" value="Additional">
                                <input type="hidden" name="stock_opname_id" value="">
                                @endif
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label for="dc_id">DC <span class="text-danger">*</span></label>
                                        <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="dc_id" id="dc_id" style="width:100%" required>
                                            <option value="">-- Pilih DC --</option>
                                            @foreach($variables['store_dcs'] ?? [] as $storeDc)
                                            <option value="{{ $storeDc->dc_id }}"
                                                {{ old('dc_id', $data->dc_id ?? '') == $storeDc->dc_id ? 'selected' : '' }}>
                                                {{ $storeDc->dc->code ?? '' }} - {{ $storeDc->dc->name ?? '' }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label for="shipment_dc_id">Jadwal Pengiriman</label>
                                        <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="shipment_schedule_id" id="shipment_dc_id" style="width:100%"
                                            data-selected="{{ old('shipment_schedule_id', $data->shipment_schedule_id ?? '') }}" disabled>
                                            <option value="" data-delivery-day="">-- Pilih DC terlebih dahulu --</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label for="request_date">Tanggal SPB <span class="text-danger">*</span></label>
                                        <input value="{{ old('request_date', $data->request_date ?? date('Y-m-d')) }}" type="date" class="form-control" name="request_date" id="request_date" min="{{ date('Y-m-d') }}" required>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label for="delivery_date">Tanggal Pengiriman</label>
                                        <input value="{{ old('delivery_date', isset($data->delivery_date) && $data->delivery_date ? (is_string($data->delivery_date) ? $data->delivery_date : $data->delivery_date->format('Y-m-d')) : '') }}" type="date" class="form-control" name="delivery_date" id="delivery_date">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="d-flex">
                                        <div class="flex-grow-1 mr-2">
                                            <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" id="rm-picker" style="width:100%" disabled>
                                                <option value="">-- Pilih DC terlebih dahulu --</option>
                                            </select>
                                        </div>
                                        <button type="button" class="btn btn-success btn-sm flex-shrink-0" id="add-item" style="white-space:nowrap">
                                            <i class="fa fa-plus"></i> Tambahkan
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Items Section -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-sm" id="items-table">
                                            <thead class="bg-warning">
                                                <tr>
                                                    <th width="5%">No</th>
                                                    <th>Item</th>
                                                    <th width="15%">UOM Kirim</th>
                                                    <th width="20%">Qty (Kirim)</th>
                                                    <th width="25%">Catatan</th>
                                                    <th width="5%">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody id="items-tbody">
                                                @if(isset($data->details) && count($data->details) > 0)
                                                @foreach($data->details as $index => $detail)
                                                @php
                                                    $item    = $detail->rawMaterial;
                                                    $uom_kirim = $detail->uom_kirim ?? '';
                                                    $isNR    = $item && $item->flag_item_non_regular;
                                                @endphp
                                                <tr data-rm-id="{{ $detail->raw_material_id }}">
                                                    <td class="text-center">{{ $index + 1 }}</td>
                                                    <td>
                                                        <strong>{{ $item->code ?? '' }}</strong> | {{ $item->name ?? '' }}
                                                        @if($isNR)<span class="badge badge-info ml-1">NR</span>@endif
                                                        <input type="hidden" name="items[{{ $index }}][raw_material_id]" value="{{ $detail->raw_material_id }}">
                                                        <input type="hidden" name="items[{{ $index }}][uom_kirim]" value="{{ $detail->uom_kirim ?? $uom_kirim }}">
                                                    </td>
                                                    <td>{{ $uom_kirim }}</td>
                                                    <td>
                                                        <input type="number" step="1" min="0"
                                                            class="form-control text-right"
                                                            name="items[{{ $index }}][qty]"
                                                            value="{{ $detail->qty ?? 0 }}"
                                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                    </td>
                                                    <td><input type="text" class="form-control" name="items[{{ $index }}][notes]" value="{{ $detail->notes }}"></td>
                                                    <td><button type="button" class="btn btn-danger btn-sm remove-item"><i class="fa fa-trash"></i></button></td>
                                                </tr>
                                                @endforeach
                                                @else
                                                <tr id="empty-row">
                                                    <td colspan="6" class="text-center text-muted text-sm">Belum ada item. Pilih item di atas lalu klik "Tambah Item".</td>
                                                </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Notes -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="notes">Catatan</label>
                                        <textarea class="form-control" name="notes" placeholder="" style="height: 100px">{{ old('notes', $data->notes ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-info btn-sm button-cek-permission" data-permission="item_requests.store"><i class="fas fa-save"></i> Simpan SPB</button>
                            <a href="{{ route('item_requests.index') }}" class="btn btn-warning btn-sm" data='back' onclick="return notificationBeforeBack(event, this);"> <i class="fas fa-arrow-left"></i> Kembali</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<script>
$(document).ready(function () {
    let itemIndex = parseInt("{{ isset($data->details) ? count($data->details) : 0 }}");

    // ── Jadwal Pengiriman Logic ───────────────────────────────────────────────
    const dayNameToIndex = {
        // Nama penuh
        'Minggu': 0, 'Senin': 1, 'Selasa': 2, 'Rabu': 3,
        'Kamis': 4, 'Jumat': 5, 'Sabtu': 6,
        // Singkatan
        'MIN': 0, 'SEN': 1, 'SEL': 2, 'RAB': 3,
        'KAM': 4, 'JUM': 5, 'SAB': 6
    };

    function getNextDeliveryDate(requestDateStr, deliveryDayName) {
        if (!requestDateStr || !deliveryDayName || !(deliveryDayName in dayNameToIndex)) return '';

        const requestDate = new Date(requestDateStr + 'T00:00:00');
        const targetDow = dayNameToIndex[deliveryDayName];
        const requestDow = requestDate.getDay();

        let daysAhead = targetDow - requestDow;
        if (daysAhead < 0) daysAhead += 7; // hari sudah lewat minggu ini, ambil minggu depan

        const deliveryDate = new Date(requestDate);
        deliveryDate.setDate(requestDate.getDate() + daysAhead);

        // Format ke YYYY-MM-DD
        const y = deliveryDate.getFullYear();
        const m = String(deliveryDate.getMonth() + 1).padStart(2, '0');
        const d = String(deliveryDate.getDate()).padStart(2, '0');
        return `${y}-${m}-${d}`;
    }

    function applyShipmentSchedule() {
        const selectedVal = $('#shipment_dc_id').val();
        const deliveryDay = selectedVal
            ? $('#shipment_dc_id option[value="' + selectedVal + '"]').data('delivery-day')
            : null;
        const requestDate = $('#request_date').val();
        const $deliveryDate = $('#delivery_date');

        if (deliveryDay) {
            // Jadwal dipilih: auto-fill dan readonly
            const autoDate = getNextDeliveryDate(requestDate, deliveryDay);
            $deliveryDate.val(autoDate).prop('readonly', true).prop('min', '');
        } else {
            // Own Courier: manual, min = request_date
            $deliveryDate.prop('readonly', false);
            if (requestDate) {
                $deliveryDate.attr('min', requestDate);
                // Jika delivery_date < request_date, reset
                if ($deliveryDate.val() && $deliveryDate.val() < requestDate) {
                    $deliveryDate.val(requestDate);
                }
            }
        }
    }

    // ── DC change: load items via AJAX & filter Jadwal Pengiriman ────────────
    const storeId = '{{ session("store_selected") ?? ($data->store_id ?? "") }}';
    const dayMap  = {'MIN':'Kedatangan Minggu','SEN':'Kedatangan Senin','SEL':'Kedatangan Selasa','RAB':'Kedatangan Rabu','KAM':'Kedatangan Kamis','JUM':'Kedatangan Jumat','SAB':'Kedatangan Sabtu'};
    const savedShipmentId = $('#shipment_dc_id').data('selected');

    function applyDcFilter() {
        const dcId = $('#dc_id').val();

        if (!dcId) {
            // Reset & disable both selects
            $('#shipment_dc_id').empty()
                .append('<option value="" data-delivery-day="">-- Pilih DC terlebih dahulu --</option>')
                .prop('disabled', true).trigger('change.select2');
            $('#rm-picker').empty()
                .append('<option value="">-- Pilih DC terlebih dahulu --</option>')
                .prop('disabled', true).trigger('change.select2');
            return;
        }

        // 1. Load Jadwal Pengiriman via AJAX
        $('#shipment_dc_id').empty()
            .append('<option value="" data-delivery-day="">Memuat jadwal...</option>')
            .prop('disabled', true).trigger('change.select2');

        $.ajax({
            url: '{{ route("item_requests.shipments_by_dc") }}',
            type: 'GET',
            data: { dc_id: dcId, store_id: storeId },
            success: function (response) {
                $('#shipment_dc_id').empty()
                    .append('<option value="" data-delivery-day="">Own Courier</option>');

                if (response.success && response.shipments.length) {
                    response.shipments.forEach(function (sd) {
                        const label = `${sd.code} | ${dayMap[sd.delivery_day] || sd.delivery_day}`;
                        const selected = String(sd.id) === String(savedShipmentId) ? 'selected' : '';
                        $('#shipment_dc_id').append(
                            `<option value="${sd.id}" data-delivery-day="${sd.delivery_day}" ${selected}>${label}</option>`
                        );
                    });
                }

                $('#shipment_dc_id').prop('disabled', false).trigger('change.select2');
                applyShipmentSchedule();
            },
            error: function () {
                $('#shipment_dc_id').empty()
                    .append('<option value="">Gagal memuat jadwal</option>')
                    .prop('disabled', true).trigger('change.select2');
            }
        });

        // 2. Load items via AJAX
        $('#rm-picker').empty()
            .append('<option value="">Memuat item...</option>')
            .prop('disabled', true).trigger('change.select2');

        $.ajax({
            url: '{{ route("item_requests.items_by_dc") }}',
            type: 'GET',
            data: { dc_id: dcId, store_id: storeId },
            success: function (response) {
                if (!response.success) return;

                const items = response.items;
                let regularHtml = '';
                let nrHtml = '';

                items.forEach(function (item) {
                    const label = item.type === 'NR'
                        ? `[NR] ${item.code} - ${item.name} (${item.uom})`
                        : `${item.code} - ${item.name} (${item.uom})`;

                    const opt = `<option value="${item.id}"
                        data-type="${item.type}"
                        data-code="${item.code}"
                        data-name="${item.name}"
                        data-uom="${item.uom}"
                        data-has-conversion="${item.has_conversion ? '1' : '0'}"
                        data-flag-today="${item.flag_today ? '1' : '0'}"
                        >${label}</option>`;

                    if (item.type === 'NR') nrHtml += opt;
                    else regularHtml += opt;
                });

                $('#rm-picker').empty().append('<option value="">-- Pilih Item --</option>');
                if (regularHtml) $('#rm-picker').append(`<optgroup label="Raw Material">${regularHtml}</optgroup>`);
                if (nrHtml)      $('#rm-picker').append(`<optgroup label="Non-Regular" id="nr-optgroup">${nrHtml}</optgroup>`);

                $('#rm-picker').prop('disabled', false).trigger('change.select2');
            },
            error: function () {
                $('#rm-picker').empty()
                    .append('<option value="">Gagal memuat item</option>')
                    .prop('disabled', true).trigger('change.select2');
            }
        });
    }

    $('#dc_id').on('change', applyDcFilter);

    // Init on page load
    applyDcFilter();

    // Trigger saat jadwal berubah
    $('#shipment_dc_id').on('change', applyShipmentSchedule);

    // Trigger saat request_date berubah
    $('#request_date').on('change', function () {
        const today = new Date().toISOString().split('T')[0];
        if ($(this).val() < today) {
            $(this).val(today);
        }
        applyShipmentSchedule();
    });

    // Init saat halaman load
    applyShipmentSchedule();

    // Guard delivery_date manual input (Own Courier mode)
    $('#delivery_date').on('change', function () {
        const minDate = $(this).attr('min');
        if (minDate && $(this).val() < minDate) {
            $(this).val(minDate);
        }
    });

    // ── Tambah item dari picker ───────────────────────────────────────────────
    $('#add-item').on('click', function () {
        const selected = $('#rm-picker').find(':selected');
        const rmId = $('#rm-picker').val();
        if (!rmId) {
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih item terlebih dahulu.' });
            return;
        }
        if ($(`#items-tbody tr[data-rm-id="${rmId}"]`).length > 0) {
            Swal.fire({ icon: 'warning', title: 'Duplikat', text: 'Item ini sudah ada di daftar.' });
            $('#rm-picker').val('').trigger('change');
            return;
        }

        const type          = selected.data('type') || 'R';
        const flagToday     = selected.data('flag-today');
        const code          = selected.data('code');
        const name          = selected.data('name');
        const uom           = selected.data('uom'); // sudah uom_kirim dari conversion
        const hasConversion = selected.data('has-conversion');
        const dcId          = $('#dc_id').val();

        // Validasi: item belum di-setting di Item Conversion
        if (!hasConversion || hasConversion == '0') {
            Swal.fire({
                icon: 'warning',
                title: 'Item Belum Dikonfigurasi',
                html: `Item <strong>${code} - ${name}</strong> belum di-setting di Master Item Conversion untuk DC ini.<br><br>Silakan setting terlebih dahulu agar UOM Kirim tersedia.`
            });
            $('#rm-picker').val('').trigger('change');
            return;
        }

        // Validasi flag_today untuk item NR
        if (type === 'NR') {
            const requestDate = $('#request_date').val();
            const today = new Date().toISOString().split('T')[0];
            if (requestDate === today && flagToday != 1) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak Dapat Ditambahkan',
                    text: `Item "${code} - ${name}" tidak diizinkan untuk diajukan di hari yang sama.`
                });
                $('#rm-picker').val('').trigger('change');
                return;
            }
        }

        const no = $('#items-tbody tr:not(#empty-row)').length + 1;
        const typeBadge = type === 'NR'
            ? '<span class="badge badge-info ml-1">NR</span>'
            : '';

        const newRow = `
            <tr data-rm-id="${rmId}" data-type="${type}">
                <td class="text-center">${no}</td>
                <td>
                    <strong>${code}</strong> | ${name} ${typeBadge}
                    <input type="hidden" name="items[${itemIndex}][raw_material_id]" value="${rmId}">
                    <input type="hidden" name="items[${itemIndex}][uom_kirim]" value="${uom}">
                </td>
                <td>${uom}</td>
                <td>
                    <input type="number" step="1" min="0" class="form-control text-right"
                        name="items[${itemIndex}][qty]" value="0"
                        onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                </td>
                <td><input type="text" class="form-control" name="items[${itemIndex}][notes]" value=""></td>
                <td><button type="button" class="btn btn-danger btn-sm remove-item"><i class="fa fa-trash"></i></button></td>
            </tr>`;

        $('#empty-row').remove();
        $('#items-tbody').append(newRow);
        $('#rm-picker').val('').trigger('change');
        itemIndex++;
        $('#items-tbody tr:last .form-control.text-right').focus();
    });

    // ── Hapus item ────────────────────────────────────────────────────────────
    $(document).on('click', '.remove-item', function () {
        $(this).closest('tr').remove();
        $('#items-tbody tr:not(#empty-row)').each(function (i) { $(this).find('td:first').text(i + 1); });
        if ($('#items-tbody tr').length === 0) {
            $('#items-tbody').html('<tr id="empty-row"><td colspan="6" class="text-center text-muted">Belum ada item. Pilih item di atas lalu klik "Tambah".</td></tr>');
        }
    });

    // ── Submit ────────────────────────────────────────────────────────────────
    var isSubmitting = false;
    $('#formID').on('submit', function (e) {
        e.preventDefault();
        if (isSubmitting) return;
        if ($('#items-tbody #empty-row').length || !$('#items-tbody tr').length) {
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Tambahkan minimal satu item.' });
            return;
        }
        isSubmitting = true;
        $('#loaderkdnknz').show();
        $.ajax({
            type: 'POST', url: $(this).attr('action'),
            data: new FormData(this), processData: false, contentType: false, dataType: 'json',
        })
        .done(function (data) {
            if (data[0] === 'success') {
                Swal.fire({ icon: 'success', title: 'Berhasil', text: data[1], timer: 1500, showConfirmButton: false })
                    .then(() => window.location.href = '{{ route("item_requests.index") }}');
            } else {
                Swal.fire({ icon: 'warning', title: 'Peringatan', text: data[1] });
            }
        })
        .fail(function (xhr) {
            let err = 'Terjadi kesalahan.';
            if (xhr.status === 422 && xhr.responseJSON?.errors)
                err = Object.entries(xhr.responseJSON.errors).map(([k,v]) => `<strong>${k}</strong>: ${v.join(', ')}`).join('<br>');
            else if (xhr.responseJSON?.message) err = xhr.responseJSON.message;
            Swal.fire({ icon: 'error', title: 'Gagal', html: err });
        })
        .always(function () { isSubmitting = false; $('#loaderkdnknz').hide(); });
    });
});
</script>

@endsection