@extends('admin.layout.master')
@section('title', __('admin.orders'))
@section('scripts')
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>

    <script>

            let audio = new Audio("{{ asset('admin') }}/sound.mp3");
            let soundEnabled = false;

            function enableSound() {
            if (!soundEnabled) {
            audio.play().then(() => {
            soundEnabled = true;
            document.removeEventListener("click", enableSound);
            document.removeEventListener("scroll", enableSound);
        }).catch(error => console.warn("Autoplay blocked, waiting for interaction."));
        }
        }

            document.addEventListener("click", enableSound);
            document.addEventListener("scroll", enableSound);

            // إعداد Pusher
        Pusher.logToConsole = true;

        var pusher = new Pusher('4553f8afdc79c50c4fb5', {
            cluster: 'eu'
        });

        // الاشتراك في القناة الخاصة بالطلبات
        var channel = pusher.subscribe('adminOrder');
        channel.bind('newOrder', function(data) {
            var order = data.order;
            var provider = data.provider;
            var user = data.user;
            var order_id = order.id;
            var order_url = "{{ route('admin.order.show', ':order_id') }}";
            order_url = order_url.replace(':order_id', order_id);

            // Construct the new row HTML for the order
            var newRow = `
            <tr>
                <td><a href="${order_url}"><span>#${order.id}</span></a></td>
                <td class="sorting_1"><span class="text-nowrap">${new Date(order.created_at).toLocaleString()}</span></td>
                <td>
                    <div class="d-flex justify-content-start align-items-center order-name text-nowrap">
                        <div class="avatar-wrapper">
                            <div class="avatar avatar-sm me-3"><img src="${user.image}" alt="Avatar" class="rounded-circle"></div>
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0"><a href="pages-profile-user.html" class="text-heading">${user.name}</a></h6>
                            <small>${user.email}</small>
                        </div>
                    </div>
                </td>
                <td>${order.payment_method}</td>
                <td>
                    <h6 class="mb-0 align-items-center d-flex w-px-100 text-warning">
                        <i class="ti ti-circle-filled fs-tiny me-1"></i>${order.payment_status ? 'Paid' : 'Not Paid'}
                    </h6>
                </td>
                <td class="dtr-hidden"><span class="px-2 badge bg-label-warning" text-capitalized="">{{ App::getLocale() == 'en' ? 'Pending' : 'قيد الانتظار'  }}</span></td>
                <td>
                    <div class="d-flex justify-content-start align-items-center order-name text-nowrap">
                        <div class="avatar-wrapper">
                            <div class="avatar avatar-sm me-3"><img src="${provider.image}" alt="Avatar" class="rounded-circle"></div>
                        </div>
                        <div class="d-flex flex-column">
                            <h6 class="m-0"><a href="pages-profile-user.html" class="text-heading">${provider.name}</a></h6>
                            <small>${provider.email}</small>
                        </div>
                    </div>
                </td>
                <td class="dtr-hidden">
                    <div class="d-flex justify-content-sm-start align-items-sm-center"><button
                            class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow"
                            data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                        <div class="m-0 dropdown-menu dropdown-menu-end"><a
                                href="${order_url}"
                                class="dropdown-item"><i class="ti ti-eye me-2"></i>View</a></div>
                    </div>
                </td>
            </tr>
        `;

            // Add the new row to the table
            document.querySelector('table tbody').insertAdjacentHTML('afterbegin', newRow);
            // sound
            if (soundEnabled) {
                audio.currentTime = 0;
                audio.play().catch(error => console.error("Audio play failed:", error));
            }
        });
    </script>

