async function openOrderModal() {
    let orderTime = window.Lara.orderTime;
    let todaysOptions = '';
    let tomorrowsOptions = '';
    
    orderTime['hours']['today'].forEach(time => {
        todaysOptions += `<option value="${time.hour}, ${time.date}">${time.hour}</option>`;
    });

    orderTime['hours']['tomorrow'].forEach(time => {
        tomorrowsOptions += `<option value="${time.hour}, ${time.date}">${time.hour}</option>`;
    });

    formTemplate = `
        <form action="">
            <p class="text-left mb-1">Adyňyz</p>
            <input id="order-client-name" class="swal2-input m-0 mb-1 w-100 placeholder-black focus:box-shadow-none" type="text"  name="name" placeholder="Adyňyz" required>
            
            <p class="text-left mb-1">Telefon belgi (+993 6*******)</p>
            <input id="order-client-phone" class="swal2-input m-0 mb-1 w-100 placeholder-black focus:box-shadow-none" type="tel" placeholder="" required>
            
            <p class="text-left mb-1">Salgy</p>
            <input id="order-client-address" class="swal2-input m-0 mb-1 w-100 placeholder-black focus:box-shadow-none" type="text" name="adress" required>

            <p class="text-left mt-1 mb-1">Wagty saýlaň</p>
            <select class="swal2-select m-0 mb-1 rounded w-100" id="order-client-time">
                <optgroup label="${ orderTime['dates']['today'] }">
                    ${todaysOptions}
                </optgroup>

                <optgroup label="${ orderTime['dates']['tomorrow'] }">
                    ${tomorrowsOptions}
                </optgroup>
            </select>

            <p class="text-left mt-1 mb-1">Töleg görnüşi</p>
            <select class="swal2-select m-0 mb-1 rounded w-100" id="order-client-payment-method">
                <optgroup label="Onlaýn däl töleg">
                    <option value="cash">Nagt töleg</option>
                    <option value="atm">Terminal töleg</option>
                </optgroup>

                <optgroup label="Onlaýn töleg">
                    <option value="halk_bank">Altyn Asyr</option>
                </optgroup>

            </select>
        </form>
    `;

    const { value: formValues } = await Swal.fire({
        title: 'Sargaw',
        confirmButtonText: 'Sarga',
        html: formTemplate,
        preConfirm: () => {
            let order_client_name = document.getElementById('order-client-name').value;
            let order_client_phone = document.getElementById('order-client-phone').value;
            let order_client_address = document.getElementById('order-client-address').value;
            let order_client_payment_method = document.getElementById('order-client-payment-method').value;
            let order_client_time = document.getElementById('order-client-time').value;

            if (order_client_name == '' || order_client_phone == '' || order_client_address == '' || order_client_payment_method == '' || order_client_time == '') {
                Swal.showValidationMessage('Maglumatlary giriziň');
            }

            return {
                name: order_client_name,
                phone: order_client_phone,
                address: order_client_address,
                payment_type: order_client_payment_method,
                time: order_client_time
            };
        },
        allowOutsideClick: () => !Swal.isLoading()
    });

    if (formValues) {
        let token = document.querySelector('input[name=_token]').value;

        let formData = {
            ...formValues,
            _token: token
        };

        $.ajax({
            method: 'POST',
            url: '/orders-checkout',
            data: formData,
            success: (response) => {
                if (formData.payment_type == 'halk_bank') {
                    window.location.href = response.data.url;
                    return;
                }
                
                Swal.fire('Siziň sargydyňyzyň kabul edildi!', 'Sargydy tassyklamak üçin siziň bilen operator habarlaşar.', 'success');

                Livewire.emit('cartUpdated');
                Livewire.emit('ordersUpdated');
            },
            error: (exception) => {
                console.log({exception});
            }
        });
    }
}

function orderDetails(id) {
    let formData = {
        id: id,
        _token: document.querySelector('input[name=_token]').value,
    };

    $.ajax({
        method: 'POST',
        url: '/orders-detail',
        data: formData,
        success: (response) => {
            console.log({response});
            window.a = response;

            let orderItemTemplate = '';

            response.order.items.forEach(item => {
                orderItemTemplate += `
                    <div class="col-md-4">
                        <img src="${response.products.filter(product => product.id == item.product_id)[0].image}" class="mw-100" />

                        <span>Ady: <strong>${ item.name }</strong></span>
                        <span>Sany: <strong>${ item.quantity }</strong></span>
                        <span>Bahasy: <strong>${ item.unit_price_amount }</strong></span>
                    </div>
                `;
            });

            let orderDetailTemplate = `<div class="row"> ${orderItemTemplate} </div>`;

            Swal.fire({
                title: 'Harytlar',
                // confirmButtonText: 'Sarga',
                html: orderDetailTemplate,
                allowOutsideClick: () => !Swal.isLoading()
            });


        },
        error: (exception) => {
            console.log({exception});
        }
    });   
}