@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Areas')
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="page-title h3 mb-2 text-gray-800">
        Areas
        <a href="{{route('admin.area.form')}}" class="btn-gazna"
           style="text-decoration:none;height:50px;font-size:14px;">Add Area</a>
    </h1>
    <!-- DataTales Example -->
    <div class="innerpagedetails card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="">Areas</h6>
        </div>
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @elseif(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <div class="card-body">
            <div class="table-responsive">
                <table class="table categoryTable table-bordered" id="laravel_datatable" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Radius</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th>Status</th>
                        <th width="105px">Action</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->


<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function () {
        $('#laravel_datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.areas') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'radius', name: 'radius'},
                {data: 'latitude', name: 'latitude'},
                {data: 'longitude', name: 'longitude'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });
    });
</script>

@include('Admin.layouts.footer')
@include('Admin.layouts.modal')