@endsection
@section('content')
        <!-- Order List Widget -->

    <div class="mb-6 card">
        <div class="card-widget-separator-wrapper">
            <div class="card-body card-widget-separator">
                <div class="row gy-4 gy-sm-1">
                    <div class="col-sm-6 col-lg-3">
                        <div class="pb-4 d-flex justify-content-between align-items-start card-widget-1 border-end pb-sm-0">
                            <div>
                                <h4 class="mb-0">
                                    {{ $orders->where('payment_status', 0)->where('status', '>=', 0)->count() }}</h4>
                                <p class="mb-0">{{ __('admin.pending_payments') }}</p>
                            </div>
                            <span class="avatar me-sm-6">
                                <span class="rounded avatar-initial bg-label-secondary text-heading">
                                    <i class="ti-26px ti ti-calendar-stats text-heading"></i>
                                </span>
                            </span>
                        </div>
                        <hr class="d-none d-sm-block d-lg-none me-6">
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="pb-4 d-flex justify-content-between align-items-start card-widget-2 border-end pb-sm-0">
                            <div>
                                <h4 class="mb-0">{{ $orders->where('payment_status', 1)->where('status', 4)->count() }}
                                </h4>
                                <p class="mb-0">{{ __('admin.completed_orders') }}</p>
                            </div>
                            <span class="p-2 avatar me-lg-6">
                                <span class="rounded avatar-initial bg-label-secondary"><i
                                        class="ti-26px ti ti-checks text-heading"></i></span>
                            </span>
                        </div>
                        <hr class="d-none d-sm-block d-lg-none">
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="pb-4 d-flex justify-content-between align-items-start border-end pb-sm-0 card-widget-3">
                            <div>
                                <h4 class="mb-0">{{ $orders->where('status', 3)->count() }}</h4>
                                <p class="mb-0">{{ __('admin.out_of_delivery') }}</p>
                            </div>
                            <span class="p-2 avatar me-sm-6">
                                <span class="rounded avatar-initial bg-label-secondary"><i
                                        class="ti-26px ti ti-wallet text-heading"></i></span>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h4 class="mb-0">{{ $orders->where('status', -2)->count() }}</h4>
                                <p class="mb-0">{{ __('admin.cancelled_orders') }}</p>
                            </div>
                            <span class="p-2 avatar">
                                <span class="rounded avatar-initial bg-label-secondary"><i
                                        class="ti-26px ti ti-alert-octagon text-heading"></i></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-6">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ __('admin.filter') }}</h5>
                </div>
                <div class="card-body">
                    <form method="get" action="{{ route('admin.order.index') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="id" class="form-label">{{ __('admin.id') }}</label>
                                    <input type="text" class="form-control" id="id" value="{{ request('id') }}" name="id"
                                           placeholder="{{ __('admin.id') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="provider" class="form-label">{{ __('admin.user') }}</label>
                                    <select class="form-select" id="provider" name="user_id">
                                        <option value="">{{ __('admin.user') }}</option>
                                        @foreach ($users as $user)
                                            <option {{ request('user_id') == $user->id?"selected":'' }} value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-end">
                            <div class="col-md-4 text-end">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

    <!-- Order List Table -->
    <div class="card">
        <div class="card-datatable table-responsive">
            <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                <table class="table datatables-order border-top dataTable no-footer dtr-column collapsed"
                    id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" style="width: 1215px;">
                    <thead>
                        <tr>
                            <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 50px;" aria-label="order: activate to sort column ascending">
                                {{ __('admin.order') }}</th>
                            <th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 124px;" aria-label="date: activate to sort column descending"
                                aria-sort="ascending">{{ __('admin.date') }}</th>
                            <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 256px;"
                                aria-label="customers: activate to sort column ascending">{{ __('admin.customer') }}</th>
                            <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 100px;"
                                aria-label="payment: activate to sort column ascending">{{ __('admin.payment') }}</th>
                            <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 113px; "
                                aria-label="status: activate to sort column ascending">{{ __('admin.payment_status') }}
                            </th>
                            <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 113px; "
                                aria-label="status: activate to sort column ascending">{{ __('admin.status') }}</th>
                            <th class="sorting dtr-hidden" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                                colspan="1" style="width: 139px; "
                                aria-label="provider: activate to sort column ascending">{{ __('admin.provider') }}</th>
                            <th class="sorting_disabled dtr-hidden" rowspan="1" colspan="1" style="width: 63px;"
                                aria-label="Actions">{{ __('admin.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- odd or even --}}
                        @foreach ($orders as $order)
                            <tr class="{{ $loop->odd ? 'odd' : 'even' }}">

                                {{-- order id id 00001 --}}
                                <td><a
                                        href="{{ route('admin.order.show', $order->id) }}"><span>#{{ $order->id }}</span></a>
                                </td>
                                <td class="sorting_1"><span class="text-nowrap">
                                        {{ date('M d, Y h:i A', strtotime($order->created_at)) }}</span></td>
                                <td>
                                    <div class="d-flex justify-content-start align-items-center order-name text-nowrap">
                                        <div class="avatar-wrapper">
                                            <div class="avatar avatar-sm me-3"><img src="{{ $order->user->image }}"
                                                    alt="Avatar" class="rounded-circle"></div>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="m-0"><a href="pages-profile-user.html"
                                                    class="text-heading">{{ $order->user->name }}</a></h6>
                                            <small>{{ $order->user->email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {{ __('admin.' . $order->payment_method . '_payment') }}

                                </td>
                                <td>
                                    <h6
                                        class="mb-0 align-items-center d-flex w-px-100 text-{{ $order->payment_status == 0 ? 'warning' : 'success' }}">
                                        <i
                                            class="ti ti-circle-filled fs-tiny me-1"></i>{{ $order->payment_status ? __('admin.paid') : __('admin.not_paid') }}
                                    </h6>
                                </td>

                                <td class="dtr-hidden"><span
                                        class="px-2 badge bg-label-{{ getOrderStatusClass($order->status) }}"
                                        text-capitalized="">{{ __('admin.order_status_arr.' . $order->status) }}</span>
                                </td>

                                <td>
                                    <div class="d-flex justify-content-start align-items-center order-name text-nowrap">
                                        <div class="avatar-wrapper">
                                            <div class="avatar avatar-sm me-3"><img src="{{ $order->provider->image }}"
                                                    alt="Avatar" class="rounded-circle"></div>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="m-0"><a href="pages-profile-user.html"
                                                    class="text-heading">{{ $order->provider->name }}</a></h6>
                                            <small>{{ $order->provider->email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td class="dtr-hidden">
                                    <div class="d-flex justify-content-sm-start align-items-sm-center"><button
                                            class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow"
                                            data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button>
                                        <div class="m-0 dropdown-menu dropdown-menu-end"><a
                                                href="{{ route('admin.order.show', $order->id) }}"
                                                class="dropdown-item"><i class="ti ti-eye me-2"></i>{{ __('admin.view') }}</a></div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
                <div class="card-footer d-flex justify-content-end align-items-center">
                    <div class="d-flex justify-content-start align-items-center">
                        {{ $orders->links() }}
                    </div>
                   </div>
            </div>
        </div>
    </div>


@endsection