@extends('admin.layouts.default')
@section('title', 'Language Types')
@section('content')
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
        <div class="d-flex align-items-center">
                <input type="text" id="languageSearchInput" class="form-control me-2" placeholder="Search Language" style="max-width: 250px;">

                <button type="button" id="languageFilterButton" class="btn btn-primary">Filter</button>
                <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
            
            </div>
            <h1 class="page-title mb-0 text-primary"></h1>
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
                <div class="page-rightheader">
                    <div>
                        <button type="button" id="add-mod" class="btn btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable3">
                            <i class="fa fa-plus"></i>
                            Add Language Type
                        </button>
                        @include('admin/language_type/create_edit')
                    </div>
                </div>
            </div>
        </div>

        <div class="card ">
            <div class="card-header justify-content-between">
                <h3 class="card-title">
                    Languages Types
                </h3>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="website_data_table" class="table text-nowrap table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">S.no</th>
                                <th scope="col">Name</th>
                                <th scope="col">amount</th>
                                <th scope="col">type</th>
                                <th scope="col">action</th>
                            </tr>
                        </thead>
                        <tbody>

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

    </div>
</div>

<script>
    var isSuperAdmin = @json(auth()->user()->hasRole('Superadmin'));
    var canEditLanguage = @json(auth()->user()->can('language-edit'));
    var candeleteLanguage = @json(auth()->user()->can('language-delete'));
</script>

<script>
    $(document).ready(function() {
        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/language-list', 
                data: function(d) {
                    d.language_type = $('#languageSearchInput').val();  
                }
            },	
            columns: [
                {
                    data: null, // Use null to generate the row number
                    name: 'row_number',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                    }
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'type', // Change to lowercase 'phone' to match your response
                    name: 'type',
                    render: function(data, type, row) {
                        return data ? data : 'N/A'; // Return phone number or 'N/A' if empty
                    }
                },
                {
                    data: null,
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var editButton = '';
                        var deleteButton = '';
                        
                        if (isSuperAdmin || canEditLanguage) {
                            var editButton = '<button type="button" class="btn btn-primary btn-sm edit-button" data-id="' + row.id + '">' +
                                '<i class="ri-edit-line""></i>' +
                                '</button>';
                        }
                        
                        if (isSuperAdmin || candeleteLanguage) {
                            var deleteButton = '<button type="button" class="btn btn-danger btn-sm delete-button" data-id="' + row.id + '">' +
                                '<i class="ri-delete-bin-5-line">' +
                                '</button>';
                        }

                        return (editButton + deleteButton) || '';

                    }
                }
            ]
        });
        $('#add-mod').on('click', function() {
            clearErrors();
            clearForm();
            $('#language_type_id').val('');
            $('#submit-button').text('Save Changes');
            $('#exampleModalScrollable3').modal('show');
        });

        function clearForm() {
            $('#RoleForm')[0].reset();
        }

        function clearErrors() {
            $('#error-title').text('');
            $('#error-amount').text('');
            $('#error-type').text('');
        }
        $('#website_data_table').on('click', '.edit-button', function() {
            var id = $(this).data('id');


            $.ajax({
                url: base_url + '/language-type/' + id,
                type: 'GET',
                success: function(response) {
                    clearErrors();
                    $('#language_type_id').val(response.id);
                    $('#name').val(response.name);
                    $('#amount').val(response.amount);
                    $('#type').val(response.type);
                    // Show the modal
                    $('#exampleModalScrollable3').modal('show');
                    $('#submit-button').text('Update Changes'); // Change button text for editing
                },
                error: function(xhr) {
                    toastr.error('Error fetching data.');
                }
            });
        });


    });

    $('#website_data_table').on('click', '.permissions-button', function() {
        var url = $(this).data('url'); // Get the URL from the button's data attribute
        window.location.href = url; // Redirect to the URL
    });
</script>
<script>
    $('#website_data_table').on('click', '.delete-button', function(e) {
    e.preventDefault();

    var id = $(this).data('id');

    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, cancel!'
    }).then((result) => {
        if (result.isConfirmed) {
            var url = base_url + '/language-type-delete/' + id;

            $.ajax({
                url: url,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Success!', 'Item deleted successfully.', 'success');

                    $('#website_data_table').DataTable().ajax.reload();
                },
                error: function(xhr) {
                    Swal.fire('Error!', 'Error deleting item.', 'error');
                }
            });
        }
    });
});
    // $('#userSearchInput').on('keyup', function() {
    //             $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable to reflect changes
    // });
    $('#languageFilterButton').on('click', function() {
        $('#website_data_table').DataTable().ajax.reload();
    });

    // Reset the search filter when clicking the Reset button
    $('#refreshFilterButton').on('click', function() {
        $('#languageSearchInput').val(''); // Clear the input field
        $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable without filter
    });
</script>


@endsection