@extends("front.instarefi-layout")

@section("content")

<div class="px-4 px-lg-5 py-4 footer-position">
    <div class="container-fluid">
        <div class="row g-4">
            <div class="col-lg-12 right-wrap">

                <div class="h-100 alert-property-boxes">
                    <div class="accordion" id="accordionExample">
                        @if(!empty($propertiesWithAlerts))
                        <h4 class="pt-5">{{$propertiesWithAlerts[0]['property_name']}}</h3>
                            <div class="accordion-item">
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="nav-payment-tab" data-bs-toggle="tab" href="#nav-payment" role="tab" aria-controls="nav-payment" aria-selected="true">{{$default_title}}
                                                    @if($alertcount > 0)
                                                    <span class="badge bg-danger rounded-circle">{{$alertcount}}</span>
                                                    @endif
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content mt-2" id="nav-tabContent">
                                            <div class="tab-pane fade show active" id="nav-payment" role="tabpanel" aria-labelledby="nav-payment-tab">
                                                <div class="table-responsive" id="tbl-holder">
                                                    <table class="table table-bordered text-center align-middle" style="">
                                                        <thead class="table-primary">
                                                            <tr>
                                                                <th>Proposed Loan Terms</th>
                                                                <th>Proposed Loan Details</th>
                                                                <th>Cost/Credit</th>
                                                                <th></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="fw-light">
                                                            @if($alertcount > 0)
                                                            @foreach ($propertiesWithAlerts as $property)

                                                            @if($property['alerts']['alert_type'] == 'lead_alerts')
                                                            <tr>
                                                                <td>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Loan Rate</span>
                                                                        <span class="text-primary">{{number_format($property['alerts']['other_info']->mdata->proposed_interest_rate,3)}}%</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Loan Term</span>
                                                                        <span class="text-primary">{{monthToYear($property['alerts']['other_info']->mdata->proposed_term)}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Loan Type</span>
                                                                        <span class="text-primary">{{$property['alerts']['other_info']->api_response->lender_price->mortgageType}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Monthy PMI</span>
                                                                        <span class="text-primary">${{$property['alerts']['other_info']->api_response->lender_price->mi}}</span>
                                                                    </div>
                                                                </td>
                                                                <td class="align-top">
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Monthly Payment (P&I)</span>
                                                                        <span class="text-primary">${{number_format(($property['alerts']['other_info']->future_monthly_payment ??
                                                                            0), 2)}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Interest To Be Paid</span>
                                                                        <span class="text-primary">${{number_format(($property['alerts']['other_info']->interest_to_be_paid_for_new_loan ??
                                                                            0), 2)}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>APR</span>
                                                                        <span class="text-success">${{number_format(($property['alerts']['other_info']->annual_purchase_rate ??
                                                                            0), 3)}}</span>
                                                                    </div>
                                                                </td>

                                                                <td>
                                                                    <div>${{number_format((round($property['alerts']['other_info']->mdata->cost_or_credit) ??
                                                                        0), 2)}}</div>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-outline-primary btn-sm view-more-info" data-id="{{$property['alerts']['id']}}" data-bs-toggle="modal" data-bs-target="#leadsViewMoreModal">Get More Info</button>
                                                                    <a href="https://app.instamortgage.com/app/signup/p/instamortgage" class="btn btn-outline-primary btn-sm view-more-info">Apply Now</a>

                                                                </td>
                                                            </tr>
                                                            @endif

                                                            @endforeach
                                                            @else
                                                            <tr>
                                                                <td colspan="5"><span class="text-secondary">There are no opportunities found at this time.</span></td>
                                                            </tr>
                                                            @endif

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            @else
                            <h5 class="text-secondary text-center mt-5">
                                <p>If you want to check more details or more opportunity options, please sign up today!</p>
                                <p>For sign up click <a class="text-info" href="{{ route('register') }}">here</a></p>
                            </h5>
                            @endif
                    </div>

                    {{-- end new design --}}


                </div>


            </div>
        </div>
    </div>
</div><!-- About End -->
<!-- Modal -->
<div class="modal opportunities fade" id="leadsViewMoreModal" tabindex="-1" aria-labelledby="leadsViewMoreModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p>If you want to check more details or more opportunity options, please fill up the form!</p>
                <!-- Close Icon -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-left" id="leadsViewMoreModalContent">
                <!-- Modal Content -->
                <div class="response_message d-none">Success!</div>
                <form id="leadUserDetailsForm" novalidate>
                    @csrf
                    <input type="hidden" value="" id="alert_id" name="alert_id" />
                    <div class="mb-3">
                        <label for="userName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="userName" name="userName" required>
                        <div class="invalid-feedback">Please enter your name.</div>
                    </div>
                    <div class="mb-3">
                        <label for="userEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="userEmail" name="userEmail" required>
                        <div class="invalid-feedback">Please enter a valid email address.</div>
                    </div>
                    <div class="mb-3">
                        <label for="contactDetails" class="form-label">Mobile</label>
                        <input type="tel" class="form-control phone_us" id="contactDetails" name="contactDetails" required>
                        <div class="invalid-feedback">Please provide a valid US mobile number. Format: (123) 456-7890.</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary-small" id="submitBtn">Submit</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
            <!-- Full-screen Spinner -->
            <div id="modalSpinnerOverlay" class="d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
        $('.phone_us').mask('(000) 000-0000');
        $('#leadsViewMoreModal').on('show.bs.modal', function(event) {

            // Button that triggered the modal
            var button = $(event.relatedTarget);
            // Extract the data-id attribute
            var id = button.data('id');
            // Use the ID in the modal, e.g., setting a hidden input field or displaying the value
            var modal = $(this);
            modal.find('#alert_id').val(id);

        });

        $('#leadsViewMoreModal').on('hidden.bs.modal', function() {
            // Reset form inputs
            $('#leadUserDetailsForm')[0].reset();
            // Remove validation messages or was-validated classes
            $('#leadUserDetailsForm').removeClass('was-validated');

            // Ensure modal-backdrop is removed
            if ($('.modal-backdrop').length > 0) {
                $('.modal-backdrop').remove();
            }

            // Remove 'modal-open' class from body if it’s left
            $('body').removeClass('modal-open');

            // Optionally, clear response messages or other content inside the modal
            $('.response_message').addClass('d-none').removeClass('text-success text-danger').text('');
        });



        $('#submitBtn').on('click', function() {
            var form = $('#leadUserDetailsForm')[0];


            // Check if the form is valid
            if (form.checkValidity() === false) {
                event.preventDefault(); // Prevent form submission
                event.stopPropagation(); // Stop further event propagation
                $(form).addClass('was-validated'); // Add validation class to show feedback

            } else {
                // If valid, serialize form data
                var formData = $(form).serialize();

                // Show the full-screen spinner overlay and disable buttons
                $('#modalSpinnerOverlay').removeClass('d-none'); // Show the spinner overlay
                $('#submitBtn').attr('disabled', true); // Disable the submit button
                $('#closeBtn').attr('disabled', true); // Disable the close button

                // AJAX request to save the data
                $.ajax({
                    url: '{{ route("save-leads") }}', // Your route to handle saving
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        // Hide spinner overlay and re-enable buttons
                        $('#modalSpinnerOverlay').addClass('d-none'); // Hide the spinner overlay
                        
                        if (response.success) {
                            // Handle success
                            $(".response_message").removeClass("d-none").addClass("text-success");
                            $(".response_message").text(response.message);


                        } else {
                            $(".response_message").removeClass("d-none").addClass("text-danger");
                            $(".response_message").text(response.message);
                        }
                        setTimeout(function() {
                            window.location.reload();
                        }, 3000); 
                    },
                    error: function(xhr, status, error) {
                        // Hide spinner overlay and re-enable buttons
                        $('#modalSpinnerOverlay').addClass('d-none'); // Hide the spinner overlay
                        $('#submitBtn').attr('disabled', false); // Re-enable submit button
                        $('#closeBtn').attr('disabled', false); // Re-enable close button

                        // Handle error
                        $(".response_message").removeClass("d-none").addClass("text-danger");
                        $(".response_message").text("There might be some issue!");



                    }
                });
            }
        });
    });
</script>

@endpush