@extends('layouts.app.master')
@section('title', 'Banners')

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Simple Data Table</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
        body {
            color: #566787;
            background: #f5f5f5;
            font-family: 'Roboto', sans-serif;
        }
        
        .table-responsive {
            margin: 30px 0;
        }
        
        .table-wrapper {
            min-width: 1000px;
            background: #fff;
            padding: 20px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }
        
        .table-title {
            padding-bottom: 10px;
            margin: 0 0 10px;
            min-width: 100%;
        }
        
        .table-title h2 {
            margin: 8px 0 0;
            font-size: 22px;
        }
        
        .search-box {
            position: relative;
            float: right;
        }
        
        .search-box input {
            height: 34px;
            border-radius: 20px;
            padding-left: 35px;
            border-color: #ddd;
            box-shadow: none;
        }
        
        .search-box input:focus {
            border-color: #3FBAE4;
        }
        
        .search-box i {
            color: #a0a5b1;
            position: absolute;
            font-size: 19px;
            top: 8px;
            left: 10px;
        }
        
        table.table tr th,
        table.table tr td {
            border-color: #e9e9e9;
        }
        
        table.table-striped tbody tr:nth-of-type(odd) {
            background-color: #fcfcfc;
        }
        
        table.table-striped.table-hover tbody tr:hover {
            background: #f5f5f5;
        }
        
        table.table th i {
            font-size: 13px;
            margin: 0 5px;
            cursor: pointer;
        }
        
        table.table td:last-child {
            width: 130px;
        }
        
        table.table td a {
            color: #a0a5b1;
            display: inline-block;
            margin: 0 5px;
        }
        
        table.table td a.view {
            color: #03A9F4;
        }
        
        table.table td a.edit {
            color: #FFC107;
        }
        
        table.table td a.delete {
            color: #E34724;
        }
        
        table.table td i {
            font-size: 19px;
        }
        
        .pagination {
            float: right;
            margin: 0 0 5px;
        }
        
        .pagination li a {
            border: none;
            font-size: 95%;
            width: 30px;
            height: 30px;
            color: #999;
            margin: 0 2px;
            line-height: 30px;
            border-radius: 30px !important;
            text-align: center;
            padding: 0;
        }
        
        .pagination li a:hover {
            color: #666;
        }
        
        .pagination li.active a {
            background: #03A9F4;
        }
        
        .pagination li.active a:hover {
            background: #0397d6;
        }
        
        .pagination li.disabled i {
            color: #ccc;
        }
        
        .pagination li i {
            font-size: 16px;
            padding-top: 6px
        }
        
        .hint-text {
            float: left;
            margin-top: 6px;
            font-size: 95%;
        }
    </style>
</head>

@section('content')

    <div class="container-xl">
        <div class="table-responsive">
            <div class="table-wrapper">
                <div class="table-title">
                    <div class="row">
                        <div class="col-sm-8">
                            <h2>Manage <b>Banners</b></h2>
                        </div>
                        <div class="col-sm-4">
                            <div class="search-box">
                                <i class="material-icons">&#xE8B6;</i>
                                <input id="searchInput" type="text" class="form-control" placeholder="Search&hellip;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                <div class="col-sm-8"></div>
                <div class="col-sm-4 text-right">
                    <button type="button" class="btn btn-primary">
                        <a href="{{route('add.banner')}}">
                        Add Banner
                        </a>
                    </button>
                </div>
            </div>
                <table class="table table-striped table-hover table-bordered">

                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Image</th>
                            <th>Date created</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($banner as $item)
                    <tr>
                        <td>{{ $item->id }}</td>
                        <td>{{ $item->title }}</td>
                        <td>
                            <img src="{{ asset($item->image) }}" alt="Banner Image" width="100">
                        </td>   
                        <td>{{ $item->created_at}}</td>
                        <td>
                            <a href="{{ route('edit.banner', ['id' => $item->id]) }}" class="btn btn-success">Edit</a>
                            <form action="{{ route('delete.banner', ['id' => $item->id]) }}" method="post" style="display: inline;">
                                @csrf
                                @method('delete')
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this banner?')">Delete</button>
                            </form>                        
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                </table>
                <div id="paginationContainer" class="clearfix">
                    <div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
                    <ul id="pagination" class="pagination">
                        <!-- Pagination content will be generated dynamically -->
                    </ul>
                </div>
            </div>
        </div>
    </div>

