@extends("front.layout")

@section("content")

<div class="px-4 px-lg-3 py-4">
    <div class="container-fluid">
        <div class="lightgrey-bg rounded-5 welcome-box">
            <div class="row align-items-center py-2">
                <div class="col-lg-8 col-md-8 dashboard-top d-flex align-items-center">
                    <figcaption class="pl-3">
                        <h6 class="display-6">
                            Welcome  {{auth()->user()->name}}&nbsp;👋
                        </h6>
                        <!-- <span>Member Since:</span> {{\Carbon\Carbon::parse(auth()->user()->created_at)->format('F Y')}} -->
                    </figcaption>
                </div>
                <div class="col-lg-4 col-md-4 right contact-button">
                    <a href="{{$get_pre_approved_url}}" target="_blank" class="btn btn-primary dboard-btn-f">Get Pre-Approved for my Next Home</a>
                </div>
            </div>
        </div>
        <div class="row cards-dashboard">
           <div class="col-lg-12">
                @include("front.myaccount.submenu")
            </div>
            <div class="col-lg-12 right-wrap">
                <!-- End -->

                <div class="row my-5 d-none">
                    <div class="col-lg-6 col-md-6">
                        <div class="shadow rounded-5 py-3 px-3">
                            <h5 class="display-5">
                                Refinance Opportunity
                            </h5>
                            <div class="d-flex justify-content-between py-3">
                                <div class="p-2 center">
                                    <h6 class="display-6 percent-rate" id="disp_current_rate">
                                        {{$refinance_opportunity["current_rate"]}}
                                    </h6>
                                    Current Rate
                                </div>
                                <div class="p-2 left">
                                    <div id="refi_alerts">
                                        @if($alert_types)
                                        <ul>
                                            @foreach ($alert_types as $altype)
                                            <li><a href="#" data-property-id="{{$altype->property_id}}" data-alert-type="{{$altype->alert_type}}" data-alert-type-desc="{{$altype->alert_type_desc}}" class="openmodal">{{$altype->alert_type_desc}} ({{$altype->total}})</a></li>
                                            @endforeach

                                        </ul>
                                        @endif
                                    </div>

                                </div>
                                {{-- <div class="p-2 center">
                                    <i class="fa-regular fa-arrow-right"></i>
                                </div>
                                <div class="p-2 center">
                                    <h6 class="display-6 percent-rate">
                                        <i class="fa-regular fa-arrow-down"></i> 5%
                                    </h6>
                                    Now Rate is dropped
                                </div> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="shadow rounded-5 py-3 px-3">
                            <h5 class="display-5">
                                Home Equity
                            </h5>
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="p-2 center">
                                    <img src="{{asset('assets/img/GraphUpArrow.png')}}" alt="">
                                </div>
                                <div class="p-2 right">
                                    <h5 class="display-6 primary-text" id="disp_home_equity_value">
                                        {{$home_equity['home_equity_value']}}
                                    </h5>
                                    {{-- <h6 class="display-6 primary-text">
                                        <i class="fa-regular fa-arrow-up"></i> +21.65(0.79%)
                                    </h6>
                                    30-day change --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- End -->


                <div class="mb-3">
                <div class="row mb-3 mt-3">
                    <div class="col-6">
                        <h6 class="display-6">
                            Property Details
                        </h6>
                    </div>
                    <div class="col-6 right">
                        <a href="{{route('add-property')}}">+ Add a Property</a>
                    </div>
                </div><!-- End -->
                        <div class="prop-list-slider">
                            @foreach ($myproperties as $myproperty)
                                <div class="slide loan-detail" data-id="{{$myproperty->id}}">
                                    {{-- <div class="d-flex align-items-start">
                                        <img class="img-fluid rounded-top flex-shrink-0" src="{{asset('assets/img/about.jpg')}}" alt="">
                                    </div> --}}
                                    <div class="card dash-card py-3 px-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="d-flex c-icon-box diagram-coin">
                                                    {{-- <img src="assets/images/banners/dollar-1.png" /> --}}
                                                    <i id="theme-icon" class="fa fa-usd"></i>
                                                    <span>Current Estimated Home Value</span>
                                                </div>
                                                    <div id="current_est_homevalue_{{$myproperty->id}}"  class="price-h price-f home-value">
                                                    @if(!empty($myproperty->current_estimated_home_value))
                                                    ${{number_format($myproperty->current_estimated_home_value)}}
                                                    @else
                                                    --
                                                    @endif
                                                    </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="d-flex c-icon-box diagram-coin">
                                                    {{-- <img src="assets/images/banners/diagram.png" /> --}}
                                                    <i id="theme-icon" class="fa fa-line-chart"></i>
                                                        <span>
                                                            Current Rate
                                                        </span>
                                                </div>
                                                <div class="price-h price-f">
                                                    @if(!empty($myproperty->current_rate))
                                                    {{$myproperty->current_rate}}
                                                    @else
                                                    --
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="d-flex c-icon-box diagram-coin">
                                                    {{-- <img src="assets/images/banners/home.png" style="margin-top:4px;" /> --}}
                                                    <i id="theme-icon" class="fa fa-home"></i>
                                                        <span class="home-equity-text">
                                                            Home Equity
                                                        </span>
                                                </div>
                                                    <div id="est_homeequity_{{$myproperty->id}}" class="price-h price-f home-price">
                                                    @if(!empty($myproperty->estimated_home_equity))
                                                    ${{number_format($myproperty->estimated_home_equity)}}
                                                    @else
                                                    --
                                                    @endif
                                                    </div>
                                            </div>
                                        </div>
                                        <p>
                                            {{$myproperty->address}}, {{$myproperty->city}}, {{$myproperty->zipcode}}<br />
                                            <small>
                                                {{$myproperty->summary}}
                                            </small>
                                        </p>
                                        <div class="d-grid edit-property-boxes">
                                            {{-- <a href="{{route('home-detail', ["id" => $myproperty->id])}}" class="btn btn-primary">More Details</a> --}}
                                            {{-- <a href="{{route('all-property')}}" class="btn btn-primary">More Details</a> --}}
                                            <a href="{{route('edit-property', ['id' => $myproperty->id])}}"><i class="fa fa-pencil"></i> Edit Property</a>
                                            <div>
                                            <ul class="tags">
                                                <li style="margin-left:4px;">
                                                    <a href="{{route('home-detail', ['id' => $myproperty->id])}}">Home Details</a>
                                                </li>
                                                <!-- <li>
                                                    <i class="fa fa-spinner fa-spin" id="prop_spinner_{{$myproperty->id}}" style="display: none;"></i>
                                                    <a href="#" data-id="{{$myproperty->id}}" class="pull_data_atomapi">Get a Rate Quote</a>

                                                </li> -->
                                                <li>
                                                    <a class= "@if(request('f') == 'rmi') active @endif" href="{{route('opportunity-alerts', ['f'=> 'rmi','property_id' => $myproperty->id])}}">Refinance Offers</a>
                                                </li>
                                                <li>
                                                    <a href="{{route('loan-info', ['property_id' => $myproperty->id])}}">Loan Info</a>
                                                </li>
                                            </ul>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                <!-- End -->

                <!-- <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="display-6">
                            Knowledge Base
                        </h6>
                    </div>
                    <div class="col-6 right">
                        <a href="#">View All</a>
                    </div>
                </div> -->
                <div class="lightgrey-bg rounded-5 py-3 px-3">
                    <div class="row">
                        <div class="col-lg-8 col-md-8">
                            <h6 class="display-6">Be A Hero</h6>
                            <p>Help your friends save some mortgage money!</p>  
                        </div>
                        <div class="col-lg-4 col-md-4 d-flex align-items-center justify-content-end  contact-button">
                            <a href="{{route('refer-friend')}}" target="_blank" class="btn btn-primary dboard-btn-f">Refer a Friend</a>
                        </div>
                    </div>
                </div>

                <div class="row d-none">
                    <div class="col-lg-12 col-md-12">
                        <div class="knowledge-slider lightgrey-bg rounded-5 py-3 px-3">
                            <div class="side">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <figure>
                                            <img src="{{asset('assets/img/about.jpg')}}" alt="">
                                        </figure>
                                    </div>
                                    <div class="col-lg-8">
                                        <figcaption class="pl-3">
                                            <h5 class="display-5">
                                                2023 CONFORMING LOAN LIMITS FOR TENNESSEE (TN)
                                            </h5>
                                            <p>
                                                new conforming loan limits 2023 TN for 2-unit properties is $929,850 and goes up to $1,139,500
                                            </p>
                                        </figcaption>
                                    </div>
                                </div>
                            </div>
                            <div class="side">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <figure>
                                            <img src="{{asset('assets/img/about.jpg')}}" alt="">
                                        </figure>
                                    </div>
                                    <div class="col-lg-8">
                                        <figcaption class="pl-3">
                                            <h5 class="display-5">
                                                2023 CONFORMING LOAN LIMITS FOR TENNESSEE (TN)
                                            </h5>
                                            <p>
                                                new conforming loan limits 2023 TN for 2-unit properties is $929,850 and goes up to $1,139,500
                                            </p>
                                        </figcaption>
                                    </div>
                                </div>
                            </div>
                            <div class="side">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <figure>
                                            <img src="{{asset('assets/img/about.jpg')}}" alt="">
                                        </figure>
                                    </div>
                                    <div class="col-lg-8">
                                        <figcaption class="pl-3">
                                            <h5 class="display-5">
                                                2023 CONFORMING LOAN LIMITS FOR TENNESSEE (TN)
                                            </h5>
                                            <p>
                                                new conforming loan limits 2023 TN for 2-unit properties is $929,850 and goes up to $1,139,500
                                            </p>
                                        </figcaption>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- End -->


            </div>
        </div>
    </div>
</div><!-- About End -->


<div class="modal fade" id="alertsModal" tabindex="-1" aria-labelledby="alertsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="alertsModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center" id="alert-loader" style="display: none;"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
                <div id="alert-content"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@if(session('processing_alert_after_login_done') == 0)
<!--
/**
* Author: Vidhi Shah
* Added date: 16th Sept 2024
* Description: Pop for user to show a message for checking alert, user can either cancel request or can confirm for continuing
* This pop up will be not be shown if API already ran after login and session has maintained processing_alert_after_login_done != 0
*/
-->     

<div class="modal fade" id="processingAlertsModal" tabindex="-1" aria-labelledby="processingAlertsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="processingAlertsModalLabel">Refinance</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="processingAlertsContent">
        <!-- Modal Content -->
        <p> 
            Do you want to check refinance opportunities?
        </p>
        
      </div>
      <div class="modal-footer">
        <!-- Confirm Button -->
        <button type="button" class="btn btn-primary" id="confirmButton">I want to Check Now</button>
        <!-- Close Button -->
        <button type="button" class="btn btn-danger" id="closeButton" data-bs-dismiss="modal" style="border-radius: 25px;;">I will Check Later</button>
      </div>
    </div>
  </div>
</div>

<!-- Full-Screen Loading Overlay (Initially Hidden) -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner-border text-light" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
</div>
@endif

@endsection
@push("scripts")
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function(){
    $(document).on("click", ".openmodal", function(e){
        e.preventDefault();
        $("#alertsModal").modal("show");

        $("#alert-loader").show();

        let property_id = $(this).data("property-id");
        let alert_type = $(this).data("alert-type");
        let alert_type_desc = $(this).data("alert-type-desc");

        $("#alertsModalLabel").html(alert_type_desc + " Alerts");

        // alert(property_id + "==" + alert_type);

        $.ajax({
            method: "post",
            url: "{{route('get-opportunity-alerts')}}",
            data: {
                _token: "{{csrf_token()}}",
                property_id: property_id,
                alert_type: alert_type
            },
            beforeSend() {
                $("#alert-content").html("");
            },
            success: function(response) {
                $("#alert-loader").hide();
                $("#alert-content").html(response);

            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#alert-loader").hide();
                let jsonValue = jQuery.parseJSON( xhr.responseText );

                let obj = jsonValue.errors;
                let errHtml = ''
                Object.keys(obj).forEach(key => {
                    // console.log(key, obj[key]);
                    errHtml = errHtml + obj[key] + "<br/>";
                });

                Swal.fire({
                    icon: 'error',
                    title: 'Oops!',
                    html: errHtml
                })

                console.log(errHtml);
                // $("#resmessage").html(errHtml).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();

            }
        });
    });


    $(".loan-detail___").click(function(){
        let property_id = $(this).data("id");
        //
        $.ajax({
            method: "post",
            url: "{{route('get-current-rate-and-home-quity')}}",
            data: {
                _token: "{{csrf_token()}}",
                property_id: property_id
            },
            beforeSend() {
                $("#disp_current_rate").html('<i class="fa fa-spinner fa-spin"></i>');
                $("#disp_home_equity_value").html('<i class="fa fa-spinner fa-spin"></i>');
                $("#refi_alerts").html("");
            },
            success: function(response) {

                $("#disp_current_rate").html(response.current_rate);
                $("#disp_home_equity_value").html(response.home_equity_value);

                if(response.alert_types.length > 0) {
                    $("#refi_alerts").html("");
                    let mhtml = '';
                    //mhtml = mhtml + '<table class="table table-striped table-bordered table-sm" width="100%">';
                        response.alert_types.forEach((altype) => {

                            //mhtml = mhtml + '<tr>';
                                mhtml = mhtml + '<li><a href="#" data-property-id="' + altype.property_id + '" data-alert-type="' + altype.alert_type + '" data-alert-type-desc="' + altype.alert_type_desc + '" class="openmodal">' + altype.alert_type_desc + ' (' + altype.total + ')' + '</a></li>';
                                // mhtml = mhtml + '<td>' + altype.alert_type_desc + ' (' + altype.total + ')' + '</td>';
                           // mhtml = mhtml + '</tr>';

                        });

                   // mhtml = mhtml + '</table>';
                    $("#refi_alerts").html(mhtml);

                }



            },
            error: function (xhr, ajaxOptions, thrownError) {

                let jsonValue = jQuery.parseJSON( xhr.responseText );

                let obj = jsonValue.errors;
                let errHtml = ''
                Object.keys(obj).forEach(key => {
                    // console.log(key, obj[key]);
                    errHtml = errHtml + obj[key] + "<br/>";
                });

                console.log(errHtml);
                // $("#resmessage").html(errHtml).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();

            }
        });
    });


    $(document).on("click", ".pull_data_atomapi", function(e){
        e.preventDefault();
        let thisprop = this;
        let property_id = $(thisprop).data("id");

        $("#prop_spinner_" + property_id).show();
        $(thisprop).hide();


        $.ajax({
            method: "post",
            // url: "{{route('fetch-data-atomapi')}}",
            url: "{{route('get-a-rate-quote')}}",
            data: {
                _token: "{{csrf_token()}}",
                property_id: property_id
            },
            beforeSend() {

            },
            success: function(response) {
                $(thisprop).show();
                $("#prop_spinner_" + property_id).hide();
                if(response.success == 1) {
                    if($.trim(response.message) != "") {
                        // alert(response.message);

                        Swal.fire({
                            title: 'Error!',
                            text: response.message,
                            icon: 'error',
                        });
                    } else {
                        if(response.opp_alerts.length > 0) {
                            $("#alertsModal").modal("show");
                            $("#alertsModalLabel").html("New Alerts");
                            $("#alert-content").html("");

                            let mhtml = '';
                            mhtml = mhtml + '<ul class="list-group">';
                                response.opp_alerts.forEach(function(v){
                                    mhtml = mhtml + '<li class="list-group-item d-flex justify-content-between align-items-center">';
                                        mhtml = mhtml + '<a href="' + v.alert_link + '" target="_blank">' + v.alert_type_desc + ' (' + v.total_new_alerts + ')</a>';
                                    mhtml = mhtml + '</li>';
                                });

                            mhtml = mhtml + '</ul>';

                            $("#alert-content").html(mhtml);

                        } else {
                            Swal.fire({
                                title: 'No new rate found. Come back later',
                                text: "No quote found for this property",
                                icon: 'error',
                            });
                        }
                    }

                    $("#current_est_homevalue_" + property_id).html("$" + response.property.current_estimated_home_value);
                    $("#est_homeequity_" + property_id).html("$" + response.property.estimated_home_equity);

                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: response.message,
                        icon: 'error',
                    });
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#prop_spinner_" + property_id).hide();
                // $("#btnloader").hide();
                // $("#btnsave").show();
                let jsonValue = jQuery.parseJSON( xhr.responseText );

                let obj = jsonValue.errors;
                let errHtml = ''
                Object.keys(obj).forEach(key => {
                    // console.log(key, obj[key]);
                    errHtml = errHtml + obj[key] + "\n";
                });

                // alert(errHtml);

                Swal.fire({
                    title: 'Error!',
                    html: errHtml,
                    icon: 'error',
                });

                // $("#resmessage").html(errHtml).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();

            }
        });


    });

    
});
</script>
@endpush