@extends('Admin.Layout.Master')

@section('content-header')
<div class="header py-1">
    <div class="container-fluid">
        <div class="header-body ">
            <div class="row">

                <div class="col-lg-4 text-primary text-left">
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                        <ol class="breadcrumb breadcrumb-links">
                            <li class="breadcrumb-item">
                                <a href="#"><i class="fas fa-home text-primary"></i>
                                    Banner
                                </a>
                            </li>
                        </ol>
                    </nav>
                </div>

                <div class="col-lg-4 col-5 text-center">
                    
                </div>

                <div class="col-lg-4 col-5 text-right">
                    <a href="{{ url($url.'/create') }}" class="btn btn-sm btn-outline-primary">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Create
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
    <div class="card mt-0 mt--2">
        <div class="card-body pt-0 m-0">
            <div class="table-responsive py-1">
                <table id="data-table" class="table table-hover table-flush mt-2" style="width:100%">
                    <thead class="thead-light">
                        <tr class="">
                            <th class="p-1 text-center" style="width:10px">Action</th>
                            <th class="p-1 text-center"><input name="select-all-datatable" id="select-all-datatable" type="checkbox"/></th>
                            <th class="p-1 text-center">Sr</th>
                            <th class="p-1 text-center">Name</th>
                            <th class="p-1 text-center">Extension</th>
							<th class="p-1 text-center">Is Active</th>
                            <th class="p-1 text-center">Created At</th>
                            <th class="p-1 text-center">Created By</th>
                            <th class="p-1 text-center">Updated At</th>
                            <th class="p-1 text-center">Updated By</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal filterModalClass" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="filterModalLabel">Filter Data</h5>
              <button type="button" class="btn btn-outline-danger btn-sm" data-dismiss="modal" aria-label="Close">
                &times;
              </button>
            </div>
            <div class="modal-body p-1">
                <div class="row m-0">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-control-label"> Banner Name :</label>
                            <input type="text" class="form-control form-control-sm alphaNumeric" 
                                id="filter_by_name">
                        </div>
                    </div>
                </div> 
            </div>
            <div class="modal-footer mt--2">
              <button type="button" class="btn btn-primary btn-sm" id="filter-data">Filter</button>
              <button type="button" class="btn btn-warning btn-sm" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
    </div>

      


@endsection

@push('footer_scripts_after_init')
<script>
$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#data-table').DataTable({
        processing: true,
        serverSide: true,
        language: {
            paginate: {
                next: '&#8594;',
                previous: '&#8592;'
            }
        },
        pageLength: 25,
        columnDefs: [
            {
                targets: 3,
                className: 'text-left',
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css('padding', '3px');
                }
            },
            {
                targets: '_all',
                className: 'text-center',
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css('padding', '3px');
                }
            }
        ],
        dom: '<"container-fluid"<"row"<"col text-left"l><"col text-center"B><"col text-center"f>>>rtip',
        buttons: [
            { extend: 'print', className: 'btn btn-outline-info btn-sm p-1 py-0 px-0', exportOptions: { columns: ':gt(1)' } },
            { extend: 'copy', className: 'btn btn-outline-info btn-sm p-1 py-0 px-0', exportOptions: { columns: ':gt(1)' } },
            { extend: 'excel', className: 'btn btn-outline-warning btn-sm p-1 py-0 px-0', exportOptions: { columns: ':gt(1)' } },
            { extend: 'csv', className: 'btn btn-outline-success btn-sm p-1 py-0 px-0', exportOptions: { columns: ':gt(1)' } }
        ],
        ajax: {
            url: "