@extends('layouts.vendor.app')

@section('title', translate('messages.dispatch'))

@push('css_or_js')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <div class="content container-fluid">
        <!-- Page Header -->
        <div class="page-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center w-100">
                <div>
                    <h1 class="page-header-title text-capitalize">
                        <span class="page-header-icon">
                            <img src="{{asset('assets/admin/img/order.png')}}" class="w--26" alt="">
                        </span>
                        <span>
                            {{ translate('messages.dispatch') }} {{ translate('messages.orders') }}
                            <span class="badge badge-soft-dark ml-2">{{ $orders->total() }}</span>
                        </span>
                    </h1>
                </div>
                @isset($stats)
                    <div class="d-flex flex-wrap gap-2">
                        <div class="bg-light2 px-3 py-2 rounded mr-2">
                            <div class="text-muted fs-12">{{ translate('messages.total_dispatch_orders') }}</div>
                            <div class="fs-16 font-weight-bold">{{ $stats['total_dispatch_orders'] ?? 0 }}</div>
                        </div>
                        <div class="bg-light2 px-3 py-2 rounded mr-2">
                            <div class="text-muted fs-12">{{ translate('messages.assigned_today') }}</div>
                            <div class="fs-16 font-weight-bold">{{ $stats['total_assigned_today'] ?? 0 }}</div>
                        </div>
                        <div class="bg-light2 px-3 py-2 rounded">
                            <div class="text-muted fs-12">{{ translate('messages.delivered_today') }}</div>
                            <div class="fs-16 font-weight-bold">{{ $stats['total_delivered_today'] ?? 0 }}</div>
                        </div>
                    </div>
                @endisset
            </div>
        </div>
        <!-- End Page Header -->

        <div class="card">
            <div class="card-header py-2 border-0">
                <div class="search--button-wrapper justify-content-end">
                    <form class="search-form min--260">
                        <div class="input-group input--group">
                            <input type="search" value="{{ request()?->search ?? null }}" name="search"
                                   class="form-control"
                                   placeholder="{{translate('messages.ex_:_search_order_id')}}"
                                   aria-label="{{translate('messages.search')}}">
                            <button type="submit" class="btn btn--secondary"><i class="tio-search"></i></button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body p-0">
                <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>#</th>
                            <th>{{ translate('messages.order_id') }}</th>
                            <th>{{ translate('messages.order_date') }}</th>
                            <th>{{ translate('messages.customer_information') }}</th>
                            <th>{{ translate('messages.total_amount') }}</th>
                            <th class="text-center">{{ translate('messages.order_status') }}</th>
                            <th class="text-center">{{ translate('messages.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($orders as $key => $order)
                            <tr>
                                <td>{{ $key + $orders->firstItem() }}</td>
                                <td>
                                    <a href="{{ route('vendor.order.details', ['id' => $order['id']]) }}">
                                        {{ $order['id'] }}
                                    </a>
                                </td>
                                <td>
                                    <div>{{ date('d M Y', strtotime($order['created_at'])) }}</div>
                                    <div class="d-block text-uppercase">
                                        {{ date(config('timeformat'), strtotime($order['created_at'])) }}
                                    </div>
                                </td>
                                <td>
                                    @if($order->is_guest)
                                        @php($customer_details = json_decode($order['delivery_address'], true))
                                        <strong>{{ $customer_details['contact_person_name'] }}</strong>
                                        <div>{{ $customer_details['contact_person_number'] }}</div>
                                    @elseif($order->customer)
                                        <strong>{{ $order->customer['f_name'].' '.$order->customer['l_name'] }}</strong>
                                        <div>{{ $order->customer['phone'] }}</div>
                                    @else
                                        <label class="badge badge-danger">
                                            {{ translate('messages.invalid_customer_data') }}
                                        </label>
                                    @endif
                                </td>
                                <td>
                                    <div class="text-right mw--85px">
                                        <div>{{ \App\CentralLogics\Helpers::format_currency($order['order_amount']) }}</div>
                                        <strong class="text-danger">
                                            {{ $order->payment_status == 'paid' ? translate('messages.paid') : translate('messages.unpaid') }}
                                        </strong>
                                    </div>
                                </td>
                                <td class="text-center text-capitalize">
                                    <span class="badge badge-soft-info">
                                        {{ str_replace('_', ' ', $order['order_status']) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <button type="button"
                                            class="btn btn-sm btn--primary js-open-assign-modal"
                                            data-order-id="{{ $order['id'] }}">
                                        {{ translate('messages.assign_deliveryman') }}
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">
                                    {{ translate('messages.no_data_found') }}
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="card-footer">
                    {{ $orders->links() }}
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="dmAssignModal" tabindex="-1" role="dialog" aria-labelledby="dmAssignModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="dmAssignModalLabel">{{ translate('messages.assign_deliveryman') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if(isset($deliveryMen) && count($deliveryMen) > 0)
                        <div class="row">
                            <div class="col-md-12 my-2">
                                <ul class="list-group overflow-auto initial--23">
                                    @foreach ($deliveryMen as $dm)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span class="dm_list">
                                                <img class="avatar avatar-sm avatar-circle mr-2 onerror-image"
                                                     data-onerror-image="{{ asset('assets/admin/img/160x160/img1.jpg') }}"
                                                     src="{{ $dm['image_full_url'] }}"
                                                     alt="{{ $dm['name'] }}">
                                                {{ $dm['name'] }}
                                            </span>
                                            <button type="button"
                                                    class="btn btn-primary btn-xs float-right js-add-delivery-man"
                                                    data-id="{{ $dm['id'] }}">
                                                {{ translate('messages.assign') }}
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    @else
                        <p class="text-muted mb-0">{{ translate('messages.no_deliveryman_available') }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script_2')
    <script>
        (function () {
            var assignBaseUrl = "{{ route('vendor.order.add-delivery-man', ['order_id' => 0, 'delivery_man_id' => 0]) }}".replace('/0/0', '');
            var currentOrderId = null;

            $(document).ready(function () {
                $(document).on('click', '.js-open-assign-modal', function (e) {
                    e.preventDefault();
                    currentOrderId = $(this).attr('data-order-id') || $(this).data('order-id');
                    var $modal = $('#dmAssignModal');
                    if ($modal.length) {
                        $modal.appendTo('body').modal('show');
                    }
                });

                $(document).on('click', '.js-add-delivery-man', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    var id = $(this).attr('data-id') || $(this).data('id');
                    if (!currentOrderId || !id) {
                        toastr.error('{{ translate('messages.Order_not_found') }}', { CloseButton: true, ProgressBar: true });
                        return false;
                    }
                    var url = assignBaseUrl + '/' + currentOrderId + '/' + id;
                    var $btn = $(this);
                    $btn.prop('disabled', true);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                        success: function () {
                            $('#dmAssignModal').modal('hide');
                            toastr.success('{{ translate('messages.order_status_updated') }}', { CloseButton: true, ProgressBar: true });
                            location.reload();
                        },
                        error: function (xhr) {
                            $btn.prop('disabled', false);
                            var message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : '{{ translate('messages.something_went_wrong') }}';
                            if (xhr.status === 404) message = '{{ translate('messages.Order_not_found') }}';
                            toastr.error(message, { CloseButton: true, ProgressBar: true });
                        }
                    });
                    return false;
                });
            });
        })();
    </script>
@endpush