@php
    use App\Enums\PermissionEnum;
    use App\Services\UserPermissionService;
@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/datatables-buttons-bs5/buttons.bootstrap5.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') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.css') }}" />
@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" id="date_from" class="form-control flatpickr" placeholder="{{ trans('admin.from_date') }}"/>
                        <input type="text" name="date_to" id="date_to" class="form-control flatpickr" placeholder="{{ trans('admin.to_date') }}"/>
                    </div>
                </div>

                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.status') }}</label>
                    <select name="status" id="status" class="form-select select2">
                        <option value="">{{ trans('admin.all') }}</option>
                        <option value="1">{{ trans('admin.active') }}</option>
                        <option value="0">{{ trans('admin.inactive') }}</option>
                    </select>
                </div>

                @if($role === 'provider')
                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.working_mode') }}</label>
                    <select name="working_mode" id="working_mode" class="form-select select2">
                        <option value="">{{ trans('admin.all') }}</option>
                        <option value="commission">{{ trans('admin.commission') }}</option>
                        <option value="subscription">{{ trans('admin.subscription') }}</option>
                    </select>
                </div>
                @endif

                <div class="col-md-{{ $role === 'provider' ? 3 : 4 }}">
                    <label class="form-label">{{ trans('admin.search') }}</label>
                    <input type="text" name="search" id="search" class="form-control" placeholder="{{ trans('admin.search_with_name_phone_identity_email') }}">
                </div>

                <div class="col-md-{{ $role === 'provider' ? 2 : 3 }} text-end pt-4" style="margin-bottom: -15px;">
                    <button type="button" id="btn_filter" class="btn btn-primary">{{ trans('admin.filter') }}</button>
                    <a href="{{ url()->current() }}?role={{ $role }}{{ isset($isVerification) && $isVerification ? '&pending_verification=1' : '' }}" class="btn btn-label-secondary">{{ trans('admin.reset') }}</a>
                </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.name') }}</th>
                        <th>{{ trans('admin.phone') }}</th>
                        <th>{{ trans('admin.identity_number') }}</th>
                        <th>{{ trans('admin.email') }}</th>
                        @if($role === 'provider')
                            <th>{{ trans('admin.working_mode') }}</th>
                        @endif
                        <th>{{ trans('admin.notification_count') }}</th>
                        <th>{{ trans('admin.active') }}</th>
                        <th>{{ trans('admin.created_date') }}</th>
                        <th>{{ trans('admin.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @if($role === 'provider' && (UserPermissionService::can(PermissionEnum::SUBSCRIPTION_ASSIGN) || UserPermissionService::can(PermissionEnum::SUBSCRIPTION_CHANGE)))
    <!-- Assign Subscription Modal -->
    <div class="modal fade" id="assignSubscriptionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="mb-2" id="modalTitle">{{ trans('admin.assign_to_providers') }}</h3>
                        <p class="text-muted" id="providerName"></p>
                    </div>
                    <form id="assignSubscriptionForm" class="row g-3">
                        @csrf
                        <input type="hidden" name="provider_ids[]" id="modal_provider_id">
                        <div class="col-12">
                            <label class="form-label" for="subscription_id">{{ trans('admin.subscription') }}</label>
                            <select id="subscription_id" name="subscription_id" class="select2 form-select" data-placeholder="{{ trans('admin.select_all') }}" required>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="payment_method">{{ trans('admin.payment_method') }}</label>
                            <select id="payment_method" name="payment_method" class="form-select" required>
                                <option value="bank">{{ trans('admin.bank') }}</option>
                                <option value="card">{{ trans('admin.card') }}</option>
                                <option value="wallet">{{ trans('admin.wallet') }}</option>
                            </select>
                        </div>
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.save') }}</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ trans('admin.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif
@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/sweetalert2/sweetalert2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
@endsection

@section('page-script')
    @php
        $columns = [
            ['data' => ''],
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'name', 'name' => 'name'],
            ['data' => 'phone', 'name' => 'phone'],
            ['data' => 'identity_number', 'name' => 'identity_number'],
            ['data' => 'email', 'name' => 'email'],
        ];

        if ($role === 'provider') {
            $columns[] = ['data' => 'working_mode_name', 'name' => 'providerProfile.working_mode', 'searchable' => false];
        }

        $columns[] = ['data' => 'notification_count', 'name' => 'notification_count', 'searchable' => false, 'orderable' => false];
        $columns[] = ['data' => 'active', 'name' => 'is_active', 'searchable' => false];
        $columns[] = ['data' => 'created_date', 'name' => 'created_at', 'searchable' => false];
        $columns[] = ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false];
    @endphp

    @include('layouts._datatable', [
        'url' => route('admin.app_user.index', ['role' => $role, 'pending_verification' => $isVerification ?? false]),
        'buttonName' => $role == 'client' ? trans('admin.create_new_client') : trans('admin.create_new_provider'),
        'permissionCreateEnum' => (isset($isVerification) && $isVerification) ? null : ($role == 'client' ? PermissionEnum::CLIENT_CREATE : PermissionEnum::PROVIDER_CREATE),
        'urlCreate' => route('admin.app_user.create', ['role' => $role]),
        'permissionExportEnum' => $role == 'client' ? PermissionEnum::CLIENT_EXPORT : PermissionEnum::PROVIDER_EXPORT,
        'urlExport' => route('admin.app_user.index', ['role' => $role, 'export' => true, 'pending_verification' => $isVerification ?? false]),
        'header' => $title,
        'columns' => $columns,
    ])

    @include('layouts._delete')

    <script>
        $(document).ready(function() {
            flatPickerInitialization($('.flatpickr'), false, 'Y-m-d');

            $('.select2').each(function () {
                var element = $(this);
                element.select2({
                    placeholder: element.attr('placeholder'),
                    dropdownParent: element.parent()
                });
            });

            $('#btn_filter').on('click', function() {
                datatable.draw();
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Open modal and set provider data
            $(document).on('click', '.assign-subscription-btn', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                const isChange = $(this).find('i').hasClass('ti-rotate');

                $('#modal_provider_id').val(id);
                $('#providerName').text(name);
                $('#modalTitle').text(isChange ? "{{ trans('admin.change_subscription') }}" : "{{ trans('admin.assign_to_providers') }}");

                // Clear select2
                $('#subscription_id').val(null).trigger('change');

                $('#assignSubscriptionModal').modal('show');
            });

            // Subscription Select2
            $('#subscription_id').select2({
                dropdownParent: $('#assignSubscriptionModal'),
                ajax: {
                    url: "{{ route('admin.subscriptions_list') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term,
                            active: 1,
                            exclude_provider_id: $('#modal_provider_id').val(),
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.data,
                            pagination: {
                                more: (params.page * 10) < data.total
                            }
                        };
                    },
                    cache: true
                }
            });

            // Form Submit
            $('#assignSubscriptionForm').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);
                const submitBtn = form.find('button[type="submit"]');

                submitBtn.prop('disabled', true);

                $.ajax({
                    url: "{{ route('admin.subscription.assign_to_providers') }}",
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        $('#assignSubscriptionModal').modal('hide');

                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: true
                        }).then(() => {
                            $('.datatable').DataTable().ajax.reload();
                        });
                    },
                    error: function(xhr) {
                        let message = "{{ trans('admin.error') }}";
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: message
                        });
                        submitBtn.prop('disabled', false);
                    }
                });
            });
        });
    </script>
    <script>
        $(document).on('click', '.switch-working-mode', function() {
            const url = $(this).data('url');
            const name = $(this).data('name');
            const nextModeName = $(this).data('next-mode-name');

            Swal.fire({
                title: "{{ trans('admin.are_you_sure') }}",
                html: `<div class="mt-2">
                            {{ trans('admin.working_mode') }}: <strong>${name}</strong><br>
                            {{ trans('admin.switch_to') }} <strong>${nextModeName}</strong>?
                       </div>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: "{{ trans('admin.yes') }}",
                cancelButtonText: "{{ trans('admin.cancel') }}",
                customClass: {
                    confirmButton: 'btn btn-primary me-3 waves-effect waves-light',
                    cancelButton: 'btn btn-label-secondary waves-effect waves-light'
                },
                buttonsStyling: false,
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return $.ajax({
                        url: url,
                        type: 'GET',
                        success: function(response) {
                            return response;
                        },
                        error: function(xhr) {
                            Swal.showValidationMessage(
                                xhr.responseJSON.message || "{{ trans('admin.error') }}"
                            );
                        }
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        icon: 'success',
                        title: result.value.message,
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        $('.datatable').DataTable().ajax.reload(null, false);
                    });
                }
            });
        });
    </script>
@endsection