@extends('layouts.app')
@section('title_header')
    Create Order
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => '/'],
        ['label' => 'Product', 'url' => '/products'],
        ['label' => 'Register Product', 'url' => '/products/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 --->
    @php
        $diterima_oleh_permission = session('permissions')['diterima_oleh'] ?? null;
        $diterima_oleh = str_contains($diterima_oleh_permission, 'input');
    @endphp
    <section>
        <div class="card card-border bg-white">
            <div class="card-body">
                <form id="form-register">
                    <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 Order</p>
                        <div class="grid lg:grid-cols-1 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..." />
                            </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..." />
                            </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</label>
                                </div>
                                <select class="select w-full" name="product_type" id="product_type">
                                    <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>
                            @if ($diterima_oleh)
                                <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>
                            @endif
                            <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..." />
                            </div>
                        </div>
                    </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() {
            $.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>`)
                })
            })

            $.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);
                });
            });

            $('#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();
            });

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

                let form = $('#form-register')[0];
                let formData = new FormData(form);

                $.ajax({
                    url: '/api/products/register',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'Authorization': `Bearer ${Cookies.get('token')}`
                    },
                    success: function(response) {
                        toastr.success('Produk berhasil diregister!', 'Berhasil');
                        $('#form-register')[0].reset();
                        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, 'Gagal');
                        } else {
                            toastr.error('Terjadi kesalahan server', 'Error');
                        }
                    }
                });
            });
        });
    </script>
@endpush