@extends('layouts.master')
@php
    $pageTitle = match($viewType) {
        'pending' => trans('admin.pending_orders_list'),
        'in_progress' => trans('admin.in_progress_orders_list'),
        'completed' => trans('admin.completed_orders_list'),
        default => trans('admin.all_orders_list'),
    };
@endphp
@section('title', $pageTitle)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
    <style>
        .select2-results__option, .select2-selection__rendered {
            color: #6f6b7d;
        }
    </style>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => $pageTitle, 'url' => null],
        ],
    ])

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter_form" class="row g-3">
                @if($viewType === 'all')
                <div class="col-md-1">
                    <label class="form-label">{{ trans('admin.status') }}</label>
                    <select name="status" class="form-select select2">
                        <option value="">{{ trans('admin.all_statuses') }}</option>
                        @foreach ($statuses as $status)
                            <option value="{{ $status->value }}">{{ $status->name() }}</option>
                        @endforeach
                    </select>
                </div>
                @endif
                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.service') }}</label>
                    <select name="service_id" class="form-select select2">
                        <option value="">{{ trans('admin.all_services') }}</option>
                        @foreach ($services as $service)
                            <option value="{{ $service->id }}">{{ $service->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.client') }}</label>
                    <select name="client_id" class="form-select select2-ajax" data-role="client">
                        <option value="">{{ trans('admin.select_client') }}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.provider') }}</label>
                    <select name="provider_id" class="form-select select2-ajax" data-role="provider">
                        <option value="">{{ trans('admin.select_provider') }}</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label class="form-label">{{ trans('admin.order_type') }}</label>
                    <select name="type" class="form-select select2">
                        <option value="">{{ trans('admin.all_types') }}</option>
                        <option value="system">{{ trans('admin.system') }}</option>
                        <option value="custom">{{ trans('admin.custom') }}</option>
                    </select>
                </div>
                <div class="col-md-{{ $viewType === 'all' ? 4 : 4 }}">
                    <label class="form-label">{{ trans('admin.duration') }}</label>
                    <div class="input-group">
                        <input type="text" name="date_from" class="form-control flatpickr" placeholder="{{ trans('admin.from_date') }}" />
                        <input type="text" name="date_to" class="form-control flatpickr" placeholder="{{ trans('admin.to_date') }}" />
                    </div>
                </div>
                <div class="col-12 text-end">
                    <button type="button" class="btn btn-primary btn-filter">{{ trans('admin.filter') }}</button>
                    <button type="reset" class="btn btn-label-secondary btn-reset">{{ trans('admin.reset') }}</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <table class="datatable table table-bordered table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th>{{ trans('admin.id') }}</th>
                        <th>{{ trans('admin.client') }}</th>
                        <th>{{ trans('admin.provider') }}</th>
                        <th>{{ trans('admin.service') }}</th>
                        <th>{{ trans('admin.order_type') }}</th>
                        <th>{{ trans('admin.total') }}</th>
                        <th>{{ trans('admin.status') }}</th>
                        <th>{{ trans('admin.created_at') }}</th>
                        <th>{{ trans('admin.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
@endsection

@section('page-script')
    @include('layouts._datatable', [
        'url' => route(match($viewType) {
            'pending' => 'admin.order.pending',
            'in_progress' => 'admin.order.in_progress',
            'completed' => 'admin.order.completed',
            default => 'admin.order.index',
        }),
        'header' => $pageTitle,
        'columns' => [
            ['data' => ''],
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'client_name', 'name' => 'client.name'],
            ['data' => 'provider_name', 'name' => 'provider.name'],
            ['data' => 'service_name', 'name' => 'service.name'],
            ['data' => 'order_type', 'name' => 'service_id', 'orderable' => true, 'searchable' => false],
            ['data' => 'price', 'name' => 'price'],
            ['data' => 'status', 'name' => 'status'],
            ['data' => 'created_at', 'name' => 'created_at'],
            ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false],
        ],
    ])

    <script>
        $(document).ready(function() {
            $(".flatpickr").flatpickr({
                dateFormat: "Y-m-d"
            });

            $(".select2").select2();

            $(".select2-ajax").each(function() {
                var role = $(this).data('role');
                $(this).select2({
                    ajax: {
                        url: "{{ route('admin.app_user.select2') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                role: role
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.data,
                                pagination: {
                                    more: data.next_page_url !== null
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: "{{ trans('admin.select') }}",
                    allowClear: true
                });
            });

            $('.btn-filter').on('click', function() {
                datatable.ajax.reload();
            });

            $('.btn-reset').on('click', function() {
                $('#filter_form')[0].reset();
                $('.select2, .select2-ajax').val(null).trigger('change');
                datatable.ajax.reload();
            });

            // Status Update Logic
            $(document).on('click', '.update-status', function() {
                var orderId = $(this).data('id');
                var currentStatus = $(this).data('status');
                var updateUrl = "{{ route('admin.order.update_status', ':id') }}".replace(':id', orderId);

                var statusOptions = {};
                @foreach ($statuses as $status)
                    statusOptions["{{ $status->value }}"] = "{{ $status->name() }}";
                @endforeach

                Swal.fire({
                    title: "{{ trans('admin.update_order_status') }}",
                    input: 'select',
                    inputOptions: statusOptions,
                    inputValue: currentStatus,
                    showCancelButton: true,
                    confirmButtonText: "{{ trans('admin.yes_update_it') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    showLoaderOnConfirm: true,
                    preConfirm: (newStatus) => {
                        return $.ajax({
                            url: updateUrl,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                status: newStatus
                            }
                        }).catch(xhr => {
                            Swal.showValidationMessage(
                                xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}"
                            );
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: result.value.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        datatable.ajax.reload(null, false);
                    }
                });
            });
        });
    </script>
    @include('layouts._delete')
@endsection