@extends('admin.layouts.default')
@section('title', 'Customer services')
@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">
                @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('customerservices-create'))
                    <input type="text" id="customerserviceSearchInput" class="form-control me-2" placeholder="Search customer service" style="max-width: 250px;">

                    <button type="button" id="customerserviceFilterButton" class="btn btn-primary">Filter</button>
                    <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
                @endif
            
            </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>
                        @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('customerservices-create'))
                            <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 Customer Services
                            </button>
                        @endif
                        @include('admin/customer_services/create_edit')


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

        <div class="card ">
            <div class="card-header justify-content-between">
                <h3 class="card-title">
                    Customer Services
                </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">Description</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 canEditCustomerservices = @json(auth()->user()->can('customerservices-edit'));
    var candeleteCustomerservices = @json(auth()->user()->can('customerservices-delete'));
</script>

<script>
    $(document).ready(function() {
        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/customerservices-list',
                data: function(d) {
                    d.service_name = $('#customerserviceSearchInput').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: 'description',
                    name: 'description'
                },

                {
                    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 || canEditCustomerservices) {
                            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 || candeleteCustomerservices) {
                            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(); 
        $('#customer_Service_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 + '/customer-services/' + id, 
                type: 'GET',
                success: function(response) {
                    clearErrors();
                    $('#customer_Service_id').val(response.id);
                    $('#name').val(response.name);
                    $('#description').val(response.description);
                    $('#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 + '/customer-services-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
    // });
    $('#customerserviceFilterButton').on('click', function() {
        $('#website_data_table').DataTable().ajax.reload();
    });

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

@endsection