@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')

<div class="content-page">
<div class="content">
<div class="container-fluid">

    {{-- 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>

    <div class="row">
        <div class="col-12">
            <div class="card">

                {{-- -- FILTER BAR --------------------------------------- --}}
                <div class="card-header">
                    <form id="filterForm" action="" method="GET">
                        <div class="row g-2 align-items-end">

                            {{-- Filter select --}}
                            <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" name="filter" id="filterSelect">
                                        <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>
                                        @if(isSuperAdmin())
                                            <option value="exportAll"   {{ $filter === 'exportAll'       ? 'selected' : '' }}>Export All Data</option>
                                        @endif
                                        @if(rolesAccess('Red Flag Customers','export') || isSuperAdmin() || isAdmin())
                                            <option value="exportByDate" {{ $filter === 'exportByDate'   ? 'selected' : '' }}>Export by Date Range</option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            {{-- Search box --}}
                            <div class="col-md-4 filterPanel" id="panel-sortBySearch" style="display:none;">
                                <div class="input-group">
                                    <input type="text" name="search" id="searchInput"
                                           class="form-control" placeholder="Name, email, mobile, pancard"
                                           value="{{ request('search') }}">
                                    <button class="btn btn-primary" type="submit">
                                        <i class="uil uil-search"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- Date range filter --}}
                            <div class="col-md-4 filterPanel" id="panel-sortByDate" style="display:none;">
                                <div class="input-group">
                                    <input type="text" name="searchRange" id="searchRange"
                                           class="form-control date" data-toggle="date-picker"
                                           data-cancel-class="btn-warning"
                                           value="{{ request('searchRange') }}">
                                    <button class="btn btn-primary" type="submit">
                                        <i class="uil uil-search"></i>
                                    </button>
                                </div>
                            </div>

                            {{-- Quick-filter submit (Today / Week / Month) --}}
                            <div class="col-md-2 filterPanel" id="panel-quickFilter" style="display:none;">
                                <button class="btn btn-primary w-100" type="submit">
                                    <i class="uil uil-search"></i> Apply
                                </button>
                            </div>

                            {{-- Export All --}}
                            @if(isSuperAdmin())
                            <div class="col-md-2 filterPanel" id="panel-exportAll" style="display:none;">
                                <button class="btn btn-success w-100" type="submit">
                                    <i class="uil uil-export"></i> Export All
                                </button>
                            </div>
                            @endif

                            {{-- Export by date range --}}
                            @if(rolesAccess('Red Flag Customers','export') || isSuperAdmin() || isAdmin())
                            <div class="col-md-4 filterPanel" id="panel-exportByDate" style="display:none;">
                                <div class="input-group">
                                    <input type="text" name="exportRange" id="exportRange"
                                           class="form-control date" data-toggle="date-picker"
                                           data-cancel-class="btn-warning"
                                           value="{{ request('exportRange') }}"
                                           placeholder="Select date range to export">
                                    <button class="btn btn-success" type="submit">
                                        <i class="uil uil-export"></i> Export
                                    </button>
                                </div>
                            </div>
                            @endif

                            {{-- Reset --}}
                            @if(!empty($filter))
                            <div class="col-md-1">
                                <a href="{{ url('redflag/list') }}" class="btn btn-outline-secondary w-100"
                                   title="Reset">
                                    <i class="uil uil-refresh"></i>
                                </a>
                            </div>
                            @endif

                        </div>
                    </form>
                </div>
                {{-- -- END FILTER BAR ------------------------------------ --}}

                <div class="card-body" 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>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Pancard</th>
                                <th>Loan Approval</th>
                                <th>Added By</th>
                                <!--<th>Approved By</th>-->
                                <th>Remarks</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $serial = ($leads->currentPage() - 1) * $leads->perPage() + 1;
                            @endphp
                        
                            @if ($leads->isEmpty())
                                <tr>
                                    <td colspan="10" class="text-center">No data found</td>
                                </tr>
                            @else
                                @foreach($leads as $arr)
                                    @php
                                        $redFlagStatus = $arr->redFlag == '1'
                                            ? '<span class="badge bg-danger text-white">Yes</span>'
                                            : '<span class="badge bg-success text-white">No</span>';
                                    @endphp
                        
                                    <tr style="font-size:15px;">
                                        <td>{{ $serial++ }}</td>
                                        <td>
                                            <a target="_blank"
                                                href="{{ url('profile/' . strtolower($arr->loanTypeName ?? 'payday') . '/' . $arr->leadID) }}"
                                                class="text-primary"
                                                data-bs-toggle="tooltip"
                                                data-bs-placement="top"
                                                data-bs-title="Profile View"
                                                style="font-size:16px; margin-left:6px;">
                                                <i class="mdi mdi-eye"></i>
                                            </a>
                        
                                            @if(in_array(role(), ['CRM Support', 'Collections Manager']) || isSuperAdmin() || isAdmin())
                                                <button class="btn btn-sm btn-outline-primary edit-redflag-btn ms-2"
                                                    data-contactid="{{ $arr->contactID }}"
                                                    title="Edit Red Flag">
                                                    <i class="mdi mdi-pencil"></i>
                                                </button>
                                            @endif
                                        </td>
                        
                                        <td>{{ $arr->name }}</td>
                                        <td>{{ $arr->email }}</td>
                                        <td>{{ $arr->mobile }}</td>
                                        <td>{{ $arr->pancard }}</td>
                                        <td>{!! $redFlagStatus !!}</td>
                                        <td>{{ $arr->addedByName ?? 'N/A' }}</td>
                                        <!--<td>{{ $arr->approvedByName ?? 'N/A' }}</td>-->
                                        <td>{{ $arr->remarks ?? 'N/A' }}</td>
                                        <td>{{ df($arr->redFlagAddedOn) }}</td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        <tfoot>
                            <tr>
                                <th>#</th>
                                <th>Action</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Pancard</th>
                                <th>Loan Approval</th>
                                <th>Added By</th>
                                <!--<th>Approved By</th>-->
                                <th>Remarks</th>
                                <th>Date</th>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="row">
                        {{ $leads->appends($queryParameters)->links('pagination::bootstrap-5') }}
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
</div>
</div>

