@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)
                                <!-- Untuk edit, gunakan data yang ada -->
                                <input type="hidden" name="request_type" value="{{ $data->request_type }}">
                                <input type="hidden" name="stock_opname_id" value="{{ $data->stock_opname_id }}">
                                @else
                                <!-- Untuk create baru, default Additional -->
                                <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>Nomor SPB</label>
                                        <input value="{{ old('spb_number', $data->spb_number ?? 'Auto Generated') }}" type="text" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Store</label>
                                        <input type="text" class="form-control" value="{{ $store_name }}" readonly>
                                        <input type="hidden" name="store_id" id="store_id" value="{{ session('store_selected') }}">
                                    </div>
                                </div>
                                
                                <div class="col-sm-3">
                                    <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" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label for="delivery_date">Tanggal Pengiriman</label>
                                        <input value="{{ old('delivery_date', $data->delivery_date ?? '') }}" type="date" class="form-control" name="delivery_date">
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <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%"> 
                                                <option value="">-- Pilih Raw Material --</option>
                                                @foreach($variables['raw_materials'] as $rm)
                                                <option value="{{ $rm->id }}"
                                                    data-code="{{ $rm->code }}"
                                                    data-name="{{ $rm->name }}"
                                                    data-uom="{{ $rm->uom }}">
                                                    {{ $rm->code }} - {{ $rm->name }} ({{ $rm->uom }})
                                                </option>
                                                @endforeach
                                            </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> Tambah
                                        </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</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 $rm = $detail->rawMaterial; @endphp
                                                <tr data-rm-id="{{ $detail->raw_material_id }}">
                                                    <td class="text-center">{{ $index + 1 }}</td>
                                                    <td>
                                                        <strong>{{ $rm->code ?? '' }}</strong> | {{ $rm->name ?? '' }}
                                                        <input type="hidden" name="items[{{ $index }}][raw_material_id]" value="{{ $detail->raw_material_id }}">
                                                    </td>
                                                    <td>{{ $rm->uom ?? '' }}</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-list"></i> List</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



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

    // ── 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 code = selected.data('code');
        const name = selected.data('name');
        const uom  = selected.data('uom');
        const no   = $('#items-tbody tr:not(#empty-row)').length + 1;

        const newRow = `
            <tr data-rm-id="${rmId}">
                <td class="text-center">${no}</td>
                <td>
                    <strong>${code}</strong> | ${name}
                    <input type="hidden" name="items[${itemIndex}][raw_material_id]" value="${rmId}">
                </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