@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')
    <!-- Modal Structure -->
    <div id="info-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-4">
                    <div class="text-center">
                        <i class="ri-alert-line h1 text-warning"></i>
                        <h4 class="mt-2">Are You Sure You Want To Proceed?</h4>
                        <p class="mt-3"></p>
                        <button type="button" class="btn btn-success my-2 confirm-yes">Yes</button>
                        <button type="button" class="btn btn-danger my-2" data-bs-dismiss="modal">No</button>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- Rejection Modal -->
    <div id="rejection-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Provide Rejection Details</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- Your existing form fields -->
                        <!-- Branch -->
                        <div class="col-md-4">
                            <div class="mb-2">
                                <label class="mb-1 font-12">Branches</label>
                                <select id="branch" class="form-control" name="branch">
                                    <option value="">Choose Branches</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->cityID }}">{{ $branch->cityName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="branchErr"></span>
                        </div>
                        <!-- Email -->
                        <div class="col-md-4">
                            <div class="mb-2">
                                <label class="mb-1 font-12">Official Email</label>
                                <input type="email" class="form-control" name="officialEmail" id="officialEmail"
                                    placeholder="Official Email">
                            </div>
                            <span class="officialEmailErr"></span>
                        </div>
                        <!-- CIBIL -->
                        <div class="col-md-4">
                            <div class="mb-2">
                                <label class="mb-1 font-12">Cibil Score</label>
                                <input class="form-control" type="number" name="cibilScore" id="cibilScore"
                                    placeholder="Cibil Score" min="0">
                            </div>
                            <span class="cibilScoreErr"></span>
                        </div>
                        <!-- Rejection Reasons -->
                        <div class="col-md-4">
                            <div class="mb-2">
                                <label class="mb-1 font-12">Rejection Reasons</label>
                                <select class="select2 form-control select2-multiple" id="rejectionReason"
                                    name="rejectionReason[]" multiple="multiple" data-toggle="select2"
                                    data-placeholder="Choose Rejection Reasons">
                                    <option value="" disabled>Select Reason</option>
                                    <option value="Rented house without renewal agreement &amp; huge liabilities">Rented
                                        house without renewal agreement &amp; huge liabilities</option>
                                    <option value="Applicant residing in PG">Applicant residing in PG</option>
                                    <option value="No proper current address proof">No proper current address proof</option>
                                    <option value="Low employment tenure also variations in salary">Low employment tenure
                                        also variations in salary</option>
                                    <option
                                        value="CIBIL Bureau negative, Suit filed case, OD &amp; very high DPDs in recent tracks including PL">
                                        CIBIL Bureau negative, Suit filed case, OD &amp; very high DPDs in recent tracks
                                        including PL</option>
                                    <option value="No proper employment proof">No proper employment proof</option>
                                    <option value="Applicant not okay with ROI/processing fee/sanctioned amount">Applicant
                                        not okay with ROI/processing fee/sanctioned amount</option>
                                    <option value="Edited documents/fraudulent documents">Edited documents/fraudulent
                                        documents </option>
                                    <option value="No proper response since long time">No proper response since long time
                                    </option>
                                    <option value="Repayment issue">Repayment issue</option>
                                    <option value="Negative area/community dominated area">Negative area/community dominated
                                        area</option>
                                    <option value="Many bounces in last few months in banking">Many bounces in last few
                                        months in banking</option>
                                </select>
                            </div>
                            <span class="rejectionReasonErr"></span>
                        </div>
                        <!-- Remarks -->
                        <div class="col-md-4">
                            <div class="mb-2">
                                <label class="mb-1 font-12">Remark</label>
                                <textarea name="remarks" id="remarks" class="form-control" placeholder="Remarks"
                                    rows="2"></textarea>
                            </div>
                            <span class="remarkErr"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="submitRejectSanctionBtn" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <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-body">
                                <form id="leadSearchForm">
                                    @csrf
                                    <div class="row align-items-end">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="leadID" class="form-label">Lead ID</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="leadID" name="leadID"
                                                        placeholder="Enter Lead ID" required>
                                                    <button class="btn btn-primary" type="submit" id="searchButton">
                                                        <i class="uil uil-search"></i> Search
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4" id="statusChangeContainer" style="display: none;">
                                            <div class="mb-3">
                                                <label for="statusDropdown" class="form-label">Change Status</label>
                                                <div class="input-group">
                                                    <select class="form-select" id="statusDropdown">
                                                        <option value="">Select status...</option>
                                                    </select>
                                                    <button class="btn btn-primary" type="button" id="updateStatusBtn">
                                                        <i class="uil uil-sync"></i> Update
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" id="leadProfileContainer" style="display: none;">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body" data-simplebar data-simplebar-lg style="overflow-x:auto;"
                                id="profileData">
                                <!-- Profile data will be loaded here via AJAX -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- container -->
        </div>
    </div>

@endsection

