@extends('admin.layout.index')
@section('title', 'Muftaax | Ride Category')
@section('custom-style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">

@endsection
@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Roles List</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Roles And Permissions</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Roles List</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Start::row-1 -->
            <div class="row">

                <div class="col-xl-12">

                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Manage Sub Admins
                            </div>
                            <div class="d-flex">
                                @can('create-roles')
                                    {{-- <button class="btn btn-sm btn-primary btn-wave waves-light waves-effect waves-light"
                                        data-bs-toggle="modal" href="#addCategory"><i
                                            class="ri-add-line fw-medium align-middle me-1"></i> Create Role
                                    </button> --}}
                                    <a class="btn btn-sm btn-primary btn-wave waves-light waves-effect waves-light"
                                        href="{{ url('admin/create-role') }}"><i
                                            class="ri-add-line fw-medium align-middle me-1"></i> Create Role
                                    </a>
                                @endcan

                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsivee">
                                <table id="rideCategoryTable" class="table text-nowrap">
                                    <thead>
                                        <tr>
                                            <th scope="col">Sr No.</th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Created At</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer border-top-0">

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

            </div>
            <!--End::row-1 -->

        </div>
    </div>

    <!-- Add Category Modal -->
    <div class="modal fade" id="addCategory" tabindex="-1" aria-labelledby="addCategory" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBannerModalLabel">Add Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" id="storeForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="categoryTitle" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder=" Enter Name">
                        </div>
                        <div class="mb-3">
                            <label for="charge" class="form-label">Guard</label>
                            <input type="text" class="form-control" id="guard" name="guard" placeholder=" Enter"
                                value="admin" readonly>
                        </div>

                        {{-- between km field --}}
                        <div class="mb-3">
                            <label for="password" class="form-label">Permissions</label>
                            <label class="ms-5">
                                <input type="checkbox" id="select_all_permissions"> Select All
                            </label>
                            {{-- <input type="password" class="form-control" min="0" id="password" name="password"
                                placeholder=" Enter password"> --}}
                            <select name="permissions[]" class="form-control select2" id="permissions" multiple>
                                @forelse ($permissions as $permission)
                                    <option value="{{ $permission->id }}">{{ $permission->name }}</option>
                                @empty
                                    <option>Permissions not available</option>
                                @endforelse
                            </select>
                        </div>

                        {{-- Status field --}}
                        {{-- <div class="mb-3">
                            <label for="categoryStatus" class="form-label">Status</label>
                            <select class="form-select" id="categoryStatus">
                                <option selected>Select Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div> --}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="saveBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Role Modal -->
    <div class="modal fade" id="editRoleModal" tabindex="-1" aria-labelledby="editRoleLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" id="editRoleForm">
                    @csrf
                    <input type="hidden" id="edit_role_id" name="role_id">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="edit_name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="edit_name" name="name"
                                placeholder="Enter Name">
                        </div>
                        <div class="mb-3">
                            <label for="edit_guard" class="form-label">Guard</label>
                            <input type="text" class="form-control" id="edit_guard" name="guard" value="admin"
                                readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Permissions</label>
                            <label class="ms-3">
                                <input type="checkbox" id="edit_select_all_permissions"> Select All
                            </label>
                            <select name="permissions[]" class="form-control select2" id="edit_permissions" multiple>
                                @foreach ($permissions as $permission)
                                    <option value="{{ $permission->id }}">{{ $permission->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete modal -->
    <div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="display: grid;">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body p-5 text-center">
                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                            colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
                        </lord-icon>
                        <div class="mt-4 text-center">
                            <h4>Are You Sure?</h4>
                            <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                            {{-- <form method="POST" id="deleteCampForm" class="form-submit">
                                @csrf
                                {{ method_field('DELETE') }} --}}
                            <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button class="btn btn-sm btn-primary m-1 delete-btn" type="submit">Yes, Delete It</button>
                            {{-- </form> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <meta name="csrf-token" content="{{ csrf_token() }}">


@endsection
@section('custom-script')
    <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>

    <script>
        $(document).ready(function() {
            let table = $('#rideCategoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('getAllRoles') }}",
                columns: [{
                        data: null,
                        name: 'serial_number',
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });

        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "Select Permissions",
                allowClear: true
            });

            // Select All Functionality
            $('#select_all_permissions').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#permissions > option').prop('selected', true).trigger('change'); // Select all
                } else {
                    $('#permissions > option').prop('selected', false).trigger('change'); // Deselect all
                }
            });

            // Select/Deselect All Permissions (Edit Modal)
            $('#edit_select_all_permissions').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#edit_permissions option').prop('selected', true);
                } else {
                    $('#edit_permissions option').prop('selected', false);
                }
                $('#edit_permissions').trigger('change');
            });

            // Update (Edit Role)
            $('#editRoleForm').submit(function(e) {
                e.preventDefault();
                let formData = $(this).serialize();
                let roleId = $('#edit_role_id').val();
                let url = `/admin/roles-update/${roleId}`;

                $.ajax({
                    url: url,
                    type: 'PUT',
                    data: formData,
                    success: function(response) {
                        $('#editRoleModal').modal('hide');

                        const notyf = new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top',
                            },
                            dismissible: true
                        });

                        if (response.success) {
                            notyf.success(response.message || 'Role updated successfully!');
                            location.reload();
                        } else {
                            notyf.error(response.message || 'Failed to update role.');
                        }

                        location.reload();
                    },
                    error: function(error) {
                        console.log(error.responseJSON);
                    }
                });
            });
        });

        // Open Edit Role Modal
        function openEditModal(id) {
            let url = `/admin/edit-role/${id}`;

            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    if (response.success) {
                        $('#edit_role_id').val(response.role.id);
                        $('#edit_name').val(response.role.name);
                        $('#edit_guard').val(response.role.guard_name);
                        $('#edit_permissions').val(response.role.permissions).trigger('change');

                        // Ensure modal is correctly initialized before showing
                        let modal = new bootstrap.Modal(document.getElementById('editRoleModal'));
                        modal.show();
                    } else {
                        console.error('Error: Role data not found');
                    }
                },
                error: function(xhr) {
                    console.error('AJAX Error:', xhr.responseText);
                }
            });
        }


        $('#delete-modal').on('hidden.bs.modal', function() {
            $('.modal-backdrop').remove();
        });


        function validateInput(input) {
            // Remove non-numeric characters and prevent entering 'e' or '-'
            input.value = input.value.replace(/[^0-9.]/g, '');

            // Ensure only one decimal point is allowed
            if ((input.value.match(/\./g) || []).length > 1) {
                input.value = input.value.substring(0, input.value.lastIndexOf('.'));
            }
        }

        function openDeleteModal(categoryId) {
            $('#delete-modal').modal('show');

            // Unbind previous click events to avoid stacking handlers
            $('.delete-btn').off('click').on('click', function() {
                deleteCategory(categoryId);
            });
        }

        function deleteCategory(categoryId) {
            $.ajax({
                url: `/admin/delete-role/${categoryId}`,
                method: "POST", // Use POST with method override
                data: {
                    _method: 'DELETE', // Laravel's hidden method trick
                    _token: $('meta[name="csrf-token"]').attr('content') // Ensure CSRF token is passed
                },
                success: function(response) {
                    $('#delete-modal').modal('hide');

                    const notyf = new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top',
                        },
                        dismissible: true
                    });

                    if (response.success) {
                        notyf.success(response.message || 'Category deleted successfully!');
                        location.reload();
                    } else {
                        notyf.error(response.message || 'Failed to delete category.');
                    }
                },
                error: function(xhr) {
                    $('#delete-modal').modal('hide');

                    const notyf = new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top',
                        },
                        dismissible: true
                    });

                    notyf.error('An error occurred. Please try again.');
                    console.error(xhr.responseText);
                }
            });
        }

        // Handle Edit button click
        $('body').on('click', '.btn-edit-category', function() {
            let categoryId = $(this).data('id');
            console.log(categoryId);

            let url = `/admin/ride-category-edit/${categoryId}`;

            $.ajax({
                url: url,
                method: "GET",
                success: function(response) {
                    $('#editCategoryId').val(response.id);
                    $('#editCategoryTitle').val(response.name);
                    $('#editCategorySeater').val(response.seater);
                    $('#editCharge').val(response.per_km);
                    $('#editBetweenKm').val(response.between_km);
                    $('#editMinimumFare').val(response.minimum_fare);
                    $('#editCategory').modal('show');
                }
            });
        });

        // Handle Update Form Submit
        $('#updateForm').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);
            let categoryId = $('#editCategoryId').val();
            let url = `/admin/ride-category-update/${categoryId}`;
            let submitButton = $(this).find('#updateBtn');

            // Disable button and show processing text
            submitButton.prop('disabled', true).text('Processing...');

            $.ajax({
                url: url,
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        new Notyf().success(response.message);
                        $('#editCategoryModal').modal('hide');
                        $('#updateForm')[0].reset();
                        $('#ride-categories-table').DataTable().ajax.reload();
                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON.errors) {
                        let notyf = new Notyf();
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            notyf.error(value[0]);
                        });
                    }
                },
                complete: function() {
                    // Re-enable button and reset text
                    submitButton.prop('disabled', false).text('Save');
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#storeForm').on('submit', function(e) {
                e.preventDefault();

                let formData = new FormData(this);
                let submitButton = $(this).find('#saveBtn');

                // Disable button and show processing text
                submitButton.prop('disabled', true).text('Processing...');
                $.ajax({
                    url: "{{ route('storeRole') }}", // Route for storing deals
                    method: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {

                        if (response.success) {
                            new Notyf({
                                duration: 3000,
                                position: {
                                    x: 'right',
                                    y: 'top'
                                },
                                ripple: true,
                                dismissible: true
                            }).success(response.message);

                            $('#addCategory').modal('hide'); // Close the modal
                            $('#storeForm')[0].reset();
                            $('#rideCategoryTable').DataTable().ajax.reload();
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseJSON.errors);

                        if (xhr.responseJSON.errors) {
                            let notyf = new Notyf({
                                duration: 4000,
                                position: {
                                    x: 'right',
                                    y: 'top'
                                },
                                ripple: true,
                                dismissible: true
                            });

                            $.each(xhr.responseJSON.errors, function(key, value) {
                                console.log(`Field: ${key}, Error: ${value[0]}`);
                                notyf.error(value[0]);
                            });

                        } else {
                            new Notyf({
                                duration: 3000,
                                position: {
                                    x: 'right',
                                    y: 'top'
                                },
                                ripple: true,
                                dismissible: true
                            }).error('An error occurred. Please try again later.');
                        }
                    },
                    complete: function() {
                        // Re-enable button and reset text
                        submitButton.prop('disabled', false).text('Save');
                    }
                });
            });
        });
    </script>

    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Event delegation for modal triggers
        document.addEventListener('click', function(event) {
            var target = event.target.closest('[data-modal-target]');
            if (target) {
                var modalId = target.getAttribute('data-modal-target');
                var modal = new bootstrap.Modal(document.querySelector(modalId));
                modal.show();
            }
        });
    </script>
@endsection