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

@push('style')
@endpush

@section('content')
    <div class="card card-border bg-white">
        <div class="card-body">
            <form id="form-create-permission">
                <div class="mb-3">
                    <label for="id_order" class="label">Order List</label>
                    <select id="id_order" class="select-order" style="width: 100%"title="Select Order..">
                    </select>
                </div>
                <div id="container_multiple_input_parent">
                    <div class="border border-gray-300 border-dashed p-4 mb-3 rounded-xl multiple_input_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_part">
                                <i data-lucide="trash"></i>
                            </button>
                        </div>
                        <div class="mb-3 w-full">
                            <label class="label">Nama Part</label>
                            <select name="id_category_part[]" class="select-part w-full mt-2" style="width: 100%"
                                required></select>
                        </div>
                        <div class="mb-3 w-full">
                            <label class="label">Maklumat Part</label>
                            <input type="text" name="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="price[]" class="input w-full mt-2"
                                    placeholder="Ketik disini....">
                            </div>
                            <div class="mb-3 w-full">
                                <label class="label">Deposit</label>
                                <input type="number" name="deposit[]" class="input w-full mt-2"
                                    placeholder="Ketik disini....">
                            </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="part_order_date[]" class="input w-full mt-2"
                                    placeholder="Ketik disini....">
                            </div>
                            <div class="mb-3 w-full">
                                <label class="label">Anggaran Part Sampai</label>
                                <select name="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_part" class="btn btn-outline border-gray-300">
                        <i data-lucide="plus"></i> Tambah Part
                    </button>
                </div>
                <div>
                    <button type="button" id="submit-product" class="btn btn-info text-white"> <i data-lucide="check"></i>
                        Submit</button>
                    <button onclick="window.location.href='/permission'" type="button" class="btn btn-error text-white"> <i
                            data-lucide="x"></i> Cancel</button>
                </div>
            </form>
        </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 maxInputs = 5;


            function initSelectPart($element) {
                $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
                                    };
                                })
                            };
                        }
                    }
                });
            }


            function initSelectOrder($element) {
                $element.select2({
                    placeholder: "Pilih order...",
                    allowClear: true,
                    ajax: {
                        url: "/api/order/list",
                        dataType: "json",
                        delay: 300,
                        data: function(params) {
                            return {
                                search: params.term || "",
                                page: params.page || 1,
                                per_page: 10
                            };
                        },
                        processResults: function(response, params) {
                            params.page = params.page || 1;
                            return {
                                results: $.map(response.data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.order_id + " - " + item.customer_name
                                    }
                                }),
                                pagination: {
                                    more: response.pagination.more
                                }
                            };
                        }
                    }
                });
            }


            function validateDeposit($item) {
                const price = parseFloat($item.find('input[name="price[]"]').val()) || 0;
                const deposit = parseFloat($item.find('input[name="deposit[]"]').val()) || 0;
                if (deposit > price) {
                    alert('Deposit tidak boleh lebih besar dari harga!');
                    $item.find('input[name="deposit[]"]').val(price);
                }
            }

            $(document).on('input', 'input[name="price[]"], input[name="deposit[]"]', function() {
                const $item = $(this).closest('.multiple_input_item');
                validateDeposit($item);
            });


            initSelectOrder($('.select-order'));
            initSelectPart($('.select-part'));

            $('#btn_add_part').click(function(e) {
                e.preventDefault();

                const currentCount = $('#container_multiple_input_parent .multiple_input_item').length;
                if (currentCount >= maxInputs) {
                    alert('Maksimal 5 part saja!');
                    return;
                }

                const $template = $('#container_multiple_input_parent .multiple_input_item:first');
                const $clone = $template.clone(false, false);


                $clone.find('.select2-container').remove();


                const $selectPart = $(
                    '<select name="id_category_part[]" class="select-part w-full mt-2" style="width: 100%" required></select>'
                );
                $clone.find('select[name="id_category_part[]"]').replaceWith($selectPart);


                $clone.find('input').val('');
                $clone.find('select[name="estimated_delivery[]"]').val('');


                $('#container_multiple_input_parent').append($clone);


                initSelectPart($selectPart);


                lucide.createIcons();
            });


            $(document).on('click', '.btn_remove_part', function() {
                const items = $('#container_multiple_input_parent .multiple_input_item');
                if (items.length > 1) {
                    $(this).closest('.multiple_input_item').remove();
                } else {
                    alert('Minimal harus ada 1 part!');
                }
            });


            $('#submit-product').click(function(e) {
                e.preventDefault();

                const id_order = $('#id_order').val();
                if (!id_order) {
                    alert('Order harus dipilih!');
                    return;
                }

                const details = [];
                let isValid = true;

                $('#container_multiple_input_parent .multiple_input_item').each(function(index) {
                    const item = $(this);
                    const id_category_part = item.find('select[name="id_category_part[]"]').val();
                    const price = item.find('input[name="price[]"]').val();

                    if (!id_category_part) {
                        alert('Part #' + (index + 1) + ': Nama part harus dipilih!');
                        isValid = false;
                        return false;
                    }

                    if (!price || parseFloat(price) < 0) {
                        alert('Part #' + (index + 1) + ': Harga harus diisi!');
                        isValid = false;
                        return false;
                    }

                    details.push({
                        id_category_part: id_category_part,
                        section_information: item.find(
                            'input[name="section_information[]"]').val(),
                        price: parseFloat(price),
                        deposit: parseFloat(item.find('input[name="deposit[]"]').val()) ||
                            0,
                        part_order_date: item.find('input[name="part_order_date[]"]').val(),
                        estimated_delivery: item.find('select[name="estimated_delivery[]"]')
                            .val(),
                        status: 0
                    });
                });

                if (!isValid) return;

                $.ajax({
                    url: '/api/order-part',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        id_order: id_order,
                        details: details
                    }),
                    success: function(response) {
                        if (response.success) {
                            alert('Order part berhasil dibuat!');
                            window.location.href = '/order-part';
                        } else {
                            alert('Gagal: ' + response.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, silakan coba lagi.');
                        }
                    }
                });
            });
        });
    </script>
@endpush