@php
    use App\Enums\PermissionEnum;
    $title = trans('admin.complaints_list');
    if ($viewType === 'client') $title = trans('admin.client_complaints_list');
    if ($viewType === 'provider') $title = trans('admin.provider_complaints_list');
@endphp
@extends('layouts.master')
@section('title', $title)

@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/select2/select2.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.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' => $title, 'url' => null],
        ],
    ])

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter_form" class="row g-3">
                <div class="col-md-3">
                    <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-md-2">
                    <label class="form-label">{{ trans('admin.user') }}</label>
                    <select name="user_id" class="form-select select2-ajax" data-role="{{ $viewType !== 'all' ? $viewType : '' }}">
                        <option value="">{{ trans('admin.select') }}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.phone') }}</label>
                    <input type="text" name="phone" class="form-control"
                           placeholder="{{ trans('admin.phone') }}"/>
                </div>
                @if($viewType === 'all')
                <div class="col-md-1">
                    <label class="form-label">{{ trans('admin.role') }}</label>
                    <select name="role" class="form-select select2">
                        <option value="">{{ trans('admin.all') }}</option>
                        <option value="client">{{ trans('admin.client') }}</option>
                        <option value="provider">{{ trans('admin.provider') }}</option>
                    </select>
                </div>
                @else
                    <input type="hidden" name="role" value="{{ $viewType }}">
                @endif
                <div class="col-md-1">
                    <label class="form-label">{{ trans('admin.order') }}</label>
                    <input type="text" name="order_id" class="form-control"
                           placeholder="{{ trans('admin.order_id') }}"/>
                </div>
                <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') }}</option>
                        @foreach ($statuses as $status)
                            <option value="{{ $status->value }}">{{ $status->name() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="{{ $viewType === 'all' ? 'col-md-2' : 'col-md-3' }} text-end pt-4">
                    <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>
                    @can(PermissionEnum::COMPLAINT_EXPORT)
                        <button type="button"
                                class="btn btn-label-success btn-export">{{ trans('admin.export') }}</button>
                    @endcan
                </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>{{ trans('admin.id') }}</th>
                    <th>{{ trans('admin.user') }}</th>
                    <th>{{ trans('admin.phone') }}</th>
                    <th>{{ trans('admin.role') }}</th>
                    <th>{{ trans('admin.order') }}</th>
                    <th>{{ trans('admin.title') }}</th>
                    <th>{{ trans('admin.description') }}</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/select2/select2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
@endsection

@section('page-script')
    @include('layouts._datatable', [
        'url' => route('admin.complaint.' . ($viewType === 'all' ? 'index' : ($viewType . 's' ))),
        'header' => $title,
        'columns' => [
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'user_name', 'name' => 'user.name'],
            ['data' => 'user_phone', 'name' => 'user.phone', 'orderable' => false],
            ['data' => 'user_role', 'name' => 'user.role', 'orderable' => false],
            ['data' => 'order_id', 'name' => 'order_id'],
            ['data' => 'subject', 'name' => 'subject'],
            ['data' => 'message', 'name' => 'message'],
            ['data' => 'status', 'name' => 'status'],
            ['data' => 'created_at', 'name' => 'created_at'],
            ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false],
        ]
    ])

    <script>
        $(document).ready(function () {
            flatPickerInitialization($('.flatpickr'), false, '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 {
                                term: 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();
            });

            $('.btn-export').on('click', function () {
                var query = $('#filter_form').serialize();
                window.location.href = "{{ route('admin.complaint.export') }}?" + query;
            });

            $(document).on('change', '.change-status', function () {
                var id = $(this).data('id');
                var url = $(this).data('url');
                var status = $(this).val();

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        status: status
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        datatable.ajax.reload(null, false);
                    },
                    error: function (xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: "{{ trans('admin.error') }}",
                            text: xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}"
                        });
                    }
                });
            });
        });
    </script>
    @include('layouts._delete')
@endsection