@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">
                                                    <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>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 searchBoxContainer">
                                                    <div class="input-group">
                                                        <input type="text" name="search" class="form-control searchInput" placeholder="Reference, Transaction ID, Name, Loan No...">
                                                        <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(!empty($filter))
                                                    <div class="col-md-1">
                                                        <a href="{{ url('accounts/bank-data') }}" class="btn btn-outline-primary" data-toggle="tooltip" title="Refresh">
                                                            <i class="uil uil-refresh"></i>
                                                        </a>
                                                    </div>
                                                @endif
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body" style="overflow-x:auto;" data-simplebar data-simplebar-lg>
                                <table class="table w-100 table-striped" style="white-space: nowrap;">
                                    <thead>
                                        <tr style="font-size:14px;">
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Entry No</th>
                                            <th>Voucher Type</th>
                                            <th>Dr Ledger Name</th>
                                            <th>Cr Ledger Name</th>
                                            <th>Debit Amount</th>
                                            <th>Credit Amount</th>
                                            <th>Narration</th>
                                            <th>CR Under Group</th>
                                            <th>DR Under Group</th>
                                            <th>Dr Address</th>
                                            <th>Dr GST No</th>
                                            <th>Dr State</th>
                                            <th>Cr Address</th>
                                            <th>Cr GST No</th>
                                            <th>Cr State</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $serial = ($rows->currentPage() - 1) * $rows->perPage() + 1; @endphp
                                        @forelse($rows as $r)
                                            <tr style="font-size:15px;">
                                                <td>{{ $serial++ }}</td>
                                                <td>{{ $r->date }}</td>
                                                <td>{{ $r->entry_no }}</td>
                                                <td>{{ $r->voucher_type }}</td>
                                                <td>{{ $r->dr_ledger_name }}</td>
                                                <td>{{ $r->cr_ledger_name }}</td>
                                                <td>{{ nf($r->debit_amount) }}</td>
                                                <td>{{ nf($r->credit_amount) }}</td>
                                                <td>{{ $r->narration }}</td>
                                                <td>{{ $r->cr_under_group }}</td>
                                                <td>{{ $r->dr_under_group }}</td>
                                                <td>{{ $r->dr_address }}</td>
                                                <td>{{ $r->dr_gst_no }}</td>
                                                <td>{{ $r->dr_state }}</td>
                                                <td>{{ $r->cr_address }}</td>
                                                <td>{{ $r->cr_gst_no }}</td>
                                                <td>{{ $r->cr_state }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="17" class="text-center">No records found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                    <tfoot>
                                        <tr style="font-size:14px;">
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Entry No</th>
                                            <th>Voucher Type</th>
                                            <th>Dr Ledger Name</th>
                                            <th>Cr Ledger Name</th>
                                            <th>Debit Amount</th>
                                            <th>Credit Amount</th>
                                            <th>Narration</th>
                                            <th>CR Under Group</th>
                                            <th>DR Under Group</th>
                                            <th>Dr Address</th>
                                            <th>Dr GST No</th>
                                            <th>Dr State</th>
                                            <th>Cr Address</th>
                                            <th>Cr GST No</th>
                                            <th>Cr State</th>
                                        </tr>
                                    </tfoot>
                                </table>
                                <div class="row">
                                    {{ $rows->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').hide();
            $('.searchInput, .singledaterange').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 === '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 = '{{ $filter ?? 'sortBySearch' }}';
        updateContainers(selectedOption);

        $('.exportSelect').change(function () {
            var selectedOption = $(this).val();
            updateContainers(selectedOption);
        });
    });
</script>
@endsection