@extends('admin.layouts.app')
@section('content')
<style>
    .table {
        width: 100%;
        height: auto;
    }

    .table-bordered,
    .table-bordered td,
    .table-bordered th {
        border-width: 1px;
    }

    .table-hover tbody tr:hover {
        background-color: #eee;
    }

    .card-table {
        border-radius: 10px;
        box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
        transition: box-shadow 0.2s ease-in-out;
    }

    .card-table .card-body {
        flex: 1 1 auto !important;
        padding: 15px 14px !important;
        margin-top: 20px;
    }

    tbody,
    td,
    tfoot,
    th,
    thead,
    tr {
        border: none;
    }

    .table tbody td {
        vertical-align: bottom;
        border-bottom: 1px solid #dee2e6;
    }

    .table thead th {
        border-bottom: 1px solid #dee2e6;
        background-color: #f8f9fd;
    }

    .table th,
    .table td {
        vertical-align: middle;
        border: none;
    }

    .page-item:first-child .page-link {
        border-top-left-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
    }

    .page-item:last-child .page-link {
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    .page-link {
        padding: 0.375rem 0.85rem !important;
        color: #293240;
    }

    .page-item.active .page-link {
        z-index: 3;
        color: #ffffff;
        background-color: #51459d;
        border-color: #51459d;
    }

    /* Hide Select Icon */



    /* Inline Button with Icon */
    .btn-icon {
        display: inline-flex;
        align-items: center;
        color: #ffffff;
        background-color: #51459d;
        border-color: #51459d;
    }

    .btn-icon .icon {
        margin-right: 5px;
    }






    /* Responsive Styling */
    @media (max-width: 767.98px) {

        .table th,
        .table td {
            font-size: 12px;
        }

        .col-md-9 {
            padding: 0;
        }

        .col-md-3 {
            padding: 0;
        }

        .per-1 {
            font-size: 13px;
        }

        .btn-icon {
            font-size: 12px;
        }
    }
</style>
<section class="content ">
    <!-- Default box -->

    <div class="container-fluid ">
        <div style="height: 20px;" class="w-100"></div>
        <div class="card card-table">
            <div class="card-header">
                <h3>Roles</h3>
            </div>

            <div class="card-body">


                <div class="row">
                    <div class="col-md-9">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-md-flex  gap-2">
                                <button class="btn btn-primary btn-sm btn-icon" data-bs-toggle="modal" data-bs-target="#createModal"><i class="fas fa-plus icon"></i> Create</button>


                                <button class="btn btn-light btn-sm btn-icon rounded-1" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-file-export icon"></i> Export
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li><a id="export-csv" class="dropdown-item text-danger" href="#"><i class="fas fa-file-csv"></i> CSV</a></li>

                                </ul>

                                <button id="reset-button" class="btn btn-light btn-sm btn-icon"><i class="fas fa-redo icon"></i> Reset</button>
                                <button id="reload-button" class="btn btn-light btn-sm btn-icon"><i class="fas fa-sync-alt icon "></i> Reload</button>

                                <select id="rows-select" class="form-select form-select-sm select-icon ">
                                    <option selected>Show 10 rows</option>
                                    <option value="1">Show 25 rows</option>
                                    <option value="2">Show 50 rows</option>
                                    <option value="3">Show 100 rows</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex justify-content-end align-items-center mb-3">
                            <div class="input-group input-group-sm">
                                <input id="search-input" type="text" class="form-control" placeholder="Search...">
                                <button class="btn btn-light" type="button"><i class="fas fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table id="data-table" class="table table-bordered table-hover border-0">
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Created At</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Driver</td>
                                        <td>2023-11-21</td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Action
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editModal"><i class="fas fa-edit"></i> Edit</a></li>
                                                    <li><a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fas fa-trash"></i> Delete</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Student</td>
                                        <td>2023-11-22</td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Action
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editModal"><i class="fas fa-edit"></i> Edit</a></li>
                                                    <li><a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fas fa-trash"></i> Delete</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Admin</td>
                                        <td>2023-11-23</td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Action
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editModal"><i class="fas fa-edit"></i> Edit</a></li>
                                                    <li><a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fas fa-trash"></i> Delete</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>



                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <p class="mb-0 per-1">Showing 1 to 1 of 1 entries</p>
                            <nav aria-label="Page navigation">
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</section>

<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form id="createForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="form-grop mb-2">
                            <label for="" class=" form-label">Role Name</label>
                            <input type="text" class="form-control">

                        </div>
                        <input type="button" value="Submit" class="btn btn-success px-3 py-1">
                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border px-3 py-1 " data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- edit modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form id="editForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="EditModalLabel">Edit Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="form-grop mb-2">
                            <label for="" class=" form-label">Role Name</label>
                            <input type="text" value="Drivers" class="form-control">

                        </div>
                        <input type="button" value="Submit" class="btn btn-success px-3 py-1">
                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light border px-3 py-1 " data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form id="deleteForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

                    </form>


                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success border px-3 py-1 " data-bs-dismiss="modal" >Yes</button>
                    <button type="button" class="btn btn-light border px-3 py-1 " data-bs-dismiss="modal">No</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('customJs')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // CSV export
        document.getElementById('export-csv').addEventListener('click', function() {
            // Get the table element
            var table = document.querySelector('.table');

            // Export the table to CSV format
            TableExport(table, {
                formats: ['csv'],
                filename: 'table_export',
                sheetname: 'table_data'
            }).export();
        });

    });

    ///rows/////////\
    document.addEventListener('DOMContentLoaded', function() {
        // Get the select element
        var rowsSelect = document.getElementById('rows-select');

        // Get all table rows
        var tableRows = document.querySelectorAll('.table tbody tr');

        // Add change event listener to the select element
        rowsSelect.addEventListener('change', function() {
            // Get the selected value
            var selectedValue = parseInt(this.value);

            // Show/hide table rows based on the selected value
            for (var i = 0; i < tableRows.length; i++) {
                if (i < selectedValue) {
                    tableRows[i].style.display = '';
                } else {
                    tableRows[i].style.display = 'none';
                }
            }
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        // Get the reset and reload buttons
        var resetButton = document.getElementById('reset-button');
        var reloadButton = document.getElementById('reload-button');

        // Add event listener to the reset button
        resetButton.addEventListener('click', function() {
            // Reset the values within table cells
            document.querySelectorAll('.table tbody td').forEach(function(cell) {
                cell.textContent = ''; // Or reset to any default value you want
            });
            console.log('Table values reset');
        });

        // Add event listener to the reload button
        reloadButton.addEventListener('click', function() {
            // Reload the page
            location.reload();
            console.log('Page reloaded');
        });
    });

    $(document).ready(function() {
        // Function to perform search
        $('#search-input').on('input', function() {
            var searchText = $(this).val().toLowerCase();
            $('#data-table tbody tr').each(function() {
                var rowData = $(this).text().toLowerCase();
                if (rowData.includes(searchText)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });
</script>



@endsection