@extends("front.layout")
@section("content")

<div class="px-4 px-lg-5 py-4">
    <div class="container-fluid">
        <div class="row g-4">
        <div class="col-lg-3">
            </div>
            <div class="col-lg-12 right-wrap">
                <div class="row mb-4 align-items-center d-none">
                    <div class="col-lg-6 right">
                        Filter
                    </div>
                    <div class="col-lg-3">
                        <select class="form-select" aria-label="Default select example">
                            <option selected>Property Type</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <select class="form-select" aria-label="Default select example">
                            <option selected>Sort By Price</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="display-6">
                            Properties
                        </h6>
                    </div>
                    <div class="col-6 right">
                        <a href="{{route('add-property')}}">+ Add a Property</a>
                    </div>
                </div><!-- End -->

                <div class="row g-4 prop-detail-wrap">
                    @foreach ($allproperties as $property)
                    <div class="col-lg-6 col-md-6">
                        {{-- <div class="d-flex align-items-start position-relative">
                            <img class="img-fluid rounded-top flex-shrink-0" src="{{asset('assets/img/about.jpg')}}" alt="">
                        </div> --}}
                        <div class="shadow card dash-card py-3 px-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h5 class="display-5 primary-text">
                                        <span>
                                            Current Estimated Home Value
                                        </span>
                                        <div id="current_est_homevalue_{{$property->id}}" class="price-h">
                                            @if(!empty($property->current_estimated_home_value))
                                            ${{number_format($property->current_estimated_home_value)}}
                                            @else
                                            --
                                            @endif
                                        </div>
                                    </h5>
                                </div>
                                <div class="col-lg-6">
                                    <h5 class="display-5 primary-text">
                                        <span>
                                            Add Estimated Home Equity
                                        </span>
                                        <div id="est_homeequity_{{$property->id}}" class="price-h">
                                            @if(!empty($property->estimated_home_equity))
                                            ${{number_format($property->estimated_home_equity)}}
                                            @else
                                            --
                                            @endif
                                        </div>
                                    </h5>
                                </div>

                            </div>
                            <p>
                                {{$property->address}}, {{$property->city}}, {{$property->zipcode}}
                                <br />
                                <a href="{{route('edit-property', ['id' => $property->id])}}"><i class="fa fa-pencil"></i> Edit Property</a>
                            </p>
                            <div class="edit-property-boxes">
                                <ul class="tags">
                                    <li style="margin-left:4px;">
                                        <a href="{{route('home-detail', ['id' => $property->id])}}">Home Details</a>
                                    </li>
                                    <!-- <li>
                                        <i class="fa fa-spinner fa-spin" id="prop_spinner_{{$property->id}}" style="display: none;"></i>
                                        <a href="#" data-id="{{$property->id}}" class="pull_data_atomapi">Get a Rate Quote</a>

                                    </li> -->
                                    <li>
                                        <a href="{{route('opportunity-alerts', ['property_id' => $property->id])}}">Refinance Offers</a>
                                    </li>
                                    <li>
                                        <a href="{{route('loan-info', ['property_id' => $property->id])}}">Loan Info</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endforeach




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

<!-- Modal -->
<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>

@endsection
@push("scripts")
<script>
$(document).ready(function(){

    $(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: 'Error!',
                                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