@extends('layouts.admin.master')

@section('title')
    User List
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="h4 mb-1">User List</h4>
                                <p class="text-muted">Manage all user from here.</p>
                            </div>
                            @can('create_user')
                                <a href="{{ route('admin.users.create') }}" class="add-btn">
                                    <i class="fa fa-plus-circle"></i> ADD NEW
                                </a>
                            @endcan
                        </div>
                    </div>
                </div>

                <div class="card dashboard-custom-card card-custom">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table datatable custom-table dt-responsive nowrap">
                                <thead>
                                <tr>
                                    <th class="fs-5">SL#</th>
                                    <th class="fs-5">Photo</th>
                                    <th class="fs-5">Name</th>
                                    <th class="fs-5">Faculty</th>
                                    <th class="fs-5">Reg. No.</th>
                                    <th class="fs-5">Email</th>
                                    <th class="fs-5">Mobile</th>
                                    <th class="fs-5">User Type</th>
                                    <th class="fs-5">Status</th>
                                    <th class="fs-5">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div class="overlay" style="display: none;">
        <div class="spinner">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>

    @include('utils.delete-confirm-modal')
    @include('utils.approve-modal')
@endsection

@push('css')
    <style>
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            text-align: center;
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
    </style>
@endpush

@push('js')
    <script>
        $(function () {
            const dataTable = $('.datatable').DataTable({
                order: [],
                processing: true,
                serverSide: true,
                lengthMenu: [[10, 20, 50, 100, 200, 500, -1], [10, 20, 50, 100, 200, 500, "All"]],
                pageLength: 10,

                ajax: {
                    url: "{{ route('admin.users.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        // Show spinner before AJAX request starts
                        $('.overlay').fadeIn(200);
                    },
                    complete: function () {
                        // Hide spinner when request completes
                        $('.overlay').fadeOut(200);
                    }
                },

                dom: "<'row'<'col-md-3 d-flex align-items-center'l><'col-md-3 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'B>>" +
                    "<'row'<'col-md-12'tr>>" +
                    "<'row'<'col-md-6'i><'col-md-6'p>>",

                buttons: [
                    {
                        text: '<img src="/frontend/logo/download-cloud-02.png" alt="Export Excel" width="24" height="24"> Export Full Data',
                        className: 'btn btn-success btn-sm ms-2',
                        action: function (e, dt, node, config) {
                            // Server-side export with all data
                            window.location.href = "{{ route('admin.users.export') }}";
                        }
                    },
                    {
                        text: '<img src="/frontend/logo/sliders-02.png" alt="Filter" width="24" height="24"> Filter',
                        className: 'btn btn-light btn-sm border'
                    }
                ],

                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            // Calculate descending SL# based on total records
                            var info = meta.settings.json;
                            var totalRecords = info.recordsFiltered || info.recordsTotal || 0;
                            return totalRecords - (meta.row + meta.settings._iDisplayStart);
                        }
                    },
                    { 
                        data: "profile_pic", 
                        name: "profile_pic",
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return data;
                        }
                    },
                    { data: "name", name: "name" },
                    { data: "faculty_name", name: "faculties.name" },
                    { data: "reg_number", name: "registration_numbers.reg_number" },
                    { data: "email", name: "email" },
                    { data: "phone", name: "phone" },
                    { data: "user_type", name: "user_type" },
                    { 
                        data: "status", 
                        name: "status",
                        orderable: true,
                        searchable: false,
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return `<div class="text-end">${data}</div>`;
                        }
                    }
                ]
            });

            $(document).on('click', '.delete', function (e) {
                $('#delete_form')[0].action = $(this).data('action');
                $('#delete_modal').modal('show');
            });

            $(document).on('click', '.member-approve', function (e) {
                e.preventDefault();
                const actionUrl = $(this).attr('href');
                const memberCategory = $(this).data('member-category');
                $('#approve_form').attr('action', actionUrl);
                $('#member_category').val(memberCategory || '');
                $('#member_category_error').text('');
                $('#member_approve_modal').modal('show');
            });

            $('#approve_form').on('submit', function (e) {
                e.preventDefault();

                let memberCategory = $('#member_category').val();
                if (memberCategory === '') {
                    $('#member_category_error').text('Member category is required.').css('color', 'red');
                    return;
                }

                // Show spinner before approval request
                $('.overlay').fadeIn(200);

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: {
                        member_category: memberCategory,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        setTimeout(() => {
                            $('.overlay').fadeOut(200);
                        }, 500);

                        if (response.success) {
                            $('#member_approve_modal').modal('hide');
                            dataTable.draw();
                            toastr.success(response.message);
                        } else {
                            $('#csl_id_error').text(response.message || 'An error occurred').css('color', 'red');
                        }
                    },
                    error: function (xhr) {
                        setTimeout(() => {
                            $('.overlay').fadeOut(200);
                        }, 500);

                        let errorMsg = 'An error occurred. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        } else if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.csl_id) {
                            errorMsg = xhr.responseJSON.errors.csl_id[0];
                        }
                        $('#csl_id_error').text(errorMsg).css('color', 'red');
                    }
                });
            });

            // Handle toggle status
            $(document).on('click', '.toggle-status', function (e) {
                e.preventDefault();
                
                const userId = $(this).data('user-id');
                const currentStatus = $(this).data('status');
                const statusText = currentStatus == 1 ? 'deactivate' : 'activate';
                
                if (confirm(`Are you sure you want to ${statusText} this user?`)) {
                    // Show spinner
                    $('.overlay').fadeIn(200);
                    
                    $.ajax({
                        url: "{{ route('admin.users.toggle-status', ':id') }}".replace(':id', userId),
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            setTimeout(() => {
                                $('.overlay').fadeOut(200);
                            }, 500);

                            if (response.success) {
                                toastr.success(response.message);
                                // Keep current page - don't reset pagination
                                dataTable.draw(false);
                            } else {
                                toastr.error(response.message || 'An error occurred');
                            }
                        },
                        error: function (xhr) {
                            setTimeout(() => {
                                $('.overlay').fadeOut(200);
                            }, 500);

                            let errorMsg = 'An error occurred. Please try again.';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            }
                            toastr.error(errorMsg);
                        }
                    });
                }
            });
        });
    </script>
@endpush