@extends('layouts.app')


@section('title', 'Properties')

{{-- custom css --}}
@push('css')

<!-- <style>
    /* Add this CSS to your stylesheet */
    .property-card {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .property-card:hover {
        transform: scale(1.05);
        /* Zoom in effect */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
        /* Shadow effect */
    }

    .property-card .card-body,
    .property-card .card-footer {
        transition: transform 0.3s ease-in-out;
    }

    .property-card:hover .card-body,
    .property-card:hover .card-footer {
        transform: scale(1.05);
    }
</style> -->
@endpush


@section('content')
<div class="content-body">
    <div class="container-fluid">
       
        <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
        

        {{--My code--}}
        <!-- <div class="row">
           

            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="property-card card">
                    <div class="card-body">
                       
                            <div class="d-flex">
                                <div class="icon-wrapper">
                                    <i class="fa-solid fa-list text-primary fa-2x"></i>
                                </div>
                                <div class="ms-4">
                                    <h4>All Listings</h4>
                                    <p class="mb-0 text-muted">See the number of leads per agent alongside stats on follow up</p>
                                </div>
                            </div>
                   
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('all-listing.index') }}" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="property-card card">
                    <div class="card-body">
                       
                            <div class="d-flex">
                                <div class="icon-wrapper">
                                    <i class="fa-solid fa-clipboard-list text-primary fa-2x"></i>
                                </div>
                                <div class="ms-4">
                                    <h4>Pre Listings</h4>
                                    <p class="mb-0 text-muted">Properties that are in preparation for listing but not yet live</p>
                                </div>
                            </div>
                       
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('pre-listings.index') }}" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="property-card card">
                    <div class="card-body">
                      
                            <div class="d-flex">
                                <div class="icon-wrapper">
                                    <i class="fa-solid fa-file-invoice text-primary fa-2x"></i>
                                    
                                </div>
                                <div class="ms-4">
                                    <h4>Listing</h4>
                                    <p class="mb-0 text-muted">Access all officially listed properties.
                                    </p>
                                </div>
                            </div>
                       
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('listings.index') }}" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="property-card card">
                    <div class="card-body">
                        
                            <div class="d-flex">
                                <div class="icon-wrapper">
                                    <i class="fas fa-hourglass-half text-primary fa-2x"></i>
                                </div>
                                <div class="ms-4">
                                    <h4>Pending Properties</h4>
                                    <p class="mb-0 text-muted">Properties under contract but not yet closed</p>
                                </div>
                            </div>
                        
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('pending.index') }}" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="property-card card">
                    <div class="card-body">
                        
                            <div class="d-flex">
                                <div class="icon-wrapper">
                                    <i class="fas fa-home text-primary fa-2x"></i>
                                </div>
                                <div class="ms-4">
                                    <h4>Closed Properties</h4>
                                    <p class="mb-0 text-muted">Properties with completed transactions that have been bought, sold, or rented.</p>
                                </div>
                            </div>
                       
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('close-property.index') }}" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="property-card card">
                    <div class="card-body">
                      
                            <div class="d-flex">
                                <div class="icon-wrapper">
                                    <i class="fas fa-calendar-times text-primary fa-2x"></i>
                                </div>
                                <div class="ms-4">
                                    <h4>Expired / Withdrawn Properties</h4>
                                    <p class="mb-0 text-muted">Listings that have either expired or been removed from the market.</p>
                                </div>
                            </div>
                      
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('expire-property.index') }}" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>
        </div> -->
        {{--End of My code--}}
        <div class="row">
                <!-- <h4 class="text-primary">Properties</h4> -->
                <div class="col-xl-3 col-md-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <a href="{{ route('all-listing.index') }}" class="text-decoration-none">
                                <div class="d-flex align-items-center">
                                    <div class="order-user p-0">
                                        <i class="fa-solid fa-list text-primary"></i>
                                    </div>
                                    <div class="ms-4 customer p-0">
                                        <h4 class="mb-0  font-w600">All Listings</h4>
                                        <p class="mb-0 font-w500 mt-1 analytic_card_font">See the number of leads per agent alongside stats on follow up</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <a href="{{ route('pre-listings.index') }}" class="text-decoration-none">
                                <div class="d-flex align-items-center">
                                    <div class="order-user p-0">
                                        <i class="fa-solid fa-clipboard-list text-primary"></i>
                                    </div>
                                    <div class="ms-4 customer p-0">
                                        <h4 class="mb-0  font-w600">Pre Listings</h4>
                                        <p class="mb-0 font-w500 mt-1 analytic_card_font">Properties that are in preparation for listing but not yet live</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <a href="{{ route('listings.index') }}" class="text-decoration-none">
                                <div class="d-flex align-items-center">
                                    <div class="order-user p-0">
                                        <i class="fa-solid fa-file-invoice text-primary"></i>
                                    </div>
                                    <div class="ms-4 customer p-0">
                                        <h4 class="mb-0  font-w600">Listings</h4>
                                        <p class="mb-0 font-w500 mt-1 analytic_card_font">All Listed Property</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <a href="{{ route('pending.index') }}" class="text-decoration-none">
                                <div class="d-flex align-items-center">
                                    <div class="order-user p-0">
                                        <i class="fas fa-hourglass-half text-primary"></i>
                                    </div>
                                    <div class="ms-4 customer p-0">
                                        <h4 class="mb-0  font-w600">Pending Properties</h4>
                                        <p class="mb-0 font-w500 mt-1 analytic_card_font">Properties under contract but not yet closed</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <a href="{{ route('close-property.index') }}" class="text-decoration-none">
                                <div class="d-flex align-items-center">
                                    <div class="order-user p-0">
                                        <i class="fas fa-home text-primary"></i>
                                    </div>
                                    <div class="ms-4 customer p-0">
                                        <h4 class="mb-0  font-w600">Closed Properties </h4>
                                        <p class="mb-0 font-w500 mt-1 analytic_card_font">Properties with completed transactions that have been bought, sold, or rented.</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <a href="{{ route('expire-property.index') }}" class="text-decoration-none">
                                <div class="d-flex align-items-center">
                                    <div class="order-user p-0">
                                        <i class="fas fa-calendar-times text-primary"></i>
                                    </div>
                                    <div class="ms-4 customer p-0">
                                        <h4 class="mb-0  font-w600">Expired / Withdrown Properties</h4>
                                        <p class="mb-0 font-w500 mt-1 analytic_card_font">Listings that have either expired or been removed from the market.</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
</div>
@endsection



@push('js')
@endpush