@extends('template.app')

@section('meta')
@endsection

@section('title')
    Roles
@endsection

@section('styles')
<style>
     .highlight {
        background-color: #ffff99; /* Change to desired highlight color */
    }
   #data-table.dataTable tbody td {
        padding: 0px !important;
        height: 20px !important;
        line-height: 35px !important;
        font-size: 15px !important;
        text-align: center;
    }
    #data-table th {
        text-align: center;
    }
    #data-table {
    table-layout: fixed;
    width: 100%;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Roles</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('role') }}" class="text-muted">Roles</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                @canany(['role-create'])
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('role.create') }}">Add New</a>
                @endcanany
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered data-table" id="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Name</th> 
                                <th>Guard Name</th>
                                <th>Due From Amt</th>
                                <th>Due To Amt</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script type="text/javascript">
        var datatable;

        $(document).ready(function() {
            if($('#data-table').length > 0){
                datatable = $('#data-table').DataTable({
                    processing: true,
                    serverSide: true,

                    "pageLength": 25,
                    "iDisplayLength": 25,
                    "responsive": true,
                    "aaSorting": [],
                    // "order": [], //Initial no order.
                    //     "aLengthMenu": [
                    //     [5, 10, 25, 50, 100, -1],
                    //     [5, 10, 25, 50, 100, "All"]
                    // ],

                    // "scrollX": true,
                    scrollY: "450px", 
                    // "scrollCollapse": false,
                    // scrollCollapse: true,

                    // lengthChange: false,

                    "ajax":{
                        "url": "{{ route('role') }}",
                        "type": "POST",
                        "dataType": "json",
                        "data":{
                            _token: "{{ csrf_token() }}"
                        }
                    },
                    "columnDefs": [{
                            //"targets": [0, 5], //first column / numbering column
                            "orderable": true, //set not orderable
                        },
                    ],
                    columns: [
                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'guard_name',
                            name: 'guard_name'
                        },
                        {
                            data: 'from_amt',
                            name: 'from_amt'
                        },
                        {
                            data: 'to_amt',
                            name: 'to_amt'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                        },
                    ]
                });
            }
            // Highlight row on mouseover
            $('#data-table tbody').on('mouseover', 'tr', function() {
                $(this).addClass('highlight');
            });

            // Remove highlight on mouseout
            $('#data-table tbody').on('mouseout', 'tr', function() {
                $(this).removeClass('highlight');
            });
        });

        function delete_func(object){
            var id = $(object).data("id");
            if (confirm('Are you sure you want to delete?')) {
                $.ajax({
                    "url": "{!! route('role.delete') !!}",
                    "dataType": "json",
                    "type": "POST",
                    "data":{
                        id: id,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (response){
                        if (response.code == 200){
                            datatable.ajax.reload();
                            toastr.success('Status chagned successfully', 'Success');
                        }else{
                            toastr.error('Failed to change status', 'Error');
                        }
                    }
                });
            }
        }
    </script>
@endsection