@extends('admin_dashboard')
@section('admin')

<style>
        .table-responsive {
        overflow-x: auto;
        font-size: 10px;
    }

    .table-responsive tr td {
        margin: 1px 0;  /* Adds margin only to top and bottom */
        padding: 5px 0; /* Adds padding only to top and bottom */
    }

    .table {
        width: 100%;
        table-layout: auto;
    }

    .card {
        margin: 0 auto;
        max-width: 100%;
    }

    body {
        overflow-x: hidden; /* Prevents horizontal overflow */
    }
</style>

 <div class="content">

                    <!-- Start Content-->
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box">
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">

                                        </ol>
                                    </div>
                                    <h4 class="page-title">List of Collections</h4>
                                </div>
                            </div>
                        </div>
                        <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">


                    <table id="basic-datatable" class="table table-responsive dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Sl</th>
                                <th>Date</th>
                                <th>Receipt No.</th>
                                <th>Invoice No.</th>
                                <th>Customer Name</th>
                                <th>Total</th>
                                <th>Cash</th>
                                <th>Bank</th>
                                <th>Discount</th>
                                <th>Invoice Due</th>
                                <th>Total Due</th>
                                {{-- <th>Acc No</th> --}}
                                {{-- <th>Bank</th> --}}
                                {{-- <th>A/C Type</th> --}}
                                {{-- <th>Cheque No.</th> --}}
                                <th>Action</th>
                            </tr>

                        </thead>
                        <tbody>
                            @foreach($collections as $key=> $item)
                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $item->created_at->format('d-F-Y') }}</td>
                                <td>{{ $item->receipt_no }}</td>
                                <td>{{ $item->product_invoice }}</td>
                                <td>{{ $item->customer->name }}</td>
                                <td>{{ $item->total_amount }}</td>
                                <td>{{ $item->cash_amount }}</td>
                                <td>{{ $item->bank_amount }}</td>
                                <td>{{ $item->discount }}</td>
                                <td>{{ $item->invoice_due }}</td>
                                <td>{{ $item->due_amount }}</td>
                                {{-- <td>{{ $item->acc_no }}</td> --}}
                                {{-- <td>{{ $item->bank_name }}</td> --}}
                                {{-- <td>{{ $item->branch }}</td> --}}
                                {{-- <td>{{ $item->cheque_no }}</td> --}}
                                <td><a href="{{ route('delete.collection',$item->receipt_no) }}" class="btn btn-danger rounded-pill waves-effect waves-light" id="delete"></a></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->




                    </div> <!-- container -->

                </div> <!-- content -->


@endsection