@extends('layouts.app')
@section('title_header')
    Detail Order
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => '/'],
        ['label' => 'Product', 'url' => '/products'],
        ['label' => 'Detail Product', 'url' => '/detail/register'],
    ]" />
@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-3 grid-cols-1 mt-3 w-full gap-3">
                            <div>
                                <div class="card-description">
                                    Gambar Depan
                                </div>
                                <div class="card card-border h-36 p-0 mt-3">
                                    <div class="card-body p-0 overflow-hidden">
                                        <img src="" alt="" id="front_image_url" class="w-full h-full object-contain">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="card-description">
                                    Gambar Nomor Seri
                                </div>
                                <div class="card card-border h-36 p-0 mt-3">
                                    <div class="card-body p-0 overflow-hidden">
                                        <img src="" alt="" id="serial_number_image_url" class="w-full h-full object-contain">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="card-description">
                                    Gambar Belakang
                                </div>
                                <div class="card card-border h-36 p-0 mt-3">
                                    <div class="card-body p-0 overflow-hidden">
                                        <img src="" alt="" id="back_image_url" class="w-full h-full object-contain">
                                    </div>
                                </div>
                            </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" readonly />
                            </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" readonly />
                            </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" readonly />
                            </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" disabled>
                                    <option disabled selected>Jenama</option>
                                </select>
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="product_type" class="label">Jenis</label>
                                </div>
                                <select class="select w-full" name="product_type" id="product_type" disabled>
                                    <option disabled selected>Jenis</option>
                                    <option value="led_biasa">LED Biasa</option>
                                    <option value="led_plasma">LED Plasma</option>
                                    <option value="led_android">LED Android</option>
                                    <option value="other">Lain Lain</option>
                                </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-3 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" readonly />
                            </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" readonly />
                            </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" readonly />
                            </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" disabled>
                                    <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" disabled>
                                    <option disabled selected>Pilih Option</option>
                                    {{-- <option value="Tidak Boleh Dibaiki">Tidak Boleh Dibaiki</option>
                                    <option value="Telah Dibaiki">Telah Dibaiki</option>
                                    <option value="Baru Dihantar">Baru Dihantar</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" readonly />
                            </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" readonly />
                            </div>
                            <div>
                                <div class="mb-2">
                                    <label for="price" class="label">Harga</label>
                                </div>
                                <input type="text" class="input w-full" name="price" placeholder="RM" id="price" readonly />
                            </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" disabled>
                                    <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" disabled>
                                    <option disabled selected>Pilih Option</option>
                                    <!-- Tambahkan opsi user -->
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-5 grid lg:grid-cols-2 grid-cols-1 gap-3">
                        <div>
                            <div class="mb-2">
                                <label for="damage_info" class="label">Maklumat Kerosakan</label>
                            </div>
                            <textarea name="damage_info" id="damage_info" class="textarea w-full"></textarea>
                        </div>
                        <div>
                            <div class="mb-2">
                                <label for="note" class="label">Note</label>
                            </div>
                            <textarea name="receipt_note" id="note" class="textarea w-full"></textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    

@endsection
@push('script')
<script>
    $(document).ready(function() {
        const productId = window.location.pathname.split('/').pop();

        // Ambil data brand
        $.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>`);
            });
        });

        // Ambil data user
        $.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);
            });

            // Ambil detail produk
            $.get(`/api/products/edit/${productId}`, function(response) {
                const product = response.data;

                // Set gambar (gunakan .attr('src', ...))
                $('#front_image_url').attr('src', product.front_image_url);
                $('#back_image_url').attr('src', product.back_image_url);
                $('#serial_number_image_url').attr('src', product.serial_number_image_url);

                // Set field lainnya
                $('#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);
                $('#client_info').val(product.client_info);
                $('#payment_status').val(product.payment_status);
                $('#id_status').val(product.id_status);
                $('#note').val(product.receipt_note);
            });
        });
    });
</script>
@endpush