@extends('layouts.app')



@section('title', 'Bookers List')







@section('content')



    <div class="container">



        {{-- <h1>Clients Rate Policy</h1> --}}



        <a href='{{ url('') }}/booker' class="btn btn-success btn-lg btn1">Add</a>



        <br><br>



        <table class="table table1">



            <thead>



                <tr>



                    <th>Id</th>



                    <th>Booker</th>



                    <th>Address</th>



                    <th>Cnic</th>



                    <th>Action</th>



                </tr>



            </thead>



            <tbody>

                @foreach ($booker as $key => $cl)

                    <tr>



                        <td>



                            {{ $cl->sno }}



                        </td>



                        <td>



                            {{ $cl->booker }}



                        </td>



                        <td>



                            {{ $cl->address }}



                        </td>



                        <td>



                            {{ $cl->nic }}

                        

                        </td>



                        <td>



                            <a class="btn btn-success btn-lg btn1"

                                href='{{ url('') }}/update/booker/{{ $cl->sno }}'>Edit</a>



                            <a href='{{ url('') }}/delete/booker/{{ $cl->sno }}' class="btn btn-success btn-lg btn1 confirmation">Delete</a>



                        </td>



                    </tr>

                @endforeach



            </tbody>



        </table>



        <a class="btn btn-success btn-lg" href='{{ url('') }}/home'>Back to menu</a>



    </div>



@endsection



@section('scripts')



    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

    <link href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>



    <script>

        $(document).ready(function() {



            $('table').DataTable({

                order: [[0, 'desc']]

            });

            $('.confirmation').on('click', function () {
                return confirm('Are you sure?');
            });



        });

    </script>



    <style>

        .btn1 {

            padding: 5px;

            font-size: 13px;

            height: auto;

            line-height: 1;

            margin: 0px;

        }



        .table1 {

            font-size: 13px;

        }



        .text1 {

            padding: 0px;

            height: 30px;

            font-size: 15px;

        }



        .table td,

        .table th {

            padding: 2px 5px;

        }



        table.dataTable tbody th,

        table.dataTable tbody td {

            padding: 2px 5px;

        }



        td {}

    </style>



@endsection