@extends('layouts.app')

@section('title', 'Cash Book Payment')



@section('content')

    <div class="container"><br>

        <H1 style="text-align:center;">CASH BOOK PAYMENTS LIST</H1>

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

        <br><br>

        <table class="table table1">

            <thead>

                <tr>

                    <th>Id</th>

                    <th>Date</th>

                    <th>Account</th>
                    
                    <th>Naration</th>

                    <th>Action</th>

                </tr>

            </thead>

            <tbody>
                @foreach ($cbp as $key => $cl)
                    <tr>

                        <td>

                            {{ $cl->sno }}

                        </td>

                        <td>

                            {{ \Carbon\Carbon::parse(str_replace('/', '-', $cl->date))->format('d/m/Y') }}

                        </td>

                        <td>

                            {{ $cl->accname }}

                        </td>

                        <td>

                            {{ $cl->naration }}

                        </td>

                        <td>

                            <a class="btn btn-primary btn-lg btn1"
                                href='{{ url('') }}/update/cbp/{{ $cl->sno }}'>Edit</a>

                            <a class="btn btn-primary btn-lg btn1"
                                href='{{ url('') }}/show/cbppr/{{ $cl->sno }}'>Print</a>

                            <!-- <a href="" class="btn btn-success btn-lg btn1">Delete</a> -->

                        </td>

                    </tr>
                @endforeach

            </tbody>

        </table>

        <a class="btn btn-primary 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();

        });
    </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