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

@push('style')
@endpush

@section('content')
    <!-- Data Size --->
    @php
        $size = [
            ['size' => '24 Inch'],
            ['size' => '32 Inch'],
            ['size' => '40 Inch'],
            ['size' => '42 Inch'],
            ['size' => '50 Inch'],
            ['size' => '55 Inch'],
            ['size' => '60 Inch'],
            ['size' => '65 Inch'],
            ['size' => '70 Inch'],
            ['size' => '75 Inch'],
        ];
    @endphp
    <!-- End Data Size --->

    <section>
        <div class="card card-border bg-white">
            <div class="card-body">
                <form id="form-edit">
                    <div class="mb-5">
                        <p class="card-title">Gambar Produk</p>
                        <div class="grid lg:grid-cols-2 grid-cols-1 mt-3 w-full gap-3">
                            <div>
                                <div class="mb-2">
                                    <label for="front_image" class="label">Gambar Depan</label>
                                </div>
                                <input type="file" class="file-input w-full" name="front_image" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="serial_number_image" class="label">Gambar Nomor Seri</label>
                                </div>
                                <input type="file" class="file-input w-full" name="serial_number_image" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="back_image" class="label">Gambar Belakang</label>
                                </div>
                                <input type="file" class="file-input w-full" name="back_image" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-5">
                        <p class="card-title">Detail Produk</p>
                        <div class="grid lg:grid-cols-2 grid-cols-1 mt-3 w-full gap-3">
                            <div>
                                <div class="mb-2">
                                    <label for="customer_name" class="label">Nama Pelanggan</label>
                                </div>
                                <input type="text" class="input w-full" name="customer_name"
                                    placeholder="Ketik disini..." id="customer_name" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="phone_number" class="label">No. telefon</label>
                                </div>
                                <input type="text" class="input w-full" name="phone_number" placeholder="Ketik disini..."
                                    id="phone_number" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="delivery_date" class="label">Tarikh Hantar</label>
                                </div>
                                <input type="date" class="input w-full" name="delivery_date" id="delivery_date" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="id_brand" class="label">Jenama</label>
                                </div>
                                <select class="select w-full" name="id_brand" id="id_brand">
                                    <option disabled selected>Jenama</option>
                                </select>
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="product_type" class="label">Jenis Peralatan Elektronik</label>
                                </div>
                                <select class="select w-full" name="product_type" id="product_type">
                                    <option disabled selected>Pilih Jenis</option>
                                    @foreach ($electronicTypes as $type)
                                        <option value="{{ $type }}">{{ $type }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="size" class="label">Saiz</label>
                                </div>
                                <input type="text" name="size" class="input w-full cursor-pointer"
                                    onclick="input_size.showModal()" id="size" readonly
                                    placeholder="Sila pilih saiz tv..">
                            </div>
                        </div>
                    </div>
                    <div class="mb-5">
                        <p class="card-title">Progress Service</p>
                        <div class="grid lg:grid-cols-2 grid-cols-1 mt-3 w-full gap-3">
                            <div>
                                <div class="mb-2">
                                    <label for="model_number" class="label">Model Number</label>
                                </div>
                                <input type="text" class="input w-full" name="model_number" placeholder="Ketik disini..."
                                    id="model_number" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="damage_info" class="label">Maklumat Kerosakan</label>
                                </div>
                                <input type="text" class="input w-full" name="damage_info" placeholder="Ketik disini..."
                                    id="damage_info" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="repair_info" class="label">Maklumat Pembaikan</label>
                                </div>
                                <input type="text" class="input w-full" name="repair_info" placeholder="Ketik disini..."
                                    id="repair_info" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="id_received" class="label">Diterima Oleh</label>
                                </div>
                                <select class="select w-full" name="id_received" id="select-received">
                                    <option disabled selected>Pilih Option</option>
                                    <!-- Tambahkan opsi sesuai user -->
                                </select>
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="id_status" class="label">Status Progress</label>
                                </div>
                                <select class="select w-full" name="id_status" id="id_status">
                                    <option disabled selected>Pilih Option</option>
                                </select>
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="client_info" class="label">Inform Client</label>
                                </div>
                                <input type="text" class="input w-full" name="client_info"
                                    placeholder="Ketik disini..." id="client_info" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="pickup_date" class="label">Tarikh Ambil</label>
                                </div>
                                <input type="date" class="input w-full" name="pickup_date" id="pickup_date" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="price" class="label">Jumlah Repair</label>
                                </div>
                                <input type="number" step="0.01" class="input w-full" name="price" placeholder="RM"
                                    id="price" />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="checking_cost" class="label">Kos Checking</label>
                                </div>
                                <input type="number" step="0.01" class="input w-full" name="checking_cost"
                                    placeholder="RM" id="checking_cost" />
                            </div>
                            {{-- <div>
                                <div class="mb-2">
                                    <label for="payment_status" class="label">Status Bayaran</label>
                                </div>
                                <select class="select w-full" name="payment_status" id="payment_status">
                                    <option disabled selected>Pilih Option</option>
                                    <option value="paid">Sudah Bayar</option>
                                    <option value="unpaid">Belum Bayar</option>
                                </select>
                            </div> --}}
                            <div>
                                <div class="mb-2">
                                    <label for="id_handed" class="label">Penyerahan Oleh</label>
                                </div>
                                <select class="select w-full" name="id_handed" id="select-handed">
                                    <option disabled selected>Pilih Option</option>
                                    <!-- Tambahkan opsi user -->
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-5">
                        <p class="card-title">Barangan Tambahan</p>
                        <div id="additional-items-wrapper" class="mt-3 flex flex-col gap-2">
                            <div class="flex gap-2 additional-item-row">
                                <input type="text" class="input w-full" name="additional_items[]"
                                    placeholder="Nama barangan..." />
                                <button type="button" class="btn btn-error btn-sm text-white remove-item-btn">
                                    <i data-lucide="x"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" id="add-item-btn" class="btn btn-outline btn-sm mt-2">
                            <i data-lucide="plus"></i> Tambah
                        </button>
                    </div>
                    <div class="mb-5">
                        <div class="mb-2">
                            <label for="note" class="label">Inspection finding</label>
                        </div>
                        <textarea name="receipt_note" id="note" class="textarea w-full" placeholder="....."></textarea>
                    </div>
                    <div>
                        <button type="button" id="submit-product" class="btn btn-info text-white"> <i
                                data-lucide="check"></i> Submit</button>
                        <button class="btn btn-error text-white"> <i data-lucide="x"></i> Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </section>


    {{-- modal sections --}}
    <dialog id="input_size" class="modal">
        <div class="modal-box w-11/12 max-w-2xl">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <h3 class="text-lg font-bold">Ukuran TV</h3>
            <div class="grid grid-cols-5 mt-4 gap-3">
                @foreach ($size as $item)
                    <button class="btn btn-sm">{{ $item['size'] }}</button>
                @endforeach
            </div>
            <div class="mt-6">
                <h3 class="text-lg font-bold">Ukuran lainnya</h3>
                <div class="mt-2">
                    <div class="mb-2">
                        <label for="" class="label">Input Ukuran Disini</label>
                    </div>
                    <input type="text" class="input w-full" name="size_custom" id="size_custom"
                        placeholder="Ketik disini...">
                </div>
                <div class="mt-3">
                    <button class="btn btn-info text-white">Simpan</button>
                </div>
            </div>
        </div>
    </dialog>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            const productId = window.location.pathname.split('/').pop();

            // Load brands
            $.get('/api/brands', function(response) {
                response.data.forEach(brand => {
                    $('#id_brand').append(`<option value="${brand.id}">${brand.name}</option>`);
                });
            });
            $.get('/api/status-product', function(response) {
                response.data.forEach(status => {
                    $('#id_status').append(`<option value="${status.id}">${status.name}</option>`);
                });
            });

            // Load users
            $.get('/api/user-management/user/active', function(response) {
                response.data.forEach(user => {
                    const option = `<option value="${user.id}">${user.name}</option>`;
                    $('#select-handed').append(option);
                    $('#select-received').append(option);
                });

                // Load product data
                $.get(`/api/products/edit/${productId}`, function(response) {
                    const product = response.data;
                    $('#customer_name').val(product.customer_name);
                    $('#phone_number').val(product.phone_number);
                    $('#delivery_date').val(product.delivery_date);
                    $('#id_brand').val(product.id_brand);
                    $('#product_type').val(product.product_type);
                    $('#size').val(product.size);
                    $('#model_number').val(product.model_number);
                    $('#damage_info').val(product.damage_info);
                    $('#repair_info').val(product.repair_info);
                    $('#select-received').val(product.id_received);
                    $('#select-handed').val(product.id_handed);
                    $('#pickup_date').val(product.pickup_date);
                    $('#price').val(product.price);
                    $('#checking_cost').val(product.checking_cost);
                    $('#client_info').val(product.client_info);
                    $('#payment_status').val(product.payment_status);
                    $('#id_status').val(product.id_status);
                    $('#note').val(product.receipt_note);

                    if (product.additional_items && product.additional_items.length > 0) {
                        $('#additional-items-wrapper').empty();
                        product.additional_items.forEach(function(item) {
                            $('#additional-items-wrapper').append(`
                                <div class="flex gap-2 additional-item-row">
                                    <input type="text" class="input w-full" name="additional_items[]" value="${item}" placeholder="Nama barangan..." />
                                    <button type="button" class="btn btn-error btn-sm text-white remove-item-btn"><i data-lucide="x"></i></button>
                                </div>
                            `);
                        });
                        lucide.createIcons();
                    }
                });
            });


            $('.image-upload-wrapper').on('click', function() {
                const inputId = $(this).data('input');
                $(`#${inputId}`).click();
            });

            $('.image-upload-input').on('change', function() {
                const input = this;
                const previewId = `#preview_${input.id}`;
                const placeholderId = `#placeholder_${input.id}`;
                if (input.files && input.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $(previewId).attr('src', e.target.result).removeClass('hidden');
                        $(placeholderId).addClass('hidden');
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            });

            $('#input_size .btn-sm').click(function() {
                const size = $(this).text();
                $('#size').val(size);
                input_size.close();
            });

            $('#input_size input[name="size"]').on('input', function() {
                $('#size').val($(this).val());
            });

            $('#input_size input#size_custom').on('input', function() {
                $('#size').val($(this).val());
            });

            $('#input_size .btn-info').click(function() {
                input_size.close();
            });

            $('#add-item-btn').click(function() {
                $('#additional-items-wrapper').append(`
                    <div class="flex gap-2 additional-item-row">
                        <input type="text" class="input w-full" name="additional_items[]" placeholder="Nama barangan..." />
                        <button type="button" class="btn btn-error btn-sm text-white remove-item-btn"><i data-lucide="x"></i></button>
                    </div>
                `);
                lucide.createIcons();
            });

            $(document).on('click', '.remove-item-btn', function() {
                if ($('.additional-item-row').length > 1) {
                    $(this).closest('.additional-item-row').remove();
                }
            });

            $('#submit-product').on('click', function() {
                $('#form-edit').submit();
            });

            $('#form-edit').on('submit', function(e) {
                e.preventDefault();

                let formData = new FormData(this);

                $.ajax({
                    url: `/api/products/update/${productId}`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        toastr.success('Produk berhasil diupdate!');
                        setTimeout(() => {
                            window.location.href = '/products';
                        }, 1500);
                    },
                    error: function(xhr) {
                        if (xhr.status === 400) {
                            let errors = xhr.responseJSON.errors;
                            let messages = Object.values(errors).flat().join("<br>");
                            toastr.error(messages, 'Validasi Gagal');
                        } else {
                            toastr.error('Terjadi kesalahan pada server', 'Gagal');
                        }
                    }
                });
            });
        });
    </script>
@endpush