@extends('layouts.admin.app')

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

@push('css_or_js')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@section('content')
    <div class="content container-fluid">
        <!-- Page Header -->
        <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
            <h2 class="h1 mb-0 d-flex align-items-center gap-1">
                <img width="20" class="avatar-img" src="{{ asset('assets/admin/img/icons/all_orders.png') }}"
                    alt="">
                <span class="page-header-title">
                    {{ translate($status) }} {{ translate('Orders') }}
                </span>
            </h2>
            <span class="badge badge-soft-dark rounded-50 fz-14">{{ $orders->total() }}</span>
        </div>
        <!-- End Page Header -->

        <!-- Card -->
        <div class="card">
            <!-- Filter Card -->
            <div class="card mb-4">
                <div class="card-body">
                    <form action="{{ url()->current() }}" method="GET">

                    {{-- <form action="#" onsubmit="event.preventDefault()" id="search-form" method="GET"> --}}
                        <div class="row gy-3 gx-2 align-items-end">
                            <div class="col-12 pb-0">
                                <h4 class="mb-0">{{ translate('order filter') }}</h4>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group ">
                                    <label class="input-label" for="exampleFormControlSelect1">
                                        {{ translate('Select Vehicle') }}
                                    </label>
                                    <select name="vehicle_id" id="vehicle_id" class="form-control js-select2-custom">
                                        <option selected disabled>---{{ translate('select') }}---</option>
                                        @foreach ($all_vehicle as $vehicle)
                                            <option value="{{ $vehicle->id }}">{{ $vehicle->vehicle_number }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Contact Number</label>
                                    <input type="text" name="number" value="{{ $number }}" class="form-control"
                                        placeholder="Number">
                                </div>
                            </div>

                            <div class="col-md-2 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">House/Building</label>
                                    <input type="text" name="house_flat" id="house_flat" value="{{ $house_flat }}"  class="form-control"
                                        placeholder="House/Building">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Road</label>
                                    <input type="text" name="road" id="road" value="{{ $road }}" class="form-control"
                                        placeholder="Road">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Block</label>
                                    <input type="text" name="block" id="block" value="{{ $block }}" class="form-control"
                                        placeholder="Block">
                                </div>
                            </div>

                            <div class="col-md-4 col-lg-3">
                                <div class="form-group mb-0">
                                    <label class="text-dark">{{ translate('Start Date') }}</label>
                                    <input type="date" name="from" value="{{ session()->get('') }}" id="from_date"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="form-group mb-0">
                                    <label class="text-dark">{{ translate('End Date') }}</label>
                                    <input type="date" value="" name="to" id="to_date" class="form-control">
                                </div>
                            </div>
                            <div class="col-12 col-lg-3 d-flex gap-2">
                                <button type="clear"
                                    class="btn btn-secondary flex-grow-1">{{ translate('Clear') }}</button>
                                <button type="submit"
                                    class="btn btn-primary text-nowrap flex-grow-1">{{ translate('Show Data') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- End Filter Card -->



            <!-- Card Top -->
            <div class="card-top px-card mt-4">
                <div class="row justify-content-between align-items-center gy-2">
                    <div class="col-sm-4 col-md-6 col-lg-4">
                        <form action="{{ url()->current() }}" method="GET">
                            <div class="input-group">
                                <input id="datatableSearch_" type="search" name="search" class="form-control"
                                    placeholder="{{ translate('Search by Order ID, Order Status or Transaction Reference') }}"
                                    aria-label="Search" value="{{ $search }}" required autocomplete="off">
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary">
                                        {{ translate('Search') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="col-12 col-lg-4 d-flex gap-2 mt-4">
                        <div>
                            <button type="button" class="btn btn-outline-primary" data-toggle="dropdown"
                                aria-expanded="false">
                                <i class="tio-download-to"></i>
                                {{ translate('export') }}
                                <i class="tio-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li>
                                    <a type="submit" class="dropdown-item d-flex align-items-center gap-2"
                                        href="{{ route('admin.orders.export-excel', ['search' => $search, 'from' => $from, 'to' => $to, 'status' => $status]) }}">
                                        <img width="14" src="{{ asset('assets/admin/img/icons/excel.png') }}"
                                            alt="">
                                        {{ translate('excel') }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <a href="{{ route('admin.orders.create-order') }}" class="btn btn-primary">
                            <i class="tio-add"></i>
                            <span class="text">{{ translate('Create Order') }}</span>
                        </a>
                        {{-- <a href="{{route('admin.orders.create-order')}}" type="submit" class="btn btn-primary text-nowrap flex-grow-1"><i class="tio-add nav-icon"></i>{{ translate('Create Order') }}</a> --}}
                    </div>
                </div>
            </div>
            <!-- End Card Top -->

            <!-- Table -->
            <div class="py-4">
                <div class="table-responsive datatable-custom">
                    <table
                        class="table table-hover table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                        <thead class="thead-light">
                            <tr>
                                <th>{{ translate('SL') }}</th>
                                <th>{{ translate('Order_ID') }}</th>
                                <th>{{ translate('Vehicle') }}</th>
                                <th>{{ translate('Ordered Date') }}</th>
                                <th>{{ translate('Customer_Info') }}</th>
                                <th>{{ translate('Total_Amout') }}</th>
                                <th>{{ translate('Order_Status') }}</th>
                                <th>{{ translate('Delivered Date') }}</th>

                                <th class="text-center">{{ translate('actions') }}</th>
                            </tr>
                        </thead>

                        <tbody id="set-rows">
                            @foreach ($orders as $key => $order)
                                <tr class="status-{{ $order['order_status'] }} class-all">
                                    <td>{{ $orders->firstitem() + $key }}</td>
                                    <td>
                                        <a
                                            href="{{ route('admin.orders.details', ['id' => $order['id']]) }}">{{ $order['id'] }}</a>
                                    </td>

                                    <td>
                                        <h6 class="text-capitalize mb-1">
                                            <h6 class="text-dark">{{ $order['delivery_man']['vehicle_name'] ?? 'N/A'  }}</h6>
                                        </h6>
                                        <a>{{ $order['delivery_man']['vehicle_number'] ?? 'N/A'}}</a>



                                    </td>
                                    <td>
                                        <div>
                                              {{ date('d M Y', strtotime($order['created_at'])) }}

                                          </div>
                                          <div>
                                              {{ date('h:i A', strtotime($order['created_at'])) }}

                                          </div>
                                    </td>
                                    <td>
                                        @if ($order->customer)
                                            <h6 class="text-capitalize mb-1">
                                                <a class="text-dark"
                                                    href="{{ route('admin.customer.view', [$order['user_id']]) }}">{{ $order->customer['f_name'] . ' ' . $order->customer['l_name'] }}</a>
                                            </h6>
                                            <a class="text-dark fz-12"
                                                href="tel:{{ $order->customer->phone }}">{{ $order->customer->phone }}</a>
                                                <br>
                                                <span class="text-dark fz-12" >Block:  {{ $order->deliveryAddress->block ?? 'N/A' }},{{ isset($order->deliveryAddress->house) ? 'House' : 'Building'}}  {{ $order->deliveryAddress->house ?? $order->deliveryAddress->building }},Road:  {{ $order->deliveryAddress->road ?? 'N/A' }}</span>
                                        @else
                                            <span class="text-capitalize text-muted">
                                                {{ translate('Customer_Unavailable') }}
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        <div>

                                            {{ \App\CentralLogics\Helpers::set_symbol($order['order_amount'] + $order['delivery_charge']) }}
                                        </div>
                                        @if ($order->payment_status == 'paid')
                                            <span class="text-success">{{ translate('paid') }}</span>
                                        @else
                                            <span class="text-danger">{{ translate('unpaid') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-capitalize">
                                        @if ($order['order_status'] == 'pending')
                                            <span
                                                class="badge-soft-info px-2 py-1 rounded">{{ translate('pending') }}</span>
                                        @elseif($order['order_status'] == 'confirmed')
                                            <span
                                                class="badge-soft-info px-2 py-1 rounded">{{ translate('confirmed') }}</span>
                                        @elseif($order['order_status'] == 'processing')
                                            <span
                                                class="badge-soft-warning px-2 py-1 rounded">{{ translate('processing') }}</span>
                                        @elseif($order['order_status'] == 'out_for_delivery')
                                            <span
                                                class="badge-soft-warning px-2 py-1 rounded">{{ translate('out_for_delivery') }}</span>
                                        @elseif($order['order_status'] == 'delivered')
                                            <span
                                                class="badge-soft-success px-2 py-1 rounded">{{ translate('delivered') }}</span>
                                        @elseif($order['order_status'] == 'failed')
                                            <span
                                                class="badge-soft-danger px-2 py-1 rounded">{{ translate('failed_to_deliver') }}</span>
                                        @else
                                            <span
                                                class="badge-soft-danger px-2 py-1 rounded">{{ str_replace('_', ' ', $order['order_status']) }}</span>
                                        @endif

                                        @if (isset($order['order_note']))
                                        <br>
                                        <i class="fa fa-info-circle mt-2"></i>

                                        @endif
                                    </td>

                                    <td>
                                        <div>
                                            @if (isset($order['order_status']) && $order['order_status'] == 'completed')
                                              {{ date('d M Y H:m:s', strtotime($order['updated_at'])) }}
                                            @else
                                              N/A
                                            @endif
                                          </div>

                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center gap-2">
                                            @if ($order['order_status'] == 'pending' || $order['order_status'] == 'confirmed' || $order['order_status'] == 'processing')
                                            <a class="btn btn-sm btn-outline-primary square-btn" href="#"
                                            data-tooltip="tooltip" title="Transfer Order" data-toggle="modal"
                                             data-id={{ $order['id'] }}
                                             @if (isset($order['vehicle_id']))
                                             data-vehicle={{ $order['vehicle_id'] }}
                                             @endif

                                            data-target="#assignDeliveryMan">
                                            <i class="fas fa-exchange-alt"></i>
                                        </a>
                                            @endif

                                            <a class="btn btn-sm btn-outline-primary square-btn"
                                                href="{{ route('admin.orders.details', ['id' => $order['id']]) }}">
                                                <i class="tio-invisible"></i>
                                            </a>
                                            {{-- <a href="{{ route('admin.orders.generate-invoice', [$order['id']]) }}"
                                                class="btn btn-sm btn-outline-success square-btn" target="_blank">
                                                <i class="tio-print"></i>
                                            </a> --}}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
            <!-- End Table -->

            <div class="table-responsive mt-4 px-3">
                <div class="d-flex flex-column justify-content-lg-end">
                    <!-- Pagination -->
                    {!! $orders->links() !!}
                </div>
            </div>
        </div>
        <!-- End Card -->

        <!-- Modal -->
        <div class="modal fade" id="assignDeliveryMan" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title fs-5" id="assignDeliveryManLabel">{{ translate('Transfer Order') }}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <ul class="list-group">
                            @foreach ($all_vehicle as $deliveryMan)
                                <li
                                    class="list-group-item d-flex flex-wrap align-items-center gap-3 justify-content-between">
                                    <div class="media align-items-center gap-2 flex-wrap">
                                        <div class="avatar">
                                            <img class="img-fit rounded-circle" loading="lazy" decoding="async"
                                                onerror="this.src='{{ asset('assets/admin/img/160x160/img1.jpg') }}'"
                                                src="{{ asset('/storage/delivery-man/' . $deliveryMan->image) }}"
                                                alt="Jhon Doe">
                                        </div>
                                        <span>{{ $deliveryMan['vehicle_number'] }}</span>
                                    </div>

                                    <div class="media align-items-center gap-2 flex-wrap">

                                        <span>Assigned Orders :</span> <span>{{ $deliveryMan['orders_count'] }}</span>
                                    </div>
                                    <input type="hidden" class="order_id_input">
                                    <input type="hidden" class="vehicle_id_input">

                                    <button  id="{{ $deliveryMan->id }}" onclick="addDeliveryMan({{$deliveryMan->id}})"
                                        class="btn btn-primary btn-sm vehicle_id vehicle_{{ $deliveryMan->id }}">{{ translate('Assign') }}</button>

                                </li>
                            @endforeach

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal -->

    </div>
@endsection

@push('script_2')
    <script>
        $('#search-form').on('submit', function() {
            var formData = new FormData(this);
            var road = $('#road').val();
            var block = $('#block').val();
            var house_flat = $('#house_flat').val();
            var Url = '{{ route('admin.orders.search') }}';

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.post({
                url: Url,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#loading').show();
                },
                success: function(data) {
                    $('#set-rows').html(data.view);
                    $('.card-footer').hide();
                    window.history.replaceState(Url,
                        "Page 3", Url + '?'+road);
                },
                complete: function() {
                    $('#loading').hide();
                },
            });
        });
    </script>
    <script>
        function addDeliveryMan(id) {
            var order_id_list = document.getElementsByClassName('order_id_input');
            order_id = order_id_list[0];

            $.ajax({
                type: "GET",
                url: '{{ url('/') }}/admin/orders/add-delivery-man/' + order_id.value + '/' + id,
                data: $('#product_form').serialize(),
                success: function(data) {
                    if (data.status == true) {
                        toastr.success(
                            '{{ \App\CentralLogics\translate('Vehicle successfully assigned/changed') }}', {
                                CloseButton: true,
                                ProgressBar: true
                            });
                        setTimeout(function() {
                            location.reload();
                        }, 2000)
                    } else {
                        toastr.error(
                            '{{ \App\CentralLogics\translate('Vehicle can not assign/change in that status') }}', {
                                CloseButton: true,
                                ProgressBar: true
                            });
                    }
                },
                error: function() {
                    toastr.error('{{ \App\CentralLogics\translate('Add valid data') }}', {
                        CloseButton: true,
                        ProgressBar: true
                    });
                }
            });
        }

        function last_location_view() {
            toastr.warning('{{ \App\CentralLogics\translate('Only available when order is out for delivery!') }}', {
                CloseButton: true,
                ProgressBar: true
            });
        }
    </script>

    <script>
        $('#assignDeliveryMan').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var order_id = button.data('id');
            console.log(order_id)

            var vehicle_id = button.data('vehicle');
            console.log(vehicle_id)

            document.querySelectorAll('.order_id_input').forEach(function(button) {
                button.value = order_id;

            });

            document.querySelectorAll('.vehicle_id').forEach(function(vehicle) {
                if (vehicle.id == vehicle_id) {
                    document.querySelector('.vehicle_' + vehicle.id).disabled = true;

                } else {
                    document.querySelector('.vehicle_' + vehicle.id).disabled = false;

                }
            });

        })
    </script>

    <script>
        $(document).ready(function() {
            $('[data-tooltip="tooltip"]').tooltip();
        });
    </script>
@endpush