@extends('layouts.admin.app')

@section('title', translate('Order List'))


@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <h1 class="mb-0 page-header-title">
                <span class="page-header-icon">
                    <img src="{{ asset('public/assets/admin/img/all_orders.png') }}" class="w--20" alt="">
                </span>
                <span class="">
                    @if ($status == 'processing')
                        {{ translate(ucwords(str_replace('_', ' ', 'Packaging'))) }} {{ translate('Orders') }}
                    @elseif($status == 'failed')
                        {{ translate(ucwords(str_replace('_', ' ', 'Failed to Deliver'))) }} {{ translate('Orders') }}
                    @else
                        {{ translate(ucwords(str_replace('_', ' ', $status))) }} {{ translate('Orders') }}
                    @endif
                    <span class="badge badge-pill badge-soft-secondary ml-2">{{ $orders->total() }}</span>
                </span>

            </h1>
        </div>

        <div class="card">
            <div class="card-header shadow flex-wrap p-20px border-0">
                <h5 class="form-bold w-100 mb-3">{{ translate('Select Date Range') }}</h5>
                <form class="w-100">
                    <div class="row g-3 g-sm-4 g-md-3 g-lg-4">
                        <div class="col-sm-6 col-md-4 col-lg-2">
                            <select class="custom-select custom-select-sm text-capitalize min-h-45px" name="branch_id">
                                <option disabled>--- {{ translate('select') }} {{ translate('branch') }} ---</option>
                                <option value="all" {{ $branchId == 'all' ? 'selected' : '' }}>{{ translate('all') }}
                                    {{ translate('branch') }}</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch['id'] }}"
                                        {{ $branch['id'] == $branchId ? 'selected' : '' }}>
                                        {{ $branch['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="input-date-group">
                                <label class="input-label" for="start_date">{{ translate('Start Date') }}</label>
                                <label class="input-date">
                                    <input type="text" id="start_date" name="start_date" value="{{ $startDate }}"
                                        class="js-flatpickr form-control flatpickr-custom min-h-45px" placeholder="yy-mm-dd"
                                        data-hs-flatpickr-options='{ "dateFormat": "Y-m-d"}'>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="input-date-group">
                                <label class="input-label" for="end_date">{{ translate('End Date') }}</label>
                                <label class="input-date">
                                    <input type="text" id="end_date" name="end_date" value="{{ $endDate }}"
                                        class="js-flatpickr form-control flatpickr-custom min-h-45px" placeholder="yy-mm-dd"
                                        data-hs-flatpickr-options='{ "dateFormat": "Y-m-d"}'>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-12 col-lg-4 __btn-row">
                            <a href="{{ route('admin.orders.list', ['all']) }}"
                                class="btn w-100 btn--reset min-h-45px">{{ translate('clear') }}</a>
                            <button type="submit" id="show_filter_data"
                                class="btn w-100 btn--primary min-h-45px">{{ translate('show data') }}</button>
                        </div>
                    </div>
                </form>
            </div>

            @if ($status == 'all')
                <div class="p-20px pb-0 mt-4">
                    <div class="row g-3 g-sm-4 g-md-3 g-lg-4">

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['pending']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/pending.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('pending') }}</span>
                                    </h6>
                                    <span class="card-title text-0661CB">
                                        {{ $countData['pending'] }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['confirmed']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/confirmed.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('confirmed') }}</span>
                                    </h6>
                                    <span class="card-title text-107980">
                                        {{ $countData['confirmed'] }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['processing']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/processing.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('packaging') }}</span>
                                    </h6>
                                    <span class="card-title text-danger">
                                        {{ $countData['processing'] }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['out_for_delivery']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('/public/assets/admin/img/delivery/out-for-delivery.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('out_for_delivery') }}</span>
                                    </h6>
                                    <span class="card-title text-00B2BE">
                                        {{ $countData['out_for_delivery'] }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['delivered']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/1.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('delivered') }}</span>
                                    </h6>
                                    <span class="card-title text-success">
                                        {{ $countData['delivered'] }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['all']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/2.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('Canceled') }}</span>
                                    </h6>
                                    <span class="card-title text-danger">
                                        {{ $countData['canceled'] }}
                                    </span>
                                </div>
                            </a>
                        </div>

                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['returned']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/3.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('returned') }}</span>
                                    </h6>
                                    <span class="card-title text-warning">
                                        {{ $countData['returned'] }}
                                    </span>
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-6 col-lg-3">
                            <a class="order--card h-100" href="{{ route('admin.orders.list', ['failed']) }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="card-subtitle d-flex justify-content-between m-0 align-items-center">
                                        <img src="{{ asset('public/assets/admin/img/delivery/4.png') }}"
                                            alt="{{ translate('dashboard') }}" class="oder--card-icon">
                                        <span>{{ translate('failed_to_deliver') }}</span>
                                    </h6>
                                    <span class="card-title text-danger">
                                        {{ $countData['failed'] }}
                                    </span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            @endif

            <div class="card-body">
                <div class="card--header order-top">
                    <div class="d-flex gap-2 align-items-center">
                        <h5 class="mb-0"> {{ translate('Order List') }}
                            <span class="badge badge-soft-dark rounded-pill fs-10 ml-1">{{ $orders->total() }}</span>
                        </h5>
                    </div>

                    <div class="d-flex flex-sm-nowrap flex-wrap gap-sm-3 gap-3">
                        <form action="{{ request()->url() }}" method="GET">
                            @foreach (request()->except('search', 'page') as $key => $value)
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endforeach

                            <div class="input-group">
                                <input id="datatableSearch_" type="search" name="search" class="form-control"
                                    placeholder="{{ translate('Search Here...') }}" aria-label="Search"
                                    value="{{ $search }}" autocomplete="off">

                                <div class="input-group-append">
                                    <button type="submit" class="input-group-text p-2">
                                        <i class="tio-search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>

                        <div class="hs-unfold">
                            <a class="js-hs-unfold-invoker export_btn h-30 text-dark btn btn-sm dropdown-toggle min-height-30"
                                href="javascript:;"
                                data-hs-unfold-options='{
                                            "target": "#usersExportDropdown",
                                            "type": "css-animation"
                                        }'>
                                <i class="tio-download-to title-clr3 top-02"></i>
                                {{ translate('export') }}
                                <i class="tio-down-ui fs-10 title-clr3"></i>
                            </a>

                            <div id="usersExportDropdown"
                                class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm-right">
                                <span class="dropdown-header">{{ translate('download') }}
                                    {{ translate('options') }}</span>
                                <a id="export-excel" class="dropdown-item"
                                    href="{{ route('admin.orders.export', [$status, 'branch_id' => Request::get('branch_id'), 'start_date' => Request::get('start_date'), 'end_date' => Request::get('end_date'), 'search' => Request::get('search')]) }}">
                                    <img class="avatar avatar-xss avatar-4by3 mr-2"
                                        src="{{ asset('public/assets/admin') }}/svg/components/excel.svg"
                                        alt="{{ translate('Image Description') }}">
                                    {{ translate('excel') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive datatable-custom">
                    <table
                        class="table table-hover table-border table-thead-bordered table-nowrap table-align-middle card-table">
                        <thead class="thead-light">
                            <tr>
                                <th>
                                    {{ translate('#') }}
                                </th>
                                <th class="table-column-pl-0">{{ translate('order ID') }}</th>
                                <th>{{ translate('Delivery') }} {{ translate('date') }}</th>
                                <th>{{ translate('Time Slot') }}</th>
                                <th>{{ translate('customer') }}</th>
                                <th>{{ translate('branch') }}</th>
                                <th>{{ translate('total amount') }}</th>
                                <th>
                                    <div class="text-center">
                                        {{ translate('order') }} {{ translate('status') }}
                                    </div>
                                </th>
                                <th>
                                    <div class="text-center">
                                        {{ translate('order') }} {{ translate('type') }}
                                    </div>
                                </th>
                                <th>
                                    <div class="text-center">
                                        {{ translate('action') }}
                                    </div>
                                </th>
                            </tr>
                        </thead>

                        <tbody id="set-rows">
                            @foreach ($orders as $key => $order)
                                <tr class="status-{{ $order['order_status'] }} class-all">
                                    <td class="">
                                        {{ $orders->firstItem() + $key }}
                                    </td>
                                    <td class="table-column-pl-0">
                                        <a
                                            href="{{ route('admin.orders.details', ['id' => $order['id']]) }}">{{ $order['id'] }}</a>
                                    </td>
                                    <td>{{ date('d M Y', strtotime($order['delivery_date'])) }}</td>
                                    <td>
                                        <span>{{ $order->time_slot ? date(config('time_format'), strtotime($order->time_slot['start_time'])) . ' - ' . date(config('time_format'), strtotime($order->time_slot['end_time'])) : translate('No Time Slot') }}</span>
                                    </td>
                                    <td>
                                        @if ($order->is_guest == 0)
                                            @if (isset($order->customer))
                                                <div>
                                                    <a class="text-body text-capitalize font-medium"
                                                        href="{{ route('admin.customer.view', [$order['user_id']]) }}">{{ $order->customer['f_name'] . ' ' . $order->customer['l_name'] }}</a>
                                                </div>
                                                <div class="text-sm">
                                                    <a
                                                        href="Tel:{{ $order->customer['phone'] }}">{{ $order->customer['phone'] }}</a>
                                                </div>
                                            @elseif($order->user_id != null && !isset($order->customer))
                                                <label class="text-danger">{{ translate('Customer_not_available') }}
                                                </label>
                                            @else
                                                <label class="text-success">{{ translate('Walking Customer') }}
                                                </label>
                                            @endif
                                        @else
                                            <label class="text-success">{{ translate('Guest Customer') }}
                                            </label>
                                        @endif

                                    </td>
                                    <td>
                                        <label
                                            class="badge badge-soft-primary">{{ $order->branch ? $order->branch->name : 'Branch deleted!' }}</label>
                                    </td>

                                    <td>
                                        <div class="mw-90">
                                            <div>
                                                <?php
                                                $orderAmount = $order['order_amount']; // default value

                                                if (isset($order->details) && is_array($order->details) && count($order->details) > 0) {
                                                    $vatStatus = $order->details[0]->vat_status ?? '';
                                                    if ($vatStatus === 'included') {
                                                        $orderAmount = $order['order_amount'] - $order['total_tax_amount'];
                                                    }
                                                }
                                                ?>
                                                {{ Helpers::set_symbol($orderAmount) }}
                                            </div>
                                            @if ($order->payment_status == 'paid')
                                                <span class="text-success">
                                                    {{ translate('paid') }}
                                                </span>
                                            @else
                                                <span class="text-danger">
                                                    {{ translate($order['payment_status']) }}
                                                </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="text-capitalize text-center">
                                        @if ($order['order_status'] == 'pending')
                                            <span class="badge badge-soft-info">
                                                {{ translate('pending') }}
                                            </span>
                                        @elseif($order['order_status'] == 'confirmed')
                                            <span class="badge badge-soft-info">
                                                {{ translate('confirmed') }}
                                            </span>
                                        @elseif($order['order_status'] == 'processing')
                                            <span class="badge badge-soft-warning">
                                                {{ translate('packaging') }}
                                            </span>
                                        @elseif($order['order_status'] == 'out_for_delivery')
                                            <span class="badge badge-soft-warning">
                                                {{ translate('out_for_delivery') }}
                                            </span>
                                        @elseif($order['order_status'] == 'delivered')
                                            <span class="badge badge-soft-success">
                                                {{ translate('delivered') }}
                                            </span>
                                        @else
                                            <span class="badge badge-soft-danger">
                                                {{ translate(str_replace('_', ' ', $order['order_status'])) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-capitalize text-center">
                                        @if ($order['order_type'] == 'take_away')
                                            <span class="badge badge-soft-info">
                                                {{ translate('take_away') }}
                                            </span>
                                        @elseif($order['order_type'] == 'pos')
                                            <span class="badge badge-soft-info">
                                                {{ translate('POS') }}
                                            </span>
                                        @else
                                            <span class="badge badge-soft-success">
                                                {{ translate($order['order_type']) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn--container justify-content-center">
                                            <a class="action-btn btn--primary btn-outline-primary"
                                                href="{{ route('admin.orders.details', ['id' => $order['id']]) }}"><i
                                                    class="tio-invisible"></i></a>
                                            <a class="action-btn btn-outline-primary-2" target="_blank"
                                                href="{{ route('admin.orders.generate-invoice', [$order['id']]) }}">
                                                <i class="tio-print"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="">
                    {!! $orders->links('layouts/admin/partials/_pagination', ['perPage' => $perPage]) !!}
                </div>

                @if (count($orders) == 0)
                    <div class="text-center p-4">
                        <img class="w-120px mb-3" src="{{ asset('public/assets/admin') }}/svg/illustrations/sorry.svg"
                            alt="Image Description">
                        <p class="mb-0">{{ translate('No_data_to_show') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="exampleModalLabel">{{ translate('Custom Value') }}</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#0" method="POST">
                        <input name="" type="number" value="" placeholder="Type here.."
                            class="form-control">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--reset min-w-120px" data-dismiss="modal">
                        {{ translate('Reset') }}
                    </button>
                    <button type="submit" class="btn btn-primary min-w-120px">{{ translate('Save') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script_2')
    <script src="{{ asset('public/assets/admin/js/flatpicker.js') }}"></script>
    <script>
        $(document).on('ready', function() {
            const $startDate = $('#start_date');
            const $endDate = $('#end_date');
            const $filterForm = $startDate.closest('form');

            if (!$startDate.length || !$endDate.length || !$filterForm.length) {
                return;
            }

            $filterForm.on('submit', function(e) {
                const hasStartDate = $.trim($startDate.val()) !== '';
                const hasEndDate = $.trim($endDate.val()) !== '';

                if ((hasStartDate && !hasEndDate) || (!hasStartDate && hasEndDate)) {
                    e.preventDefault();
                    toastr.error('{{ translate('Please select both start date and end date') }}', '', {
                        CloseButton: true,
                        ProgressBar: true
                    });
                }
            });
        });
    </script>
@endpush
