@extends('admin.layout.app')
@section('content')
    <div>
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-bold text-gray-800">Users</h3>
                <p class="text-sm text-gray-500 mt-1">Manage all your app users from here</p>
            </div>
            <div class="mt-4 sm:mt-0">
                <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center gap-2" onclick='openUserForm()'>
                    <i class="mdi mdi-plus text-lg leading-none"></i> Add New
                </button>
            </div>
        </div>

        <!-- DataTable Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table id="listDataTable" class="w-full whitespace-nowrap text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                                <th class="px-6 py-4 font-medium rounded-tl-lg">Image</th>
                                <th class="px-6 py-4 font-medium">Name</th>
                                <th class="px-6 py-4 font-medium">Phone</th>
                                <th class="px-6 py-4 font-medium">Email</th>
                                <th class="px-6 py-4 font-medium">Bandwidth</th>
                                <th class="px-6 py-4 font-medium">Data Use</th>
                                <th class="px-6 py-4 font-medium">Time Duration</th>
                                <th class="px-6 py-4 font-medium">Subscription Expire</th>
                                <th class="px-6 py-4 font-medium">Active</th>
                                <th class="px-6 py-4 font-medium rounded-tr-lg">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- User Modal -->
    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered relative">
            <form id="add_user" class="modal-content border-0 shadow-2xl rounded-xl overflow-hidden bg-white w-full">
                <input type="hidden" name="id">
                
                <!-- Modal Header -->
                <div class="bg-gray-50 border-b border-gray-100 px-6 py-4 flex items-center justify-between">
                    <h5 class="text-lg font-bold text-gray-800 modal-title">Add User</h5>
                    <button type="button" class="text-gray-400 hover:text-red-500 transition-colors focus:outline-none p-1 rounded-md hover:bg-red-50 flex items-center justify-center h-8 w-8" data-bs-dismiss="modal">
                        <i class="mdi mdi-close text-xl leading-none"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="p-6">
                    <div class="flex flex-col-reverse lg:flex-row gap-8">
                        <!-- Main Fields -->
                        <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <!-- Full Name -->
                            <div class="sm:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                                <input type="text" name="name" placeholder="Name" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            
                            <!-- Phone -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                <input type="text" name="phone" placeholder="Phone" pattern="\d{10}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            
                            <!-- Email -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                                <input type="email" name="email" placeholder="Email" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            
                            <!-- Device -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Device</label>
                                <select name="device" required class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm bg-white">
                                    <option value="">Select Device</option>
                                    @php
                                        for ($i=1; $i < 20; $i++) { 
                                            echo '<option value="'.$i.'">'.$i.'</option>';
                                        }
                                    @endphp
                                </select>
                            </div>
                            
                            <!-- Bandwidth -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Bandwidth</label>
                                <input type="text" name="bandwidth" placeholder="Bandwidth" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            
                            <!-- Subscription Status -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Subscription</label>
                                <select name="subscription" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm bg-white">
                                    <option value="">Select Subscription</option>
                                    <option value="1">Active</option>
                                    <option value="0">In Active</option>
                                </select>
                            </div>
                            
                            <!-- Premium Method -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Premium</label>
                                <select name="payment_method" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm bg-white">
                                </select>
                            </div>
                            
                            <!-- Subscription Date (Hidden initially) -->
                            <div class="showOnEdit sm:col-span-2 hidden">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Subscription Date</label>
                                <input type="hidden" name="last_subscription_id"/>
                                <input type="date" name="last_subscription_date" placeholder="Last Subscription Date" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            
                            <!-- Password -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                                <input type="password" name="password" placeholder="Password" autocomplete="new-password" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            
                            <!-- Confirm Password -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>
                                <input type="password" name="password_confirmation" placeholder="Confirm Password" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                        </div>

                        <!-- Image Field -->
                        <div class="lg:w-1/4 flex flex-col items-center">
                            <label class="block text-sm font-medium text-gray-700 mb-3 w-full text-left lg:text-center">Profile Image</label>
                            <div class="relative group w-32 h-32 rounded-full border-2 border-dashed border-gray-300 flex items-center justify-center overflow-hidden hover:border-blue-500 transition-colors bg-gray-50">
                                <img id="image_preview" src="" alt="Preview" class="w-full h-full object-cover" onerror="this.src='{{ asset('manual_storage/user_profile/user_profile.png') }}'" />
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer text-white">
                                    <i class="mdi mdi-camera text-2xl mb-1"></i>
                                    <span class="text-xs font-medium">Upload</span>
                                </div>
                                <input type="file" name="image" onchange="document.querySelector('#image_preview').src=window.URL.createObjectURL(this.files[0])" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
                            </div>
                            <p class="text-xs text-gray-500 mt-3 text-center">Click image to upload<br/>JPG, PNG or GIF</p>
                        </div>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="bg-gray-50 border-t border-gray-100 px-6 py-4 flex items-center justify-end gap-3 rounded-b-xl">
                    <button type="button" class="px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium focus:outline-none" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="addUpdate px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('customJs')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
    <style>
        /* Modernized DataTable Styles for Tailwind */
        .dt-container { font-size: 0.875rem; color: #4b5563; }
        .dt-container th.dt-ordering-asc, .dt-container th.dt-ordering-desc { color: #111827; }
        table.dataTable { border-collapse: collapse !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable thead th, table.dataTable thead td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable tbody td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #f3f4f6 !important; }
        table.dataTable.no-footer { border-bottom: 1px solid #e5e7eb !important; }
        .dt-container .dt-length select, .dt-container .dt-search input { border: 1px solid #d1d5db !important; border-radius: 0.5rem !important; padding: 0.375rem 0.75rem !important; outline: none; transition: all 0.2s; font-size: 0.875rem; margin-left: 0.5rem; }
        .dt-container .dt-length select:focus, .dt-container .dt-search input:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; }
        .dt-container .dt-paging .dt-paging-button { border-radius: 0.375rem !important; padding: 0.375rem 0.75rem !important; margin: 0 0.125rem !important; border: 1px solid transparent !important; }
        .dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { background-color: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; font-weight: 600; }
        .dt-container .dt-paging .dt-paging-button:hover:not(.current) { background-color: #f3f4f6 !important; border-color: #e5e7eb !important; color: #374151 !important; }
        .dt-container .dt-info { color: #6b7280 !important; font-size: 0.875rem; padding-top: 1rem !important; }
        .dt-layout-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
        .dt-layout-row:last-child { margin-top: 1.5rem; margin-bottom: 0; }
    </style>
    <script type="text/javascript">
        function reload_data_table(ele) {
            $(ele).DataTable().ajax.reload(null, false);
        }
        $(document).on('submit', '#add_user', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('admin_user_add') }}",
                method: 'POST',
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                processData: false,
                success: function(data) {
                    webinaToast({
                        type: data.type,
                        message: data.text
                    });
                    if (data.type == 'success') {
                        reload_data_table('#listDataTable');
                        $('#userModal').modal('hide');
                    }
                }
            });
        });

        function openUserForm(edit_id = 0) {
            if (edit_id) {
                $('.addUpdate').text('Update');
            } else {
                $('.addUpdate').text('Save');
            }
            $("#userModal").find("input[name='id'], input[name='last_subscription_id'], input[type='text'], input[type='number'], input[type='password'], input[type='date'], select, textarea").val('');
            $("#userModal").find("#image_preview").attr("src", "{{ asset('manual_storage/') }}/user_profile/user_profile.png");
            $(".showOnEdit").hide();
            $('#add_user select[name="payment_method"]').html(`<option value="Free" selected>Free</option><option value="Admin Paid">Premium</option>`);
            $("#userModal").modal('show');
            if (parseInt(edit_id) > 0) {
                $(".showOnEdit").show();
                $.ajax({
                    url: "{{ route('admin_user_edit') }}",
                    method: "POST",
                    data: {
                        id: edit_id
                    },
                    dataType: "JSON",
                    success: function(data) {
                        $.each(data, function(key, value) {
                            if (key == "image") {
                                if(value){
                                    $("#image_preview").attr("src", "{{ asset('manual_storage/') }}/" + value);
                                }
                            } else if(key == "last_subscription_date") {
                                if(value){
                                    $('#add_user [name="last_subscription_date"]').val(value);
                                }
                            }else if(key=="payment_method"){
                                if(value){
                                    var sltEle=$('#add_user select[name="payment_method"]');
                                    if(sltEle.find('option[value="'+value+'"]').length == 0){
                                        sltEle.append(`<option value="${value}">${value}</option>`);
                                    }
                                    sltEle.val(value);   
                                }
                            }else{
                                $('#add_user [name="' + key + '"]').val(value);
                            }
                        });
                    }
                });
            }
        }

        function load_datatable() {
            $('#listDataTable').DataTable({
                "pageLength": 10,
                "lengthMenu": [10, 20, 50, 100, 200],
                "language": {
                    "lengthMenu": '_MENU_',
                    "sSearch": "",
                    "searchPlaceholder": "Search records",
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: "{{ route('admin_user_fetchAllList') }}",
                    type: "POST",
                    data: {}
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [7, 9]
                }, ],
                "order": [
                    [0, 'desc']
                ],
            });
        }

        function updateStatus(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are you sure to change status?",
                acceptButton: "Yes, change it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    if ($("#" + id + "_status").is(":checked")) {
                        var status = 0;
                    } else {
                        var status = 1;
                    }
                    $.ajax({
                        url: "{{ route('admin_user_status') }}",
                        method: 'POST',
                        data: {
                            id: id,
                            status: status
                        },
                        dataType: 'JSON',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table('#listDataTable');
                            }
                        }
                    });
                }
            });
        }

        function subscriptionStatus(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are You Sure To Change Subscription?",
                acceptButton: "Yes, change it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    if ($("#" + id + "_subscription").is(":checked")) {
                        var subscription = 0;
                    } else {
                        var subscription = 1;
                    }
                    $.ajax({
                        url: "{{ route('admin_user_subscription') }}",
                        method: 'POST',
                        data: {
                            id: id,
                            subscription: subscription
                        },
                        dataType: 'JSON',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table('#listDataTable');
                            }
                        }
                    });
                }
            });
        }

        function deleteUser(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are you sure to Delete?",
                acceptButton: "Yes, Delete it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    $.ajax({
                        url: "{{ route('admin_user_delete') }}",
                        type: 'delete',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table("#listDataTable");
                            }
                        }
                    });
                }
            });
        }
        $(document).ready(function() {
            load_datatable();
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('modal') === '0') {
                openUserForm();
            }
        });
    </script>
@endsection