@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')
    <div class="content-page">
        <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">
                                    <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="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="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">
                                                            Date Range</option>

                                                        @if(isSuperAdmin() || role() == 'Sr. Recovery Manager' || isAdmin())
                                                            <option value="exportAll">Export All Data</option>
                                                        @endif
                                                        <option value="exportByDate">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="Name, email, mobile, 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>
                                            <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">
                                                <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>
                                            @if(!empty($filter))
                                                <div class="col-md-1">
                                                    <a href="leads/all-leads" class="btn btn-outline-primary"
                                                        data-toggle="tooltip" data-original-title="success">
                                                        <i class="uil uil-refresh"></i>
                                                    </a>
                                                </div>
                                            @endif
                                        </div>
                                    </form>
                                </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>Lead ID</th>
                                            <th>Loan No</th>
                                            <th>Name</th>
                                            <th>Mobile</th>
                                            <th>Email</th>
                                            <th>Gender</th>
                                            <th>Date of Birth</th>
                                            <th>PAN Number</th>
                                            <th>Aadhar Number</th>
                                            <th>Address</th>
                                            <th>City</th>
                                            <th>State</th>
                                            <th>Pincode</th>
                                            <th>Repay Amount</th>
                                            <th>Loan Type</th>
                                            <th>Loan Amount</th>
                                            <th>ROI</th>
                                            <th>Tenure</th>
                                            <th>Admin Fee</th>
                                            <th>CIBIL</th>
                                            <th>Disbursal Date</th>
                                            <th>Repay Date</th>
                                            <th>Bank</th>
                                            <th>Bank Branch</th>
                                            <th>Account No</th>
                                            <th>Account Type</th>
                                            <th>IFSC</th>
                                            <th>Cheque Details</th>
                                            <th>Disbursal Ref No</th>
                                            <th>Credit Officer</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($cibilReport as $index => $case)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>
                                                    <a target="_blank"
                                                        href="profile/{{ strtolower($case->loanTypeName) }}/{{ $case->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;">
                                                        {{ $case->leadID }}
                                                    </a>
                                                </td>
                                                <td>{{ $case->loanNo }}</td>
                                                <td>{{ $case->customerName }}</td>
                                                <td>{{ $case->mobile }}</td>
                                                <td>{{ $case->email }}</td>
                                                <td>{{ $case->gender }}</td>
                                                <td>{{ $case->dob }}</td>
                                                <td>{{ $case->pancard }}</td>
                                                <td>{{ $case->aadharNo }}</td>
                                                <td>
                                                    {{ $case->address }} ({{ $case->addressType }})
                                                </td>
                                                <td>{{ $case->city }}</td>
                                                <td>{{ $case->state }}</td>
                                                <td>{{ $case->pincode }}</td>
                                                <td>{{ $case->repayAmount }}</td>
                                                <td>{{ $case->loanType }}</td>
                                                <td>{{ number_format($case->loanAmtApproved) }}</td>
                                                <td>{{ $case->roi }}%</td>
                                                <td>{{ $case->tenure }} months</td>
                                                <td>{{ $case->adminFee }}</td>
                                                <td>{{ $case->cibil }}</td>
                                                <td>{{ \Carbon\Carbon::parse($case->disbursalDate)->format('d-m-Y') }}</td>
                                                <td>{{ \Carbon\Carbon::parse($case->repayDate)->format('d-m-Y') }}</td>
                                                <td>{{ $case->bank }}</td>
                                                <td>{{ $case->bankBranch }}</td>
                                                <td>{{ $case->accountNo }}</td>
                                                <td>{{ $case->accountType }}</td>
                                                <td>{{ $case->bankIfsc }}</td>
                                                <td>{{ $case->chequeDetails }}</td>
                                                <td>{{ $case->disbursalRefrenceNo }}</td>
                                                <td>{{ $case->creditName }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="30" class="text-center">No CIBIL data found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                <div class="row">
                                    {{ $cibilReport->appends($queryParameters)->links('pagination::bootstrap-5') }}
                                </div>
                            </div>

                        </div>

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

@endsection

        @section('custom-js')

            <script type="text/javascript">

                $(document).ready(function () {
                    // Manually activate the tab based on URL hash
                    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                        var target = $(e.target).attr("href"); // activated tab
                        window.location.hash = target; // add tab id to browser URL
                    });

                    // Check if there's a hash in the URL and activate the corresponding tab
                    if (window.location.hash) {
                        $('a[data-bs-toggle="tab"][href="' + window.location.hash + '"]').tab('show');
                    }
                });


                $('#checkAll').change(function () {
                    $('.leadCheckbox').prop('checked', $(this).prop('checked'));
                    toggleDeleteButton();
                });

                // Individual checkbox change
                $('.leadCheckbox').change(function () {
                    toggleDeleteButton();
                });

                function toggleDeleteButton() {
                    var anyChecked = false;
                    $('.leadCheckbox').each(function () {
                        if ($(this).prop('checked')) {
                            anyChecked = true;
                            return false; // Exit each loop early
                        }
                    });

                    if (anyChecked) {
                        $('.deleteButton').show();
                    } else {
                        $('.deleteButton').hide();
                    }
                }


                // Handle delete button click
                $('.deleteButton').click(function () {
                    var leadIDs = [];
                    $('.leadCheckbox:checked').each(function () {
                        leadIDs.push($(this).val());
                    });

                    if (leadIDs.length === 0) {
                        alert('Please select at least one lead to delete.');
                        return;
                    }


                    $('#info-alert-modal').modal('show');


                    $('#leadIdDelete').val(leadIDs.join(','));


                    $('#confirmYes').click(function () {

                        $.ajax({
                            url: "{{ route('leadsDelete') }}",
                            type: 'POST',
                            data: {
                                leadIDs: leadIDs,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function (data) {
                                if (data.response == 'success') {
                                    $.NotificationApp.send("Well Done!", data.message, "bottom-right", "rgba(0,0,0,0.2)", "success");
                                    setTimeout(function () { window.location.reload(); }, 1000);
                                }
                            },

                        });

                        // Hide modal after deletion
                        $('#info-alert-modal').modal('hide');
                    });
                });


                $('#addFreshLeadBtn').click(function () {
                    $('#leadAddEditModalForm')[0].reset();
                });

                // Date picker initialization or additional actions as needed


                $(document).ready(function () {
                    // Function to update containers based on selected option
                    function updateContainers(selectedOption) {
                        // Hide all containers and disable inputs
                        $('.searchBoxContainer, .dateRangeContainer, .customSortContainer, .exportAllContainer, .exportByDateContainer').hide();
                        $('.searchInput, .singledaterange, .customSearchInput, .customDateRange, .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 === 'sortByDate') {
                            $('.dateRangeContainer').show();
                            $('.singledaterange').prop('disabled', false);
                        } else if (selectedOption === 'customSort') {
                            $('.customSortContainer').show();
                            $('.customSearchInput, .customDateRange').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();
                        } else {
                            // Default behavior if no valid option selected or if selectedOption is blank
                            selectedOption = 'sortBySearch'; // Default to '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