@extends('web.themes.shella.layouts.app')

@push('header-javascript')
<script>
    function orderDetails(id) {
        let formData = {
            id: id,
            _token: document.querySelector('meta[name=csrf-token]').getAttribute('value'),
        };

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

                let orderItemTemplate = '';

                orderItemTemplate += ` 
                    <div class="col-md-12 mb-5 text-left">
                        <p class="mb-1"><strong>{{ __('Name') }}:</strong> ${response.order.customer_name}</p>
                        <p class="mb-1"><strong>{{ __('Phone') }}:</strong> ${response.order.customer_phone}</p>
                        <p class="mb-4"><strong>{{ __('Address') }}:</strong> ${response.order.customer_address}</p>
                        <p class="mb-4"><strong>{{ __('Eltiljek wagty') }}:</strong> ${response.order.delivery_time}</p>
                    </div>
                    <hr />
                `;

                response.order.items.forEach(item => {
                    orderItemTemplate += `
                        <div class="col-md-12 mt-5">
                            <div class="row">
                                <div class="col-md-6" style="max-height: 120px;">
                                    <img src="${response.products.filter(product => product.id == item.product_id)[0].image}" class="mw-100" style="max-height: 120px;" />
                                </div>

                                <div class="col-md-6 text-left">
                                    <p class="mb-1"><strong>Ady: </strong> ${ item.name }</p>
                                    <p class="mb-1"><strong>Sany: </strong> ${ item.quantity }</p>
                                    <p class="mb-1"><strong>Bahasy: </strong> ${ item.unit_price_amount } TMT</p>
                                </div>
                            </div>
                        </div>
                    `;
                });

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

                Swal.fire({
                    title: '{{ __('View') }}: ' + response.order.id,
                    // confirmButtonText: 'Sarga',
                    html: orderDetailTemplate,
                    allowOutsideClick: () => !Swal.isLoading()
                });


            },
            error: (exception) => {
                console.log({exception});
            }
        });   
    }
</script>
@endpush

@section('content')
<main id="MainContent">
    <div class="breadcrumbs mt-15">
        <div class="container">
            <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <li style="font-size: 1.6em;"><a href="/">{{ __('Home') }}</a></li>
                <li style="font-size: 1.6em;"><span class="text-capitizalize">{{ __('Orders') }}</span></li>
            </ul>
        </div>
    </div>

    <div class="orders mb-40">
        <div class="container">
            <div class="d-flex justify-content-lg-center align-items-center position-relative mb-15 mb-lg-30">
                <h1 class="h3 mt-20 mb-0 text-center text-capitizalize" data-js-store-lists-has-items-wishlist>{{ __('My orders') }}</h1>
            </div>

            <div class="table-wrap">
                <table class="responsive-table">
                    <thead>
                        <tr>
                            <th class="text-uppercase">{{ __('Order Number') }}</th>
                            <th class="text-uppercase">{{ __('Time') }}</th>
                            <th class="text-uppercase">{{ __('Status') }}</th>
                            <th class="text-uppercase">{{ __('Payment type') }}</th>
                            <th class="text-uppercase">{{ __('Total') }}</th>
                            <th class="text-uppercase">{{ __('More Info') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                            <tr class="responsive-table-row">
                                <td data-label="Order">#{{ $order->id }}</td>
                                <td data-label="Date">{{ $order->created_at->format('H:i, d.m.Y') }}</td>
                                <td data-label="Payment Status">{{ $order->formatted_status() }}</td>
                                <td data-label="Fulfillment Status">{{ $order->formattedPaymentType() }}</td>
                                <td data-label="Total">{{ $order->fullPriceWithShipping() }} TMT</td>
                                <td data-label="MoreInfo"><button class="btn text-white" onclick="orderDetails({{ $order->id }})">{{ __('View') }}</button></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>
@stop