<!-- Red Flag Update Modal -->
<div class="modal fade" id="editRedFlagModal" tabindex="-1" role="dialog" aria-labelledby="editRedFlagModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editRedFlagModalLabel">Update Red Flag</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editRedFlagForm">
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="contactID" id="modalContactID" value="">

                    <div class="mb-3">
                        <label for="modalName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="modalName" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Red Flag Status</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="redFlag" id="redflagYes" value="1">
                            <label class="form-check-label" for="redflagYes">Yes</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="redFlag" id="redflagNo" value="0">
                            <label class="form-check-label" for="redflagNo">No</label>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="modalRemarks" class="form-label">Remarks</label>
                        <textarea class="form-control" id="modalRemarks" name="remarks" rows="4"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('custom-js')
<script>
$(document).ready(function () {

    // -------------------------------------------------------------------------
    // Filter panel toggle
    // -------------------------------------------------------------------------
    var quickFilters = ['sortByToday','sortByWeek','sortByThisMonth','sortByLastMonth'];

    function showFilterPanel(val) {
        // Hide all panels first
        $('.filterPanel').hide();

        if (val === 'sortBySearch') {
            $('#panel-sortBySearch').show();
        } else if (val === 'sortByDate') {
            $('#panel-sortByDate').show();
        } else if (val === 'exportAll') {
            $('#panel-exportAll').show();
        } else if (val === 'exportByDate') {
            $('#panel-exportByDate').show();
        } else if (quickFilters.indexOf(val) !== -1) {
            $('#panel-quickFilter').show();
        }
    }

    // Initialize on page load
    showFilterPanel('{{ $filter ?: "sortBySearch" }}');

    // On change
    $('#filterSelect').on('change', function () {
        showFilterPanel($(this).val());
    });

    // -------------------------------------------------------------------------
    // Edit Red Flag Button Click (open modal)
    // -------------------------------------------------------------------------
    $(document).on('click', '.edit-redflag-btn', function () {
        var contactID = $(this).data('contactid');
        $.ajax({
            url: '{{ route('redFlagDetails', '') }}/' + contactID,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if (data.response === 'success') {
                    var contact = data.data;
                    $('#modalContactID').val(contact.contactID);
                    $('#modalName').val(contact.name);
                    if (contact.redFlag == 1) {
                        $('#redflagYes').prop('checked', true);
                    } else {
                        $('#redflagNo').prop('checked', true);
                    }
                    $('#modalRemarks').val(contact.remarks);
                    $('#editRedFlagModal').modal('show');
                }
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                $.NotificationApp.send('Oh snap!', 'Failed to fetch details',
                    'bottom-right', 'rgba(0,0,0,0.2)', 'error');
            }
        });
    });

    // -------------------------------------------------------------------------
    // Edit Red Flag Form Submit
    // -------------------------------------------------------------------------
    $('#editRedFlagForm').on('submit', function (e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: '{{ route('updateRedFlag') }}',
            type: 'POST',
            dataType: 'json',
            data: formData,
            success: function (data) {
                if (data.response === 'success') { 
                    $.NotificationApp.send('Well Done!', data.message,
                        'bottom-right', 'rgba(0,0,0,0.2)', 'success');
                    $('#editRedFlagModal').modal('hide');
                    setTimeout(function () { window.location.reload(); }, 500);
                } else {
                    $.NotificationApp.send('Oh snap!', data.message,
                        'bottom-right', 'rgba(0,0,0,0.2)', 'error');
                }
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                $.NotificationApp.send('Oh snap!', 'Failed to update red flag',
                    'bottom-right', 'rgba(0,0,0,0.2)', 'error');
            }
        });
    });

});
</script>
@endsection