@extends('layouts.app')
@section('title_header')
    Edit Order Part
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => '/'],
        ['label' => 'Order Part', 'url' => '/order-part'],
        ['label' => 'Edit Order Part', 'url' => '/order-part/edit'],
    ]" />
@endsection

@section('content')
    <div class="card card-border bg-white mb-4">
        <div class="card-body">
            <h2 class="font-bold text-lg mb-4">Edit Part</h2>
            <form id="form-edit-order-part">
                <input type="hidden" id="detail_id" value="{{ request()->route('id') }}">
                <input type="hidden" id="id_order">

                <div class="mb-3">
                    <label class="label">Nama Part</label>
                    <input type="text" id="name_part" class="input w-full mt-2">
                </div>
                <div class="mb-3">
                    <label class="label">Maklumat Part</label>
                    <input type="text" id="section_information" class="input w-full mt-2">
                </div>
                <div class="flex flex-row gap-3">
                    <div class="mb-3 w-full">
                        <label class="label">Harga</label>
                        <input type="number" id="price" class="input w-full mt-2">
                    </div>
                    <div class="mb-3 w-full">
                        <label class="label">Deposit</label>
                        <input type="number" id="deposit" class="input w-full mt-2">
                    </div>
                </div>
                <div class="flex flex-row gap-3">
                    <div class="mb-3 w-full">
                        <label class="label">Tarikh Order Part</label>
                        <input type="date" id="part_order_date" class="input w-full mt-2">
                    </div>
                    <div class="mb-3 w-full">
                        <label class="label">Anggaran Part Sampai</label>
                        <select id="estimated_delivery" class="select w-full mt-2">
                            <option value="1 Minggu">1 Minggu</option>
                            <option value="2 Minggu">2 Minggu</option>
                            <option value="3 Minggu">3 Minggu</option>
                        </select>
                    </div>
                </div>

                <div>
                    <button type="button" id="submit-update" class="btn btn-info text-white">
                        <i data-lucide="check"></i> Update
                    </button>
                    <button onclick="window.location.href='/order-part'" type="button" class="btn btn-error text-white">
                        <i data-lucide="x"></i> Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Tambah Part Baru --}}
    <div class="card card-border bg-white">
        <div class="card-body">
            <h2 class="font-bold text-lg mb-4">Tambah Part Baru</h2>
            <div id="container_new_parts">
                <div class="border border-gray-300 border-dashed p-4 mb-3 rounded-xl new_part_item relative">
                    <div class="text-right mt-2 absolute right-3 -top-1">
                        <button type="button" class="btn btn-sm btn-circle p-2 btn-error text-white btn_remove_new_part">
                            <i data-lucide="trash"></i>
                        </button>
                    </div>
                    <div class="mb-3 w-full">
                        <label class="label">Nama Part</label>
                        <input type="text" name="new_name_part[]" class="input w-full mt-2" placeholder="Ketik disini....">
                    </div>
                    <div class="mb-3 w-full">
                        <label class="label">Maklumat Part</label>
                        <input type="text" name="new_section_information[]" class="input w-full mt-2" placeholder="Ketik disini....">
                    </div>
                    <div class="flex flex-row gap-3">
                        <div class="mb-3 w-full">
                            <label class="label">Harga</label>
                            <input type="number" name="new_price[]" class="input w-full mt-2" placeholder="0">
                        </div>
                        <div class="mb-3 w-full">
                            <label class="label">Deposit</label>
                            <input type="number" name="new_deposit[]" class="input w-full mt-2" placeholder="0">
                        </div>
                    </div>
                    <div class="flex flex-row gap-3">
                        <div class="mb-3 w-full">
                            <label class="label">Tarikh Order Part</label>
                            <input type="date" name="new_part_order_date[]" class="input w-full mt-2">
                        </div>
                        <div class="mb-3 w-full">
                            <label class="label">Anggaran Part Sampai</label>
                            <select name="new_estimated_delivery[]" class="select w-full mt-2">
                                <option value="1 Minggu">1 Minggu</option>
                                <option value="2 Minggu">2 Minggu</option>
                                <option value="3 Minggu">3 Minggu</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 mb-3">
                <button type="button" id="btn_add_new_part" class="btn btn-outline border-gray-300">
                    <i data-lucide="plus"></i> Tambah Part
                </button>
            </div>
            <div>
                <button type="button" id="submit-add-parts" class="btn btn-success text-white">
                    <i data-lucide="check"></i> Simpan Part Baru
                </button>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <script>
        $(document).ready(function() {
            const detailId = $('#detail_id').val();
            const maxNewParts = 5;

            // 🔹 Inisialisasi Select2 untuk Nama Part
            function initSelectPart($element, selectedId = null, selectedText = null) {
                $element.select2({
                    placeholder: "Pilih nama part...",
                    allowClear: true,
                    ajax: {
                        url: "/api/category-order-part",
                        dataType: "json",
                        delay: 250,
                        processResults: function(response) {
                            return {
                                results: $.map(response.data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.name
                                    };
                                })
                            };
                        }
                    }
                });

                // Jika sudah ada nilai (edit mode), set nilai default
                if (selectedId && selectedText) {
                    const option = new Option(selectedText, selectedId, true, true);
                    $element.append(option).trigger('change');
                }
            }

            // 🔹 Ambil data detail part untuk prefill form
            $.ajax({
                url: `/api/order-part/${detailId}`,
                type: 'GET',
                success: function(res) {
                    if (res.success) {
                        const data = res.data;

                        // Ganti input nama_part → select
                        $('#name_part').replaceWith(`
                            <select id="id_category_part" class="select-part w-full mt-2" style="width:100%" required></select>
                        `);

                        // Init Select2 dengan nilai yang sudah ada
                        initSelectPart(
                            $('#id_category_part'),
                            data.category_part?.id,
                            data.category_part?.name
                        );

                        // Isi field lain
                        $('#section_information').val(data.section_information);
                        $('#price').val(data.price);
                        $('#deposit').val(data.deposit);
                        $('#part_order_date').val(data.part_order_date);
                        $('#estimated_delivery').val(data.estimated_delivery);
                        // Simpan id_order dari relasi orderPart
                        if (data.order_part) {
                            $('#id_order').val(data.order_part.id_order);
                        }
                        lucide.createIcons(); // render icon jika perlu
                    } else {
                        alert("Gagal ambil data detail order part.");
                        window.location.href = '/order-part';
                    }
                },
                error: function() {
                    alert("Terjadi kesalahan saat mengambil data.");
                    window.location.href = '/order-part';
                }
            });

            // 🔹 Validasi deposit tidak boleh lebih besar dari harga
            $(document).on('input', '#price, #deposit', function() {
                const price = parseFloat($('#price').val()) || 0;
                const deposit = parseFloat($('#deposit').val()) || 0;
                if (deposit > price) {
                    alert('Deposit tidak boleh lebih besar dari harga!');
                    $('#deposit').val(price);
                }
            });

            // 🔹 Submit update
            $('#submit-update').click(function(e) {
                e.preventDefault();

                const payload = {
                    id_category_part: $('#id_category_part').val(),
                    section_information: $('#section_information').val(),
                    price: parseFloat($('#price').val()) || 0,
                    deposit: parseFloat($('#deposit').val()) || 0,
                    part_order_date: $('#part_order_date').val(),
                    estimated_delivery: $('#estimated_delivery').val(),
                    status: 0
                };

                if (!payload.id_category_part) {
                    alert('Nama part harus dipilih!');
                    return;
                }

                $.ajax({
                    url: `/api/order-part/update/${detailId}`,
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(payload),
                    success: function(res) {
                        if (res.success) {
                            alert('Detail order part berhasil diupdate!');
                            window.location.href = '/order-part';
                        } else {
                            alert('Update gagal: ' + res.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.data;
                            let msg = '';
                            $.each(errors, function(key, value) {
                                msg += value + '\n';
                            });
                            alert("Validation error:\n" + msg);
                        } else {
                            alert("Terjadi kesalahan saat update.");
                        }
                    }
                });
            });

            // 🔹 Tambah baris part baru
            $('#btn_add_new_part').click(function(e) {
                e.preventDefault();
                const currentCount = $('#container_new_parts .new_part_item').length;
                if (currentCount >= maxNewParts) {
                    alert('Maksimal 5 part baru sahaja!');
                    return;
                }
                const newItem = $('#container_new_parts .new_part_item:first').clone();
                newItem.find('input').val('');
                newItem.find('select').val('1 Minggu');
                $('#container_new_parts').append(newItem);
            });

            // 🔹 Hapus baris part baru
            $(document).on('click', '.btn_remove_new_part', function() {
                const items = $('#container_new_parts .new_part_item');
                if (items.length > 1) {
                    $(this).closest('.new_part_item').remove();
                } else {
                    alert('Minimal harus ada 1 part!');
                }
            });

            // 🔹 Submit part baru
            $('#submit-add-parts').click(function(e) {
                e.preventDefault();
                const idOrder = $('#id_order').val();
                if (!idOrder) {
                    alert('Data order belum termuat. Sila tunggu sebentar dan cuba lagi.');
                    return;
                }

                const details = [];
                $('#container_new_parts .new_part_item').each(function() {
                    const item = $(this);
                    details.push({
                        name_part: item.find('input[name="new_name_part[]"]').val(),
                        section_information: item.find('input[name="new_section_information[]"]').val(),
                        price: parseFloat(item.find('input[name="new_price[]"]').val()) || 0,
                        deposit: parseFloat(item.find('input[name="new_deposit[]"]').val()) || 0,
                        part_order_date: item.find('input[name="new_part_order_date[]"]').val(),
                        estimated_delivery: item.find('select[name="new_estimated_delivery[]"]').val(),
                        status: 0
                    });
                });

                $.ajax({
                    url: '/api/order-part',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({ id_order: idOrder, details: details }),
                    success: function(res) {
                        if (res.success) {
                            alert('Part baru berjaya ditambah!');
                            window.location.href = '/order-part';
                        } else {
                            alert('Gagal: ' + res.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.data;
                            let msg = '';
                            $.each(errors, function(key, value) {
                                msg += value + '\n';
                            });
                            alert("Validation error:\n" + msg);
                        } else {
                            alert('Terjadi kesalahan, sila cuba lagi.');
                        }
                    }
                });
            });
        });
    </script>
@endpush