@extends('adminlte::page')

@section('title','Collection Management')

@section('plugins.Datatables', true)

@section('content_header')

<div class="d-flex justify-content-between flex-wrap">

    <h1>
        Collection Management
    </h1>

    <a href="{{ route('collections.create') }}"
        class="btn btn-primary">

        <i class="fas fa-plus"></i>

        New Collection

    </a>

</div>

@stop

@section('css')

<style>
    #collectionTable {
        width: 100% !important;
        white-space: nowrap;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .action-buttons {
        display: flex;
        gap: 5px;
        flex-wrap: nowrap;
    }

    .card {
        border-radius: 10px;
    }

    #collectionTable th,
    #collectionTable td {
        vertical-align: middle;
    }

    @media(max-width:768px) {

        .content-header h1 {
            font-size: 24px;
        }

    }
</style>

@stop

@section('content')

@if(session('success'))

<div class="alert alert-success alert-dismissible fade show">

    <button type="button"
        class="close"
        data-dismiss="alert">

        &times;

    </button>

    {{ session('success') }}

</div>

@endif

<!-- Filter -->

<div class="card card-info card-outline mb-3">

    <div class="card-header">

        <h3 class="card-title">

            <i class="fas fa-filter"></i>

            Filter Collections

        </h3>

    </div>

    <form method="GET">

        <div class="card-body">

            <div class="row">

                <div class="col-md-3">

                    <label>From Date</label>

                    <input type="date"
                        name="from_date"
                        value="{{ request('from_date') }}"
                        class="form-control">

                </div>

                <div class="col-md-3">

                    <label>To Date</label>

                    <input type="date"
                        name="to_date"
                        value="{{ request('to_date') }}"
                        class="form-control">

                </div>

                <div class="col-md-3 d-flex align-items-end">

                    <button class="btn btn-primary mr-2">

                        <i class="fas fa-search"></i>

                        Filter

                    </button>

                    <a href="{{ route('collections.index') }}"
                        class="btn btn-secondary">

                        Reset

                    </a>

                </div>

            </div>

        </div>

    </form>

</div>

<!-- Collection Table -->

<div class="card card-primary card-outline shadow">

    <div class="card-header">

        <h3 class="card-title">

            Collection List

        </h3>

    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-bordered table-striped"
                id="collectionTable">

                <thead class="bg-primary">
                    <tr>

                        <th>#</th>
                        <th>Receipt No</th>
                        <th>Date</th>
                        <th>Account No</th>
                        <th>Customer</th>
                        <th>Mobile</th>
                        <th>Collection</th>
                        <th>Principal</th>
                        <th>Interest</th>
                        <th>Remaining Amount</th>
                        <th width="150">Action</th>

                    </tr>
                </thead>

                <tbody>

                    @forelse($collections as $collection)

                    <tr>

                        <td>{{ $loop->iteration }}</td>

                        <td>
                            <strong class="text-primary">
                                {{ $collection->receipt_no }}
                            </strong>
                        </td>

                        <td>
                            {{ date('d-m-Y',strtotime($collection->collection_date)) }}
                        </td>

                        <td>{{ $collection->account->account_no ?? '-' }}</td>

                        <td>{{ $collection->account->customer_name ?? '-' }}</td>

                        <td>{{ $collection->account->mobile ?? '-' }}</td>

                        <td class="text-right">
                            ₹ {{ number_format($collection->collection_amount,2) }}
                        </td>

                        <td class="text-right">
                            ₹ {{ number_format($collection->principal_amount,2) }}
                        </td>

                        <td class="text-right">
                            ₹ {{ number_format($collection->interest_amount,2) }}
                        </td>

                        <td class="text-right">
                            ₹ {{ number_format($collection->balance_amount,2) }}
                        </td>

                        <td>

                            <div class="action-buttons">

                                <a href="{{ route('collections.show',$collection->id) }}"
                                    class="btn btn-info btn-sm">
                                    <i class="fas fa-eye"></i>
                                </a>

                                <a href="{{ route('collections.edit',$collection->id) }}"
                                    class="btn btn-warning btn-sm">
                                    <i class="fas fa-edit"></i>
                                </a>

                                <form action="{{ route('collections.destroy',$collection->id) }}"
                                    method="POST"
                                    style="display:inline"
                                    onsubmit="return confirm('Delete Collection?')">

                                    @csrf
                                    @method('DELETE')

                                    <button class="btn btn-danger btn-sm">
                                        <i class="fas fa-trash"></i>
                                    </button>

                                </form>

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>
                        <td colspan="11" class="text-center text-danger">
                            No Collections Found.
                        </td>
                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

@stop

@section('js')

<script>
    $(document).ready(function() {

        $.fn.dataTable.ext.errMode = 'none';

        $('#collectionTable').DataTable({

            scrollX: true,

            responsive: false,

            autoWidth: false,

            pageLength: 10,

            lengthChange: true,

            columnDefs: [{
                orderable: false,
                targets: 10
            }]

        });

    });
</script>

@stop