@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a
                                            href="javascript: void(0);">{{$page_info['page_title']}}</a></li>
                                    <li class="breadcrumb-item active">{{$page_info['page_name']}}</li>
                                </ol>
                            </div>
                            <h4 class="page-title">{{$page_info['page_name']}}</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-md-12">
                                        <form action="" method="get">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <!-- Adjusted column width -->
                                                    <div class="input-group">
                                                        <span class="input-group-text">
                                                            <i class="uil uil-filter"></i>
                                                        </span>
                                                        <select class="form-select exportSelect" name="filter">
                                                            <option value="sortBySearch" {{ ($filter ?? '') === 'sortBySearch' ? 'selected' : '' }}>Search</option>
                                                            <option value="disbursed" {{ ($filter ?? '') === 'disbursed' ? 'selected' : '' }}>Disbursed</option>
                                                            <option value="pending" {{ ($filter ?? '') === 'pending' ? 'selected' : '' }}>Pending</option>
                                                            <option value="sortByToday" {{ ($filter ?? '') === 'sortByToday' ? 'selected' : '' }}>Today</option>
                                                            <option value="sortByWeek" {{ ($filter ?? '') === 'sortByWeek' ? 'selected' : '' }}>Last 7 Days</option>
                                                            <option value="sortByThisMonth" {{ ($filter ?? '') === 'sortByThisMonth' ? 'selected' : '' }}>Current Month</option>
                                                            <option value="sortByLastMonth" {{ ($filter ?? '') === 'sortByLastMonth' ? 'selected' : '' }}>Previous Month</option>
                                                            <option value="sortByDate" {{ ($filter ?? '') === 'sortByDate' ? 'selected' : '' }}>Date Range</option>
                                                            <option value="exportAll" {{ ($filter ?? '') === 'exportAll' ? 'selected' : '' }}>Export All Data</option>
                                                            <option value="exportByDate" {{ ($filter ?? '') === 'exportByDate' ? 'selected' : '' }}>Export by Date Range</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 searchBoxContainer">
                                                    <div class="input-group">
                                                        <input type="text" name="search" class="form-control searchInput"
                                                            placeholder="Loan No, Lead ID" value="{{ $search ?? '' }}">
                                                        <button class="btn btn-primary" type="submit" id="searchButton">
                                                            <i class="uil uil-search"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 dateRangeContainer" style="display: none;">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control date singledaterange" name="searchRange"
                                                            data-toggle="date-picker" data-cancel-class="btn-warning" value="{{ request('searchRange') }}">
                                                        <button class="btn btn-primary customSearchButton" type="submit">
                                                            <i class="uil uil-search"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 exportAllContainer" style="display: none;">
                                                    <button class="btn btn-primary" type="submit">
                                                        <i class="uil uil-export"></i> Export
                                                    </button>
                                                </div>
                                                <div class="col-md-4 exportByDateContainer" style="display: none;">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control date exportDateRange" name="exportRange"
                                                            id="exportRange" data-toggle="date-picker" data-cancel-class="btn-warning" value="{{ request('exportRange') }}">
                                                        <button class="btn btn-primary exportByDateRangeButton" type="submit">
                                                            <i class="uil uil-export"></i> Export
                                                        </button>
                                                    </div>
                                                </div>
                                                @if(!empty($filter) || !empty($search))
                                                    <div class="col-md-1">
                                                        <a href="{{ route('accounts.loans.list') }}" class="btn btn-outline-primary">
                                                            <i class="uil uil-refresh"></i>
                                                        </a>
                                                    </div>
                                                @endif
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body" data-simplebar data-simplebar-lg style="overflow-x:auto;">
                                <table class="table w-100 table-striped" style="white-space: nowrap;">
                                    <thead>
                                        <tr style="font-size:14px;">
                                            <th>#</th>
                                            <th>Action</th>
                                            <th>Invoice No.</th>
                                            <th>Loan No</th>
                                            <th>Customer Name</th>
                                            <th>Status</th>
                                            <th>City</th>
                                            <th>State</th>
                                            <th>Admin Fee</th>
                                            <th>IGST</th>
                                            <th>CGST</th>
                                            <th>SGST</th>
                                            <th>Total</th>
                                            <th>Disbursal Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $serial = isset($loans) ? (($loans->currentPage() - 1) * $loans->perPage() + 1) : 1;
                                        @endphp
                                        @if(isset($loans) && $loans->isEmpty())
                                            <tr>
                                                <td colspan="14" class="text-center">No records found</td>
                                            </tr>
                                        @elseif(isset($loans))
                                            @foreach($loans as $loan)
                                                <tr style="font-size:14px;">
                                                    <td>{{$serial++}}</td>
                                                    <td><a target="_blank" href="profile/payday/{{$loan->leadID}}"
                                                            class="text-primary" data-bs-toggle="tooltip" data-bs-placement="top"
                                                            data-bs-custom-class="primary-tooltip" data-bs-title="Profile View"
                                                            style="font-size: 16px;margin-left: 6px;">
                                                            <i class='mdi mdi-eye'></i>
                                                        </a>
                                                    </td>
                                                    <td>{{ $loan->invoiceNo }}</td>
                                                    <td>{{ $loan->loanNo ?? '-' }}</td>
                                                    <td>{{ $loan->customerName ?? '-' }}</td>
                                                    <td>
                                                        @if(($loan->invoiceStatus ?? '') === 'Generated')
                                                            <span class="badge bg-success">Generated</span>
                                                        @else
                                                            <span class="badge bg-danger">Canceled</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $loan->city ?? '-' }}</td>
                                                    <td>{{ $loan->state ?? '-' }}</td>
                                                    <td>{{ number_format($loan->adminFee, 2) }}</td>
                                                    <td>{{ number_format($loan->igst, 2) }}</td>
                                                    <td>{{ number_format($loan->cgst, 2) }}</td>
                                                    <td>{{ number_format($loan->sgst, 2) }}</td>
                                                    <td>{{ number_format($loan->totalAmount, 2) }}</td>
                                                    <td>{{ $loan->disbursalDateFmt ?? '-' }}
                                                    </td>
                                                    <td>
                                                        @if(!empty($loan->invoiceNo))
                                                            <a target="_blank" href="{{ route('accounts.loans.invoice', ['invoiceNo' => $loan->invoiceNo]) }}"
                                                                class="btn btn-sm btn-primary">
                                                                <i class="uil uil-file-download"></i>
                                                            </a>
                                                        @else
                                                            <span class="badge bg-secondary">N/A</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>#</th>
                                            <th>Action</th>
                                            <th>Invoice No</th>
                                            <th>Loan No</th>
                                            <th>Status</th>
                                            <th>City</th>
                                            <th>State</th>
                                            <th>Admin Fee</th>
                                            <th>IGST</th>
                                            <th>CGST</th>
                                            <th>SGST</th>
                                            <th>Total</th>
                                            <th>Disbursal Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </tfoot>
                                </table>
                                <div class="row">
                                    {{ $loans->appends($queryParameters)->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
<script type="text/javascript">
    $(document).ready(function() {
        // Function to update containers based on selected option
        function updateContainers(selectedOption) {
            // Hide all containers and disable inputs
            $('.searchBoxContainer, .dateRangeContainer, .exportAllContainer, .exportByDateContainer').hide();
            $('.searchInput, .singledaterange, .exportDateRange').prop('disabled', true);

            // Show the corresponding container and enable relevant inputs based on selected option
            if (selectedOption === 'sortBySearch') {
                $('.searchBoxContainer').show();
                $('.searchInput').prop('disabled', false);
            } else if (selectedOption === 'disbursed' || selectedOption === 'pending') {
                $('.searchBoxContainer').show();
                $('.searchInput').prop('disabled', false);
            } else if (selectedOption === 'sortByDate') {
                $('.dateRangeContainer').show();
                $('.singledaterange').prop('disabled', false);
            } else if (selectedOption === 'exportAll') {
                $('.exportAllContainer').show();
                // No specific input to enable/disable
            } else if (selectedOption === 'exportByDate') {
                $('.exportByDateContainer').show();
                $('.exportDateRange').prop('disabled', false);
            } else if (selectedOption === 'sortByToday' || selectedOption === 'sortByWeek' || selectedOption === 'sortByThisMonth' || selectedOption === 'sortByLastMonth') {
                // Only show the search button in searchBoxContainer for these options
                $('.searchBoxContainer').show();
                $('#searchButton').show();
                // Optionally disable search input if it's not meant to be used with these filters, 
                // but usually user might want to search within today's results. 
                // In closedLeads, it was disabled? Let's check logic:
                // closedLeads: $('.searchInput...').prop('disabled', true) at start. 
                // For these options, it only shows container and button. So input remains disabled.
                // I will follow that pattern.
            } else {
                // Default behavior
                selectedOption = 'sortBySearch';
                $('.searchBoxContainer').show();
                $('.searchInput').prop('disabled', false);
            }

            // Set the selected option in the dropdown
            $('.exportSelect').val(selectedOption);
        }

        // Initialize with default option 'sortBySearch'
        @php
            $selectedOption = !empty($filter) ? $filter : 'sortBySearch';
        @endphp
        var selectedOption = '{{ $selectedOption }}';
        updateContainers(selectedOption);

        // Handle change event on the select dropdown
        $('.exportSelect').change(function() {
            var selectedOption = $(this).val();
            updateContainers(selectedOption);
        });
    });
</script>
@endsection