@php
    use App\Enums\PermissionEnum;
    use App\Services\UserPermissionService;
@endphp
@extends('layouts.master')
@section('title', $role === 'client' ? trans('admin.client_wallets_list') : trans('admin.provider_wallets_list'))

@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/sweetalert2/sweetalert2.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => $role === 'client' ? trans('admin.client_wallets_list') : trans('admin.provider_wallets_list'), '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.search_name') }}</label>
                    <input type="text" name="name" id="name" class="form-control" placeholder="{{ trans('admin.name') }}">
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.search_phone') }}</label>
                    <input type="text" name="phone" id="phone" class="form-control" placeholder="{{ trans('admin.phone') }}">
                </div>

                <div class="col-md-6 text-end pt-4">
                    <button type="button" id="btn_filter" class="btn btn-primary">{{ trans('admin.filter') }}</button>
                    <a href="{{ url()->current() }}" 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.user') }}</th>
                        <th>{{ trans('admin.phone') }}</th>
                        <th>{{ trans('admin.role') }}</th>
                        <th>{{ trans('admin.balance') }}</th>
                        <th>{{ trans('admin.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Send Balance Modal -->
    <div class="modal fade" id="sendBalanceModal" 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">{{ trans('admin.send_balance') }}</h3>
                    </div>
                    <form id="sendBalanceForm" class="row g-3">
                        <div class="col-12 mb-3">
                            <label class="form-label" for="user_ids">{{ trans('admin.select_users') }} ({{ trans('admin.all_users') }})</label>
                            <select id="user_ids" name="user_ids[]" class="select2 form-select" multiple>
                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label" for="amount">{{ trans('admin.amount') }}</label>
                            <input type="number" id="amount" name="amount" class="form-control" step="0.01" required />
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label" for="type">{{ trans('admin.type') }}</label>
                            <select id="type" name="type" class="form-select" required>
                                <option value="credit">{{ trans('admin.credit') }}</option>
                                <option value="debit">{{ trans('admin.debit') }}</option>
                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label" for="reference_type">{{ trans('admin.reference') }}</label>
                            <input type="text" id="reference_type" name="reference_type" class="form-control" placeholder="Admin Send" />
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.submit') }}</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>
@endsection

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

@section('page-script')
    @include('layouts._datatable', [
        'url' => route('admin.wallet.' . $role),
        'header' => $role === 'client' ? trans('admin.client_wallets_list') : trans('admin.provider_wallets_list'),
        'customButtons' => UserPermissionService::can(PermissionEnum::WALLET_SEND_BALANCE) ? [
            [
                'text' => '<i class="ti ti-send me-md-1"></i><span class="d-md-inline-block d-none">' . trans('admin.send_balance') . '</span>',
                'className' => 'btn btn-primary btn-send-balance waves-effect waves-light ms-2',
                'action' => 'openSendBalanceModal'
            ]
        ] : [],
        'columns' => [
            ['data' => ''],
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'user_name', 'name' => 'app_users.name'],
            ['data' => 'user_phone', 'name' => 'app_users.phone'],
            ['data' => 'user_role', 'name' => 'app_users.role', 'orderable' => false],
            ['data' => 'balance', 'name' => 'balance'],
            ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false],
        ],
    ])

    <script>
        $(document).ready(function() {
            $('#btn_filter').on('click', function() {
                datatable.draw();
            });
        });
    </script>
    <script shadow>
        $(document).on('click', '.view-transactions', function() {
            const walletId = $(this).data('id');
            window.location.href = "{{ route('admin.wallet.transactions') }}?wallet_id=" + walletId;
        });

        function openSendBalanceModal() {
            $('#sendBalanceModal').modal('show');
        }

        $(function() {
            $('#user_ids').select2({
                dropdownParent: $('#sendBalanceModal'),
                ajax: {
                    url: "{{ route('admin.app_user.select2') }}?role=" + "{{ $role }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.data
                        };
                    },
                    cache: true
                },
                placeholder: "{{ trans('admin.select_users') }}",
                minimumInputLength: 0
            });

            $('#sendBalanceForm').on('submit', function(e) {
                e.preventDefault();
                const formData = $(this).serialize();

                $.ajax({
                    url: "{{ route('admin.wallet.send_balance') }}",
                    method: 'POST',
                    data: formData + "&_token={{ csrf_token() }}",
                    success: function(response) {
                        $('#sendBalanceModal').modal('hide');
                        Swal.fire({
                            title: 'Success',
                            text: response.message,
                            icon: 'success'
                        });
                    },
                    error: function(xhr) {
                        Swal.fire('Error', xhr.responseJSON.message || 'Something went wrong', 'error');
                    }
                });
            });
        });
    </script>
@endsection