@extends('owner.layouts.main')
@section('title')
<title>Homevana</title>
@endsection
@section('content')
                <main class="main">
                    <section class="section lyt-section overflow-auto">
                        <div class="inner-app-main">
                            <h2 class="bs-heading typ-27 typ-blue typ-800 mt-18 mb-15">
                                Hello <span>{{Auth::user()->first_name}} {{Auth::user()->last_name}}</span>
                            </h2>

                            <div class="bs-grid-box mb-42">
                                <div class="bs-box">
                                    <div>
                                        <div class="num-box">
                                            <h2 class="number theam-color">
                                                {{$property_visits}}
                                            </h2>
                                            <span class="icon icon-visitors"></span>
                                        </div>
                                        <p class="bs-para mb-14 theam-color">
                                            Total Visitors
                                        </p>
                                        <!-- <span class="icon icon-circle-arrow"></span> -->
                                    </div>
</div>
                                <a href="{{route('properties-data.index',['property_for'=>'RENT'])}}" class="bs-box">
                                    <div>
                                        <div class="num-box">
                                            <h2 class="number green-color">
                                                {{$current_rent_properties}}
                                            </h2>
                                            <span class="icon icon-rent"></span>
                                        </div>
                                        <p class="bs-para mb-14 green-color">
                                        Property For Rent
                                        </p>
                                        <span class="icon icon-circle-arrow"></span>
                                    </div>
                                </a>
                                <a href="{{route('properties-data.index',['property_for'=>'BUY'])}}" class="bs-box">
                                    <div>
                                        <div class="num-box">
                                            <h2 class="number typ-grey2">
                                                {{$current_sale_properties}}
                                            </h2>
                                            <span class="icon icon-sale"></span>
                                        </div>
                                        <p class="bs-para mb-14 typ-grey2">
                                            Property For Sale
                                        </p>
                                        <span class="icon icon-circle-arrow"></span>
                                    </div>
                                </a>
                            </div>

                            <h2 class="bs-heading typ-27 typ-blue typ-800 mt-18 mb-15">
                                Services
                            </h2>
                            <div class="bs-grid-box typ-four-grid gap-32 mb-42">
                                <a href="{{route('properties.create')}}" class="bs-box typ-normal-icon typ-border">
                                    <div>
                                        <p class="bs-para typ-20 typ-700 typ-grey2 mb-18">
                                            Add existing <br />
                                            property
                                        </p>
                                        <span class="icon icon-circle-arrow"></span>

                                        <div class="corner-img">
                                            <img src="assets/images/owner-admin/svg-icon/property-icon.svg"
                                                class="img-fluid" alt="icon" />
                                        </div>
                                    </div>
                                </a>
                                <a href="{{route('owner.endToEndSubscription')}}" class="bs-box typ-normal-icon typ-border">
                                    <div>
                                        <p class="bs-para typ-20 typ-700 typ-grey2 mb-18">
                                            Subscription <br />
                                            plan
                                        </p>
                                        <span class="icon icon-circle-arrow"></span>

                                        <div class="corner-img">
                                            <img src="assets/images/owner-admin/svg-icon/subscription-icon.svg"
                                                class="img-fluid" alt="icon" />
                                        </div>
                                    </div>
                                </a>
                                <a href="{{route('owner.ownerPaperWorkSubscription')}}" class="bs-box typ-normal-icon typ-border">
                                    <div>
                                        <p class="bs-para typ-20 typ-700 typ-grey2 mb-18">
                                            Paperwork made <br />
                                            easy
                                        </p>
                                        <span class="icon icon-circle-arrow"></span>

                                        <div class="corner-img">
                                            <img src="assets/images/owner-admin/svg-icon/paperwork-icon.svg"
                                                class="img-fluid" alt="icon" />
                                        </div>
                                    </div>
                                </a>
                                <a href="{{route('owner.customizedProperty.add')}}" class="bs-box typ-normal-icon typ-border">
                                    <div>
                                        <p class="bs-para typ-20 typ-700 typ-grey2 mb-18">
                                            Customized property <br />
                                            management
                                        </p>
                                        <span class="icon icon-circle-arrow"></span>

                                        <div class="corner-img">
                                            <img src="assets/images/owner-admin/svg-icon/custmized-icon.svg"
                                                class="img-fluid" alt="icon" />
                                        </div>
                                    </div>
                                </a>
                            </div>


                            <div class="table-box bs-grid-box set-table-grid">
                                <div class="leftBox-table">
                                    <div class="bs-maintenance-issue-table">
                                        <div class="table-head-strip mb-24">
                                            <p class="bs-para">
                                                Maintenance Issue
                                            </p>
                                            <a href="{{route('owner.ownerMaintananceList')}}" class="bs-button">View all</a>
                                        
                                        </div>
                                        <div class="bs-table">
                                            <table id="maintenance-issue"
                                                class="table table-striped display nowrap cell-border maintenance-issue-table"
                                                style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Issues</th>
                                                        <th>Date</th>
                                                        <th>Time</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($maintanances as $maintanance )
                                                    <tr>
                                                        <td>
                                                            <p class="bs-para typ-15 typ-blue2">{{$maintanance->issue_title}}</p>
                                                            <p class="bs-para typ-12 typ-grey8">{{ Str::limit($maintanance->description, 15, '...') }}</p>
                                                        </td>
                                                        <td>
                                                            <p class="bs-para typ-14 typ-blue1">{{$maintanance->created_at->format('d F, Y')}}</p>
                                                        </td>
                                                        <td>
                                                            <p class="bs-para typ-14 typ-blue1">{{$maintanance->created_at->format('h:i A')}}</p>
                                                        </td>
                                                        <td>
                                                           @php
                                                            $status_class='typ-waiting';
                                                            if($maintanance->status=="Complete"){
                                                              $status_class='typ-complete';
                                                            }else if($maintanance->status=="In Progress"){
                                                              $status_class='typ-progress';
                                                            }
                                                        
                                                        @endphp
                                                        <div class="bs-progress-btn {{$status_class}}">
                                                          {{$maintanance->status}}
                                                        </div>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                    
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="rightBox-table">
                                    <div class="bs-maintenance-issue-table">
                                        <div class="table-head-strip mb-24">
                                            <p class="bs-para">
                                              Payments List
                                            </p>
                                            <a href="{{route('owner.paymentsPropertyList')}}" class="bs-button">View all</a>
                                        </div>
                                        <div class="bs-table">
                                            <table id="payment-dashboard"
                                                class="table table-striped display nowrap cell-border maintenance-issue-table maintenance-issue-table"
                                                style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Amount</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($payments as $payment)
                                                    <tr>

                                                        <td>
                                                            <p class="bs-para typ-14 typ-blue1">{{$payment->date->format('d F,Y')}}</p>
                                                        </td>
                                                        <td>
                                                            <p class="bs-para typ-14 typ-theme typ-600">₹ {{$payment->amount}}.00*</p>
                                                        </td>
                                                        <td>
                                                        @php
                                                            $payment_status_class='typ-waiting';
                                                            if($payment->status=="Paid"){
                                                              $payment_status_class='typ-complete';
                                                            }else if($payment->status=="Under Background"){
                                                              $payment_status_class='typ-progress';
                                                            }
                                                        
                                                        @endphp
                                                            <div class="bs-progress-btn {{$payment_status_class}}">
                                                                {{$payment->status}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @endforeach

                                                    

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


                        </div>
                    </section>
                   
                </main>
            </div>
        </div>
    </div>

    <!-- popup Start  -->

    <div class="bs-model">
        <div class="modal fade" id="exampleModalToggle" aria-hidden="true" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered justify-content-center">
                <div class="max-451 w-100">
                    <!-- <div class="model-logo text-center mb-42">
                        <img src="assets/images/logo.svg" alt="logo" class="img-fluid" />
                    </div> -->
                    <div class="modal-content">
                        <div class="modal-body text-center">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span class="icon icon-close"></span>
                            </button>

                            <h2 class="bs-heading typ-24 typ-black typ-500 mb-18">
                                Subscribe!
                            </h2>
                            <p class="bs-para typ-14 typ-grey2 max-244 mx-auto mb-32">
                                To subscribe our services please hit the
                                subscribe button
                            </p>
                            <div class="">
                                <button class="bs-button typ-fill-blue typ-18 w-100">
                                    Subscribe
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bs-toast">
        <div class="toast-container position-fixed top-0 end-0 p-3">
            <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header justify-content-end border-0 d-none">
                    <!-- <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> -->
                </div>
                <div class="toast-body">
                    <div class="box-wrapper">
                        <div class="img-box">
                            <img src="assets/images/green-tick.svg" draggable="false" class="img-fluid" alt="">
                        </div>
                        <div class="content-box">
                            <h2 class="bs-heading typ-18 typ-500 typ-white">Successful</h2>
                            <p class="bs-para typ-12 typ-white">Congratulation you have Successfully updated the
                                property
                                detail</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close">
                            <span class="icon icon-close"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bs-model">
        <div class="modal fade" id="makeoffer" aria-hidden="true" tabindex="-2">
            <div class="modal-dialog modal-dialog-centered justify-content-center">
                <div class="max-451 w-100">
                    <!-- <div class="model-logo text-center mb-42">
                        <img src="assets/images/logo.svg" alt="logo" class="img-fluid" />
                    </div> -->
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span class="icon icon-close"></span>
                            </button>

                            <h2 class="bs-heading typ-24 typ-black typ-600 mb-18">
                                Make An Offer
                            </h2>
                            <p class="bs-para typ-14 typ-grey2 mb-6">
                                Type Amount
                            </p>
                            <form class="bs-form mb-18">
                                <input type="text" class="input-field">
                            </form>
                            <div class="">
                                <button class="bs-button typ-fill-blue typ-18">
                                Make An Offer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="bs-model">
        <div class="modal fade" id="rentalapplication" aria-hidden="true" tabindex="-2">
            <div class="modal-dialog modal-dialog-centered justify-content-center">
                <div class="max-451 w-100">
                    <!-- <div class="model-logo text-center mb-42">
                        <img src="assets/images/logo.svg" alt="logo" class="img-fluid" />
                    </div> -->
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span class="icon icon-close"></span>
                            </button>

                            <h2 class="bs-heading typ-24 typ-black typ-600 mb-24">
                                Rental Application
                            </h2>

                            <form class="bs-form mb-18">
                                <div class="input-box mb-18">
                                    <label class="input-label typ-500 mb-10" for="propertydetail">Property
                                        Detail</label>
                                    <input type="text" class="input-field" id="propertydetail">
                                </div>
                                <div class="input-box mb-18">
                                    <label class="input-label typ-500 mb-10" for="leaseDate">Lease Date</label>
                                    <div class="bs-date">
                                    <input type="date" class="input-field" id="leaseDate">
                                    </div>
                                </div>
                                <div class="input-box mb-18">
                                    <label class="input-label typ-500 mb-10" for="message-homevana">Message Homevana</label>
                                   <textarea  id="message-homevana" class="input-textarea" rows="5"></textarea>
                                </div>
                            </form>
                            <div class="">
                                <button class="bs-button typ-fill-blue">
                                    Submit Application
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- popup End  -->

 @endsection