@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')
    <div class="content-page">
        <div class="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">
                                    <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>
                <!-- end page title -->
                <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" enctype="multipart/form-data">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <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="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="importData" {{ $filter === 'importData' ? 'selected' : '' }}>Import Data</option>
                                                                <option value="deleteAll" {{ $filter === 'deleteAll' ? 'selected' : '' }}>Delete All Data</option>
                                                        
                                                            @if(rolesAccess('Disbursal Sheet Send', 'export') || isSuperAdmin() || isAdmin())
                                                                <option value="exportByDate" {{ $filter === 'exportByDate' ? 'selected' : '' }}>Export by Date Range</option>
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-3 searchBoxContainer">
                                                    <div class="input-group">
                                                        <input type="text" name="search" class="form-control searchInput"
                                                            placeholder="Reference No, Loan No, Name...">
                                                        <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">
                                                        <button class="btn btn-primary customSearchButton" type="submit">
                                                            <i class="uil uil-search"></i>
                                                        </button>
                                                    </div>
                                                </div>

                                                @if(isSuperAdmin())
                                                    <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>
                                                @endif

                                                @if(rolesAccess('Disbursal Sheet Send', 'export') || isSuperAdmin() || isAdmin())
                                                    <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">
                                                            <button class="btn btn-primary exportByDateRangeButton"
                                                                type="submit">
                                                                <i class="uil uil-export"></i> Export
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endif

                                                <!-- Inside your .card-header (keep export form clean) -->
                                                <form action="" method="get" enctype="multipart/form-data">
                                                    <div class="row">
                                                        <!-- your existing filters and export buttons -->
                                                    </div>
                                                </form>

                                                <!-- Import form placed outside main form -->
                                                <div class="col-md-4 importDataContainer"
                                                    style="display: none; margin-top: 10px;">
                                                    <form id="importForm" action="{{ route('reconciliation.upload') }}"
                                                        method="POST" enctype="multipart/form-data">
                                                        @csrf
                                                        <div class="input-group">
                                                            <input type="file" name="excel_file" class="form-control"
                                                                accept=".xls,.xlsx" required>
                                                            <button type="submit" class="btn btn-success">
                                                                <i class="uil uil-import"></i> Import
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                                <!-- Delete All button -->
                                                <div class="col-md-3 deleteAllContainer"
                                                    style="display: none; margin-top: 10px;">
                                                    <button type="button" class="btn btn-danger" id="deleteAllBtn">
                                                        <i class="uil uil-trash"></i> Delete All Data
                                                    </button>
                                                </div>
                                                @if(!empty($filter))
                                                    <div class="col-md-1">
                                                        <a href="{{ url('accounts/reconciliation') }}"
                                                            class="btn btn-outline-primary" data-toggle="tooltip"
                                                            title="Refresh">
                                                            <i class="uil uil-refresh"></i>
                                                        </a>
                                                    </div>
                                                @endif
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Table Section -->
                            <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>Reference No</th>
                                            <th>#</th>
                                            <th>Transaction ID</th>
                                            <th>Date</th>
                                            <th>Txn Posted Date</th>
                                            <th>Cheque No</th>
                                            <th>Description</th>
                                            <th>DR/CR</th>
                                            <th>Amount</th>
                                            <th>Available Balance (INR)</th>
                                            <th>Loan No</th>
                                            <th>Name</th>
                                            <th>State</th>
                                            <th>Disbursal/Collection Amount</th>
                                            <th>Created Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $serial = ($loans->currentPage() - 1) * $loans->perPage() + 1;
                                         @endphp
                                        @forelse($loans as $r)
                                            <tr style="font-size:15px;">
                                                <td>{{ $r->reference_no }}</td>
                                                <td>{{ $serial++ }}</td>
                                                <td>{{ $r->transaction_id }}</td>
                                                <td>{{ $r->date }}</td>
                                                <td>{{ $r->txn_posted_date }}</td>
                                                <td>{{ $r->cheque_no }}</td>
                                                <td>{{ $r->description }}</td>
                                                <td>{{ $r->dr_cr }}</td>
                                                <td>{{ nf($r->amount) }}</td>
                                                <td>{{ nf($r->available_balance) }}</td>
                                                <td>{{ $r->loanNo }}</td>
                                                <td>{{ ucwords($r->name) }}</td>
                                                <td>{{ $r->state }}</td>
                                                <td>{{ nf($r->disbursalAmount + $r->collectedAmount) }}</td>
                                                <td>{{ dft($r->createdDate) }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="14" class="text-center">No records found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>Reference No</th>
                                            <th>#</th>
                                            <th>Transaction ID</th>
                                            <th>Date</th>
                                            <th>Txn Posted Date</th>
                                            <th>Cheque No</th>
                                            <th>Description</th>
                                            <th>DR/CR</th>
                                            <th>Amount</th>
                                            <th>Available Balance (INR)</th>
                                            <th>Loan No</th>
                                            <th>Name</th>
                                            <th>State</th>
                                            <th>Disbursal/Collection Amount</th>
                                            <th>Created Date</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 updateContainers(selectedOption) {
                $('.searchBoxContainer, .dateRangeContainer, .exportAllContainer, .exportByDateContainer, .importDataContainer').hide();
                $('.searchInput, .singledaterange, .exportDateRange').prop('disabled', true);

                if (selectedOption === 'sortBySearch') {
                    $('.searchBoxContainer').show();
                    $('.searchInput').prop('disabled', false);
                } else if (selectedOption === 'sortByDate') {
                    $('.dateRangeContainer').show();
                    $('.singledaterange').prop('disabled', false);
                } else if (selectedOption === 'exportAll') {
                    $('.exportAllContainer').show();
                } else if (selectedOption === 'exportByDate') {
                    $('.exportByDateContainer').show();
                    $('.exportDateRange').prop('disabled', false);
                } else if (selectedOption === 'importData') {
                    $('.importDataContainer').show();
                } else if (selectedOption === 'deleteAll') {
                    $('.deleteAllContainer').show();
                } else if (selectedOption === 'sortByToday' || selectedOption === 'sortByWeek' || selectedOption === 'sortByThisMonth' || selectedOption === 'sortByLastMonth') {
                    $('.searchBoxContainer').show();
                    $('#searchButton').show();
                } else {
                    selectedOption = 'sortBySearch';
                    $('.searchBoxContainer').show();
                    $('.searchInput').prop('disabled', false);
                }
                $('.exportSelect').val(selectedOption);
            }

            var selectedOption = '{{ !empty($filter) ? $filter : "sortBySearch" }}';
            updateContainers(selectedOption);

            $('.exportSelect').change(function () {
                updateContainers($(this).val());
            });

            $('#deleteAllBtn').on('click', function () {
                if (!confirm('Are you sure you want to delete all reconciliation data?')) return;
                $.ajax({
                    url: '{{ route('reconciliation.deleteAll') }}',
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    success: function () { location.reload(); },
                    error: function () { alert('Delete failed'); }
                });
            });
        });
    </script>
@endsection