@endsection
<script>
        $(document).ready(function() {
            // Initialize the table and pagination
            refreshTable();

            // Add event listener for search input
            $('#searchInput').on('input', function() {
                refreshTable();
            });

            // Add event listener for pagination
            $('#pagination').on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var pageNum = parseInt($(this).text());
                refreshTable(pageNum);
            });

            // Add event listener for modal trigger
            $('#dataTable').on('click', 'a.view', function(event) {
                event.preventDefault();
                var rowData = $(this).closest('tr').find('td').map(function() {
                    return $(this).text();
                }).get();
                $('#exampleModalLabel').text('View Customer Details');
                $('.modal-body').html('<p>Name: ' + rowData[1] + '</p><p>Address: ' + rowData[2] + '</p><p>City: ' + rowData[3] + '</p><p>Pin Code: ' + rowData[4] + '</p><p>Country: ' + rowData[5] + '</p>');
                $('#exampleModal').modal('show');
            });
        });

        function refreshTable(pageNum = 1) {
            var searchValue = $('#searchInput').val();
            // Simulate AJAX request to get data
            var data = [{
                id: 1,
                name: 'Thomas Hardy',
                address: '89 Chiaroscuro Rd.',
                city: 'Portland',
                pinCode: '97219',
                country: 'USA'
            }, {
                id: 2,
                name: 'Maria Anders',
                address: 'Obere Str. 57',
                city: 'Berlin',
                pinCode: '12209',
                country: 'Germany'
            }, {
                id: 3,
                name: 'Fran Wilson',
                address: 'C/ Araquil, 67',
                city: 'Madrid',
                pinCode: '28023',
                country: 'Spain'
            }, {
                id: 4,
                name: 'Dominique Perrier',
                address: '25, rue Lauriston',
                city: 'Paris',
                pinCode: '75016',
                country: 'France'
            }, {
                id: 5,
                name: 'Martin Blank',
                address: 'Via Monte Bianco 34',
                city: 'Turin',
                pinCode: '10100',
                country: 'Italy'
            }];
            // Apply search filter
            if (searchValue) {
                data = data.filter(function(item) {
                    return item.name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
                });
            }
            // Calculate pagination
            var pageSize = 2;
            var totalPages = Math.ceil(data.length / pageSize);
            var startIndex = (pageNum - 1) * pageSize;
            var endIndex = Math.min(startIndex + pageSize - 1, data.length - 1);
            // Render table rows
            var tableBody = '';
            for (var i = startIndex; i <= endIndex; i++) {
                tableBody += '<tr><td>' + data[i].id + '</td><td>' + data[i].name + '</td><td>' + data[i].address + '</td><td>' + data[i].city + '</td><td>' + data[i].pinCode + '</td><td>' + data[i].country + '</td><td><a href="#" class="view" title="View" data-toggle="tooltip"><i class="material-icons">&#xE417;</i></a><a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a><a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a></td></tr>';
            }
            $('#dataTable').html(tableBody);
            // Render pagination
            var pagination = '';
            for (var i = 1; i <= totalPages; i++) {
                var activeClass = (i === pageNum) ? 'active' : '';
                pagination += '<li class="page-item ' + activeClass + '"><a href="#" class="page-link">' + i + '</a></li>';
            }
            $('#pagination').html(pagination);
            // Update hint text
            var startEntry = (startIndex + 1);
            var endEntry = Math.min(startIndex + pageSize, data.length);
            $('.hint-text').text('Showing ' + startEntry + ' to ' + endEntry + ' of ' + data.length + ' entries');
        }
    </script>