@extends('layouts.app')
@section('title', 'Users List')
@section('content')

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Users</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Users</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div>
                        <button style="margin-bottom: 8px;display: none" id="delete-selected" class="btn btn-danger">Delete Selected</button>                        
                    </div>
                    <div class="card-header d-flex justify-content-end">
                        <a href="{{ route('users.create') }}" class="btn btn-primary mr-2">
                            <i class="fa fa-plus nav-icon"></i> Add
                        </a>
                        <a id="exportBtn" class="btn btn-success">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                    </div>
                    <div class="card-body table-wrape">                        
                        <table id="userTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="select-all"></th>
                                    <th>ID</th>
                                    <th>Profile</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone Number</th>
                                    <th>Wallet Amount</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="walletTopUpModal" tabindex="-1" role="dialog" aria-labelledby="walletTopUpModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="walletTopUpForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="walletTopUpModalLabel">Add Wallet Top-Up</h5>
                    <button type="button" class="close modal-close-btn" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="walletTopUpModalMsg">
                    </div>
                    <input type="hidden" name="user_id" class="user_id" value="">

                    <div class="form-group">
                        <label for="amount">
                            Amount <span class="text-danger">*</span>
                            <small class="text-muted">[Current: <span id="currentWalletAmount"></span>]</small>
                        </label>
                        <input type="text" name="amount" class="form-control"placeholder="Enter Amount" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                    </div>

                    <div class="form-group">
                        <label for="description">Description <span class="text-danger">*</span></label>
                        <input type="text" name="description" class="form-control" placeholder="Enter Description">
                    </div>
                    <div class="form-group">
                        <label for="description">Description Arabic<span class="text-danger">*</span></label>
                        <input type="text" name="description_ar" class="form-control" placeholder="Enter Description Arabic">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Add</button>
                    <button type="button" class="btn btn-secondary modal-close-btn" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
@section('scripts')
<script src="{{asset('js/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/additional-methods.min.js')}}"></script>
<script src="{{asset('js/custom.js')}}"></script>
<script>
    $('#walletTopUpModal').on('hide.bs.modal', function (e) {
        // Blur the focused element to prevent aria-hidden conflict
        if (document.activeElement) {
            document.activeElement.blur();
        }
    });
    $(document).ready(function() {
        $('#userTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('users.list') }}",
            drawCallback: function(settings) {
                toggleDeleteButton(); // hide button after table reload
            },
            columns: [
                { 
                    data: 'checkbox', 
                    name: 'checkbox', 
                    orderable: false, 
                    searchable: false 
                },
                {
                    data: 'id',
                    name: 'id',
                },
                {
                    data: 'profile_photo',
                    name: 'profile_photo',
                    defaultContent: '-',
                    orderable: false,
                },
                {
                    data: 'name',
                    name: 'name',
                    defaultContent: '-',
                },
                {
                    data: 'email',
                    name: 'email',
                    defaultContent: '-',
                },
                {
                    data: 'phone_number',
                    name: 'phone_number',
                    defaultContent: '-',
                },
                {
                    data: 'wallet_amount',
                    name: null, // or simply omit this line
                    defaultContent: '-',
                    orderable: false,
                },
                {
                    data: 'status',
                    name: 'status',
                    defaultContent: '-',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    defaultContent: '-',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            "order": [[1, 'desc']],
            createdRow: function(row, data, dataIndex) {                                
                // Add ID to row (assuming your data includes user ID in data[0] or proper index)
                $(row).attr('id', 'row_' + data.id); // if your data is an object with id

                // Add class to row
                $(row).addClass('user-row');

                // For adding id/class to a particular cell (e.g., status column at index 3)
                $('td', row).eq(7).addClass('status-column').attr('id', 'status_' + data.id);

                // For adding id/class to actions column (e.g., index 5)
                $('td', row).eq(9).addClass('action-buttons').attr('id', 'action_' + data.id);
            },
        });

        $(document).on('click', '.delete-btn', function(e) {
            e.preventDefault();
            var deleteUrl = $(this).data('url');
            var userId = $(this).data('id');

            deleteCode(deleteUrl,userId,'#userTable');
        });
         // Export CSV button
         $(document).on('click', '#exportBtn', function(e) {
            e.preventDefault();
            var exportUrl = "{{ route('users.export') }}";

            window.location.href = exportUrl;
        });        

        // Submit Wallet Top-Up Form
        $("#walletTopUpForm").validate({
            rules: {
                amount: {
                    required: true,
                    number: true,
                },
                description: {
                    required: true,
                },
                description_ar: {
                    required: true,
                }
            },
            messages: {
                amount: {
                    required: "Please enter an amount.",
                    number: "Enter a valid number.",
                },
                description: {
                    required: "Please enter a description."
                },
                description_ar: {
                    required: "Please enter a description in Arabic."
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function (form) {
                let formData = $(form).serialize();

                $.ajax({
                    url: "{{ route('users.addtopup') }}",
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    beforeSend: function () {
                        // Optional: show loader
                    },
                    success: function (response) {
                        $(".walletTopUpModalMsg").addClass("alert");

                        if (response.status) {
                            $(".walletTopUpModalMsg").removeClass("alert-danger").addClass("alert-success");
                            $(".walletTopUpModalMsg").html(response.message);

                            setTimeout(() => {
                                // $(form)[0].reset();
                                $(".walletTopUpModalMsg").html("");
                                $(".walletTopUpModalMsg").removeClass("alert alert-success");
                                $('#userTable').DataTable().ajax.reload(null, false);
                                resetWalletTopUpForm('#walletTopUpForm', '#walletTopUpModal');
                                $('#walletTopUpModal').modal('hide');
                            }, 1500);
                        } else {
                            $(".walletTopUpModalMsg").removeClass("alert-success").addClass("alert-danger");
                            $(".walletTopUpModalMsg").html(response.message);
                        }
                    },
                    error: function (xhr) {
                        let err = xhr.responseJSON;
                        let msg = "An unexpected error occurred.";
                        if (err && err.message) {
                            msg = err.message;
                        }
                        $(".walletTopUpModalMsg").addClass("alert");
                        $(".walletTopUpModalMsg").removeClass("alert-success").addClass("alert-danger");
                        $(".walletTopUpModalMsg").html(msg);
                    }
                });
            }
        });

        // Populate modal data when opening
        $(document).on('click', '.add-wallet-top-up-btn', function(e) {
            let userId = $(this).data('id');
            let currentAmount = $(this).data('current-amount');

            $('.user_id').val(userId);
            $('#currentWalletAmount').text(currentAmount);
        });

        // On close button
        $('.modal-close-btn').on('click', function () {
            resetWalletTopUpForm('#walletTopUpForm', '#walletTopUpModal');
        });
        $('#phone_number').on('blur', function() {
            var val = $(this).val().trim();
            if (val && !val.startsWith('+974')) {
                val = val.replace(/^(\+)?(974)?/, '');
                $(this).val('+974' + val);
            }
        });

        function resetWalletTopUpForm(formSelector, modalSelector) {
            const form = $(formSelector);
            const modal = $(modalSelector);

            // Clear hidden user ID field
            $('.user-id').val('');

            // Reset form fields
            form[0].reset();

            // Clear validation errors
            form.validate().resetForm();
            form.find('.form-control').removeClass('is-invalid');
        }    
        
        $('#delete-selected').on('click',function(){
            var url = "{{route('users.bulkDelete')}}";
            deleteSelectedUsersOrVendors(url,'#userTable','user');
        });
    });
</script>
@endsection