@section('custom-js')
    <script>
        $(document).ready(function () {
            // Status mapping with allowed transitions
            const statusTransitions = {
                'Disbursed': ['Approved', 'Document Received', 'Callback'],
                'Disbursal Sheet Send': ['Approved', 'Document Received', 'Callback'],
                'Approved': ['Document Received', 'Callback'],
                'Document Received': ['Callback'],
                'Callback': [] // No revert options from Callback
            };

            $('#leadSearchForm').submit(function (e) {
                e.preventDefault();
                var leadID = $('#leadID').val().trim();

                if (leadID === '') {
                    alert('Please enter a Lead ID');
                    return;
                }

                // Show loading state
                $('#searchButton').html('<i class="uil uil-spinner uil-spin"></i> Searching...');

                // Make AJAX request
                $.ajax({
                    url: "{{ route('lead.data', '') }}/" + leadID,
                    type: 'GET',
                    success: function (response) {
                        $('#searchButton').html('<i class="uil uil-search"></i> Search');

                        if (response.error) {
                            alert(response.error);
                            $('#statusChangeContainer').hide();
                            return;
                        }

                        // Get current status
                        const currentStatus = response.profileData.status;

                        // Get allowed status transitions
                        // Get current status
                        const statusDropdown = $('#statusDropdown');
                        statusDropdown.empty().append('<option value="">Select status...</option>');

                        // Add all allowed statuses
                        console.log(response.allowedStatuses);
                        response.allowedStatuses.forEach(status => {
                            statusDropdown.append(
                                `<option value="${status}">Revert to ${status}</option>`
                            );
                        });

                        if (response.allowedStatuses.length > 0) {
                            $('#statusChangeContainer').show();
                        } else {
                            $('#statusChangeContainer').hide();
                        }

                        let statusHistoryHtml = '';
                        if (response.statusHistory && response.statusHistory.length > 0) {
                            statusHistoryHtml = `
                                                                    <h4 class="card-title mt-4">Status Change History</h4>
                                                                    <hr>
                                                                    <div class="table-responsive">
                                                                        <table class="table table-bordered table-striped">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Changed At</th>
                                                                                    <th>From Status</th>
                                                                                    <th>To Status</th>
                                                                                    <th>Changed By</th>
                                                                                    <th>Type</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                ${response.statusHistory.map(history => `
                                                                                    <tr>
                                                                                        <td>${history.changed_at}</td>
                                                                                        <td>${history.originalStatus}</td>
                                                                                        <td>${history.newStatus}</td>
                                                                                        <td>${history.created_at}</td>
                                                                                        <td>${history.archive_type}</td>
                                                                                    </tr>
                                                                                `).join('')}
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                `;
                        }

                        var html = `
                                            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                                <h4 class="mb-0">Lead Details</h4>
                                                <span class="badge bg-light text-dark px-3 py-2" style="font-size: 14px;">
                                                    Status: ${response.profileData.status}
                                                </span>
                                            </div>
                                            <div class="row new-pro-res">
                                             <div class="col-sm-4">
                                                <!-- Profile -->
                                                <div class="row pro-card">
                                                   <div class="col-md-12">
                                                      <div class="card text-center" id="card-height">
                                                         <div class="card-body">                     
                                                            <img src="assets/images/users/avatar-man.png" class="rounded-circle avatar-lg img-thumbnail" alt="profile-image">

                                                            <h4 class="mt-1 mb-2">
                                                                ${response.profileData.name} (${response.profileData.contactID})
                                                                <div class="col-md-12">
                                                                    <div class="text-center mt-1">
                                                                        <p class="text-muted font-14"><span class="ms-2"><strong><i class="uil uil-envelope me-1"></i></strong>${response.profileData.email ? response.profileData.email : 'N/A'}</span></p>
                                                                    </div>
                                                                </div>
                                                            </h4>

                                                           <div class="row mt-1">
                                                               <div class="col-md-6">
                                                                  <div class="text-start">
                                                                     <p class="text-muted mb-2 font-13"><span class="ms-2"><strong>Mobile: </strong> ${response.profileData.mobile ? response.profileData.mobile : 'N/A'}</span></p>
                                                                     <p class="text-muted mb-2 font-13"><span class="ms-2"><strong>DOB: </strong> ${response.profileData.dob ? response.profileData.dob : 'N/A'}</span></p>
                                                                  </div>
                                                               </div>
                                                               <div class="col-md-6">
                                                                  <div class="text-end">

                                                                         <p class="text-muted mb-2 font-13"><span class="ms-2"><strong>Lead ID: </strong> ${response.profileData.leadID ? response.profileData.leadID : 'N/A'}</span></p>
                                                                         <p class="text-muted mb-2 font-13"><span class="ms-2"><strong>Pan:</strong> ${response.profileData.pancard ? response.profileData.pancard : 'N/A'}</span></p>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>
                                                         <!-- end card-body -->
                                                      </div>
                                                      <!-- end card -->
                                                   </div>
                                                   <!-- end card-body/ profile-user-box-->
                                                </div>
                                                <!--end profile/ card -->
                                             </div>
                                             <!-- end col-->
                                             <div class="col-sm-8">
                                                <!-- Profile -->
                                                <div class="card shadow m-0 for_hei_new pro-card" id="card-height">
                                                <div class="card-body">
                                                   <!-- Status Change History -->
                                                ${response.statusHistory && response.statusHistory.length > 0 ? `
                                                <h5 class="mt-4 mb-3">Status Change History</h5>
                                                <div class="table-responsive">
                                                    <table class="table table-hover table-bordered align-middle">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th>Date</th>
                                                                <th>From</th>
                                                                <th>To</th>
                                                                <th>Changed By</th>
                                                                <th>Description</th>
                                                                <th>Tables Included</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            ${response.statusHistory.map(history => `
                                                                <tr>
                                                                    <td><i class="bi bi-calendar-event"></i> ${history.created_at}</td>
                                                                    <td><span class="badge bg-secondary px-2">${history.from_status}</span></td>
                                                                    <td><span class="badge bg-success px-2">${history.to_status}</span></td>
                                                                    <td><i class="bi bi-person-circle"></i> ${history.changed_by}</td>
                                                                    <td>${history.description}</td>
                                                                    <td><span class="badge bg-info text-dark">${history.tablesIncluded}</span></td>
                                                                </tr>
                                                            `).join('')}
                                                        </tbody>
                                                    </table>

                                                </div>
                                                </div>
                                                ` : '<p class="text-muted mt-3">No status change history found.</p>'}
                                            </div>
                                                </div>
                                             </div>
                                          </div>
                                        `;


                        // Insert the HTML into the container
                        $('#profileData').html(html);
                        $('#leadProfileContainer').show();
                    },
                    error: function (xhr) {
                        $('#searchButton').html('<i class="uil uil-search"></i> Search');
                        $('#statusChangeContainer').hide();
                        if (xhr.status === 404) {
                            alert('Lead not found');
                        } else {
                            alert('An error occurred while fetching lead data');
                        }
                    }
                });
            });

            let newStatus = '';
            let leadID = '';

            $(document).off('click', '#updateStatusBtn').on('click', '#updateStatusBtn', function () {
                newStatus = $('#statusDropdown').val();
                leadID = $('#leadID').val().trim();

                if (!newStatus) {
                    alert('Please select a status');
                    return;
                }

                if (newStatus === 'Rejected') {
                    $('#rejection-modal').modal('show'); // Show rejection modal
                } else {
                    $('#info-alert-modal').modal('show'); // Normal confirmation modal
                }
            });

            // Submit button for Rejection Modal
            $(document).off('click', '#submitRejectSanctionBtn').on('click', '#submitRejectSanctionBtn', function () {
                let rejectionReasons = $('#rejectionReason').val(); // Array
                let branch = $('#branch').val();
                let officialEmail = $('#officialEmail').val();
                let cibilScore = $('#cibilScore').val();
                let remarks = $('#remarks').val();

                if (!branch || !officialEmail || !cibilScore || rejectionReasons.length === 0 || !remarks) {
                    console.log(branch, officialEmail, cibilScore, rejectionReasons, remarks);
                    alert('Please fill all fields before submitting.');
                    return;
                }

                $('#rejection-modal').modal('hide');
                $('#updateStatusBtn').html('<i class="uil uil-spinner uil-spin"></i> Updating...');

                $.ajax({
                    url: "{{ route('lead.update-status') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        leadID: leadID,
                        status: newStatus,
                        branch: branch,
                        officialEmail: officialEmail,
                        cibilScore: cibilScore,
                        rejectionReason: rejectionReasons,
                        remarks: remarks
                    },
                    success: function (response) {
                        $('#updateStatusBtn').html('<i class="uil uil-sync"></i> Update');
                        if (response.status) {
                            $.NotificationApp.send("Well Done!", response.message, "bottom-right",
                                "rgba(0,0,0,0.2)", "success");
                            $('#leadSearchForm').submit();
                        } else {
                            $.NotificationApp.send("Oh Snap!", response.message, "bottom-right",
                                "rgba(0,0,0,0.2)", "error");
                        }
                    },
                    error: function () {
                        $('#updateStatusBtn').html('<i class="uil uil-sync"></i> Update');
                        alert('Error updating status');
                    }
                });
            });

            // Normal confirmation for non-rejected statuses
            $(document).off('click', '.confirm-yes').on('click', '.confirm-yes', function () {
                $('#info-alert-modal').modal('hide');
                $('#updateStatusBtn').html('<i class="uil uil-spinner uil-spin"></i> Updating...');

                $.ajax({
                    url: "{{ route('lead.update-status') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        leadID: leadID,
                        status: newStatus
                    },
                    success: function (response) {
                        $('#updateStatusBtn').html('<i class="uil uil-sync"></i> Update');
                        if (response.status) {
                            $.NotificationApp.send("Well Done!", response.message, "bottom-right",
                                "rgba(0,0,0,0.2)", "success");
                            $('#leadSearchForm').submit();
                        } else {
                            $.NotificationApp.send("Oh Snap!", response.message, "bottom-right",
                                "rgba(0,0,0,0.2)", "error");
                        }
                    },
                    error: function () {
                        $('#updateStatusBtn').html('<i class="uil uil-sync"></i> Update');
                        alert('Error updating status');
                    }
                });
            });
        });
    </script>
@endsection