@extends('backend.layout.app')

@section('content')
    <div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form action="{{ route('admin.user.create.submit') }}" method="POST" class="modal-content" id="createUserForm">
                @csrf
                <!-- Modal Header -->
                <div class="modal-header bg-primary ">
                    <h5 class="modal-title text-white" id="createUserModalLabel">Create New User</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body">
                    <div id="errorMessages" class="alert alert-danger mb-4" style="display:none;"></div>

                    <div class="row g-3">
                        <!-- First Row - Name and Email -->
                        <div class="col-md-6">
                            <label for="userName" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="userName" name="name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="userEmail" class="form-label">Email address <span
                                    class="text-danger">*</span></label>
                            <input type="email" class="form-control" id="userEmail" name="email" required>
                        </div>

                        <!-- Second Row - Phone and Password -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control" id="phone" name="phone" required>
                        </div>
                        <div class="col-md-6">
                            <label for="userPassword" class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="userPassword" name="password" required>
                        </div>
                        {{-- @if (Auth::user()->role == 3)
                            <div class="col-6">
                                <label for="role" class="form-label">Role</label>
                                <select class="form-select" id="role" name="role">
                                    <option value="1" style="background-color: #EFF6FF; color: #1E40AF;">User</option>
                                    <option value="2" style="background-color: #ECFDF5; color: #166534;">Sub Admin</option>
                                </select>
                            </div>
                        @endif --}}

                        <div class="col-6">
                            <label for="category_id" class="form-label">User Category </label>
                            <select class="form-select" id="category_id" name="category_id">
                                <option value="">Select a Category</option>
                                @foreach ($categories as $categorie)
                                    <option value="{{ $categorie->id }}">{{ $categorie->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Fourth Row - Address (full width) -->
                        <div class="col-12">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="3"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-user-plus me-2"></i> Create User
                    </button>
                </div>
            </form>
        </div>
    </div>


    <div class="page-content">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-header bg-white">


                        <!-- Second Row: Stats Cards -->
                        <div class="row mt-2">
                            <div class="col d-flex flex-wrap gap-3">
                                <!-- Period Filter -->
                                <div class="stat-card"
                                    style="background-color: rgba(13, 110, 253, 0.1); border-left: 4px solid #0d6efd; padding: 0.6rem 1rem; border-radius: 0.4rem; flex: 1;  max-width:200px">
                                    <div class="stat-label"
                                        style="font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; color: #0d6efd;">
                                        Total User</div>
                                    <div class="stat-value" id="total-users-count"
                                        style="font-size: 1.1rem; font-weight: 700; color: #0b5ed7;">

                                    </div>
                                </div>

                                @if (Auth::user()->role == 3)
                                    <div class="stat-card"
                                        style="background-color: rgba(111, 66, 193, 0.1); border-left: 4px solid #6f42c1; padding: 0.6rem 1rem; border-radius: 0.4rem; flex: 1; max-width:200px">
                                        <div class="stat-label" id
                                            style="font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; color: #6f42c1;">
                                            Total Sub Admin</div>
                                        <div class="stat-value"
                                            style="font-size: 1.1rem; font-weight: 700; color: #5a3a9a;"
                                            id="sub-admin-count">
                                        </div>
                                    </div>
                                @endif


                                <div class="col d-flex justify-content-end align-items-center">
                                    <a href="{{ route('admin.user.index', ['add' => 'active']) }}"
                                        class="btn btn-success px-3 btn-sm">
                                        <i class="bi bi-plus-circle me-1"></i> Add New User
                                    </a>
                                </div>


                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div id="datatable_internal_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <table class="table table-striped my-table2 dataTable no-footer yajraDataDelete" id="userTable"
                                        role="grid" aria-describedby="datatable_internal_info">
                                        <thead class="thead-dark">
                                            <th>#</th>
                                            <th>User</th>
                                            <th>Phone</th>
                                            <th>Category</th>
                                            <th>Role</th>
                                            <th>Action</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @push('js')
     

        <script>
            $(function() {
                let table = $('#userTable').DataTable({
                    processing: true,
                    serverSide: true,
                    pageLength: 25,
                    ajax: "{{ route('admin.user.index') }}",
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'phone',
                            name: 'phone'
                        },
                        {
                            data: 'category_name',
                            name: 'category.name'
                        },
                        {
                            data: 'role',
                            name: 'role'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: true,
                            searchable: true
                        },
                    ],
                    drawCallback: function(settings) {
                       
                        var json = settings.json;
                        if (json) {
                            $('#total-users-count').text(json.totalUser || 0);
                            $('#sub-admin-count').text(json.subAdmin || 0);
                        }
                    }
                });

            });
        </script>

        {{-- User Create --}}
        <script>
            $(document).ready(function() {
                $('#createUserForm').on('submit', function(e) {
                    e.preventDefault();

                    let formData = new FormData(this);

                    $.ajax({
                        url: $(this).attr('action'),
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            $('#errorMessages').hide().empty();
                            if (response.errors) {

                                console.log(response.errors)
                                let errorHtml = "<ul class='mb-0'>";

                                $.each(response.errors, function(field, messages) {
                                    $.each(messages, function(i, msg) {
                                        errorHtml += '<li>' + msg + '</li>';
                                    });
                                });

                                errorHtml += '</ul>';

                                $('#errorMessages').html(errorHtml).show();

                            } else {
                                $('#createUserModal').modal('hide');
                                $('#createUserForm')[0].reset();
                                $('#userTable').DataTable().ajax.reload(null, false);
                                IVISToast.success('User created successfully!');
                            }

                        },
                        error: function(xhr) {
                            console.log(xhr.responseJSON);
                            alert('Something went wrong!');
                        }
                    });
                });
            });
        </script>
    @endpush

    @if (request()->query('add') == 'active')
        @push('js')
            <script>
                $(document).ready(function() {
                    var myModal = new bootstrap.Modal(document.getElementById('createUserModal'));
                    myModal.show();
                });
            </script>
        @endpush
    @endif
@endsection