@extends('layouts.app')

@section('content')
<div class="container py-5 px-5">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="fw-bold">Managed Properties</h2>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-lg-7">
            <a href="">
                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.6321 20.7143L9.11208 14.1943C8.34208 13.4243 8.34208 12.1643 9.11208 11.3943L15.6321 4.87427" stroke="#1C1B1F" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
                        
            <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.54205 20.7143L16.0621 14.1943C16.8321 13.4243 16.8321 12.1643 16.0621 11.3943L9.54205 4.87427" stroke="#54577A" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>

        <div class="col-lg-5  text-end">
            <div class="input-group search-input ">
                <input type="search" class="form-control inputProperty" placeholder="Search Property">
                <span class="input-group-text searchSec" id="search-input">
                    <svg class="icon-18" width="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="11.7669" cy="11.7666" r="8.98856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></circle>
                        <path d="M18.0186 18.4851L21.5426 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span> 
            </div>
        </div>
    </div>

    <div class="row pt-5">
        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
            <img src="../public/assets/images/aston_assets/pro-img.png" class="w-100"/>

            <p class="h4 mt-4"> Property Units <span class="text-light"> (03)</span>  </p>

            <div>                
                <p class="mt-4 border-bottom w-50 f_14"> 
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.125 5.91675C3.125 5.65153 3.23036 5.39718 3.41789 5.20964C3.60543 5.02211 3.85978 4.91675 4.125 4.91675H16.125C16.3902 4.91675 16.6446 5.02211 16.8321 5.20964C17.0196 5.39718 17.125 5.65153 17.125 5.91675C17.125 6.18196 17.0196 6.43632 16.8321 6.62385C16.6446 6.81139 16.3902 6.91675 16.125 6.91675H4.125C3.85978 6.91675 3.60543 6.81139 3.41789 6.62385C3.23036 6.43632 3.125 6.18196 3.125 5.91675ZM3.125 10.9167C3.125 10.6515 3.23036 10.3972 3.41789 10.2096C3.60543 10.0221 3.85978 9.91675 4.125 9.91675H16.125C16.3902 9.91675 16.6446 10.0221 16.8321 10.2096C17.0196 10.3972 17.125 10.6515 17.125 10.9167C17.125 11.182 17.0196 11.4363 16.8321 11.6239C16.6446 11.8114 16.3902 11.9167 16.125 11.9167H4.125C3.85978 11.9167 3.60543 11.8114 3.41789 11.6239C3.23036 11.4363 3.125 11.182 3.125 10.9167ZM3.125 15.9167C3.125 15.6515 3.23036 15.3972 3.41789 15.2096C3.60543 15.0221 3.85978 14.9167 4.125 14.9167H16.125C16.3902 14.9167 16.6446 15.0221 16.8321 15.2096C17.0196 15.3972 17.125 15.6515 17.125 15.9167C17.125 16.182 17.0196 16.4363 16.8321 16.6239C16.6446 16.8114 16.3902 16.9167 16.125 16.9167H4.125C3.85978 16.9167 3.60543 16.8114 3.41789 16.6239C3.23036 16.4363 3.125 16.182 3.125 15.9167Z" fill="#1C1B1F"/>
                    </svg> Unit (Name, Numbered or Lettered)
                </p>

                <p class="mt-4 border-bottom w-50 f_14"> 
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.125 5.91675C3.125 5.65153 3.23036 5.39718 3.41789 5.20964C3.60543 5.02211 3.85978 4.91675 4.125 4.91675H16.125C16.3902 4.91675 16.6446 5.02211 16.8321 5.20964C17.0196 5.39718 17.125 5.65153 17.125 5.91675C17.125 6.18196 17.0196 6.43632 16.8321 6.62385C16.6446 6.81139 16.3902 6.91675 16.125 6.91675H4.125C3.85978 6.91675 3.60543 6.81139 3.41789 6.62385C3.23036 6.43632 3.125 6.18196 3.125 5.91675ZM3.125 10.9167C3.125 10.6515 3.23036 10.3972 3.41789 10.2096C3.60543 10.0221 3.85978 9.91675 4.125 9.91675H16.125C16.3902 9.91675 16.6446 10.0221 16.8321 10.2096C17.0196 10.3972 17.125 10.6515 17.125 10.9167C17.125 11.182 17.0196 11.4363 16.8321 11.6239C16.6446 11.8114 16.3902 11.9167 16.125 11.9167H4.125C3.85978 11.9167 3.60543 11.8114 3.41789 11.6239C3.23036 11.4363 3.125 11.182 3.125 10.9167ZM3.125 15.9167C3.125 15.6515 3.23036 15.3972 3.41789 15.2096C3.60543 15.0221 3.85978 14.9167 4.125 14.9167H16.125C16.3902 14.9167 16.6446 15.0221 16.8321 15.2096C17.0196 15.3972 17.125 15.6515 17.125 15.9167C17.125 16.182 17.0196 16.4363 16.8321 16.6239C16.6446 16.8114 16.3902 16.9167 16.125 16.9167H4.125C3.85978 16.9167 3.60543 16.8114 3.41789 16.6239C3.23036 16.4363 3.125 16.182 3.125 15.9167Z" fill="#1C1B1F"/>
                    </svg> Unit (Name, Numbered or Lettered)
                </p>

                <p class="mt-4 border-bottom w-50 f_14"> 
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.125 5.91675C3.125 5.65153 3.23036 5.39718 3.41789 5.20964C3.60543 5.02211 3.85978 4.91675 4.125 4.91675H16.125C16.3902 4.91675 16.6446 5.02211 16.8321 5.20964C17.0196 5.39718 17.125 5.65153 17.125 5.91675C17.125 6.18196 17.0196 6.43632 16.8321 6.62385C16.6446 6.81139 16.3902 6.91675 16.125 6.91675H4.125C3.85978 6.91675 3.60543 6.81139 3.41789 6.62385C3.23036 6.43632 3.125 6.18196 3.125 5.91675ZM3.125 10.9167C3.125 10.6515 3.23036 10.3972 3.41789 10.2096C3.60543 10.0221 3.85978 9.91675 4.125 9.91675H16.125C16.3902 9.91675 16.6446 10.0221 16.8321 10.2096C17.0196 10.3972 17.125 10.6515 17.125 10.9167C17.125 11.182 17.0196 11.4363 16.8321 11.6239C16.6446 11.8114 16.3902 11.9167 16.125 11.9167H4.125C3.85978 11.9167 3.60543 11.8114 3.41789 11.6239C3.23036 11.4363 3.125 11.182 3.125 10.9167ZM3.125 15.9167C3.125 15.6515 3.23036 15.3972 3.41789 15.2096C3.60543 15.0221 3.85978 14.9167 4.125 14.9167H16.125C16.3902 14.9167 16.6446 15.0221 16.8321 15.2096C17.0196 15.3972 17.125 15.6515 17.125 15.9167C17.125 16.182 17.0196 16.4363 16.8321 16.6239C16.6446 16.8114 16.3902 16.9167 16.125 16.9167H4.125C3.85978 16.9167 3.60543 16.8114 3.41789 16.6239C3.23036 16.4363 3.125 16.182 3.125 15.9167Z" fill="#1C1B1F"/>
                    </svg> Unit (Name, Numbered or Lettered)
                </p>
            </div>

        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="d-flex justify-content-between">
                <div class="">
                    <h4>Unit (Name, Numbered or Lettered) </h4>
                        <div class="d-flex">
                            <p class="f_12">Last Edited</p>
                            <p class="ms-3 f_12">
                                <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.0638 7.49991C14.0638 10.7974 11.3875 13.4737 8.08999 13.4737C4.79247 13.4737 2.11621 10.7974 2.11621 7.49991C2.11621 4.20238 4.79247 1.52612 8.08999 1.52612C11.3875 1.52612 14.0638 4.20238 14.0638 7.49991Z" stroke="#54577A" stroke-width="1.3441" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10.3062 9.39976L8.45433 8.29461C8.13174 8.10345 7.8689 7.64347 7.8689 7.26712V4.81787" stroke="#54577A" stroke-width="1.3441" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                1 hour
                            </p>
                        </div>
                </div>
                <div>
                    <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="{{ route('edit-unit') }}">
                        <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.80841 1.41752C7.92762 1.29831 8.06915 1.20374 8.2249 1.13923C8.38066 1.07471 8.5476 1.0415 8.71619 1.0415C8.88479 1.0415 9.05173 1.07471 9.20749 1.13923C9.36324 1.20374 9.50477 1.29831 9.62398 1.41752C9.74319 1.53673 9.83776 1.67826 9.90228 1.83402C9.96679 1.98978 10 2.15672 10 2.32531C10 2.4939 9.96679 2.66084 9.90228 2.8166C9.83776 2.97236 9.74319 3.11388 9.62398 3.2331L3.49642 9.36066L1 10.0415L1.68084 7.54509L7.80841 1.41752Z" stroke="white" stroke-width="0.907788" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>

                        Edit Unit
                    </a>
                </div>
            </div>

            <h5 class="pb-4">Property Details</h5>
            <div class="d-flex justify-content-between">
                <p>Rent</p>
                <p class="text-dark">$500</p>
            </div>
 
            <div class="d-flex justify-content-between">
                <p>Payment Date</p>
                <p class="text-dark">01/10/2022</p>
            </div>

            <div class="d-flex justify-content-between">
                <p>PM Start Date </p>
                <p class="text-dark">01/10/2022</p>
            </div>

            <div class="d-flex justify-content-between">
                <p>Date avaliable</p>
                <p class="text-dark">01/10/2022</p>
            </div>

            <div class="d-flex justify-content-between">
                <p>Key System (Key Safe/ Set Held/ Landlord Holds/ Tenant Holds</p>
                <p class="text-dark">Key Safe</p>
            </div>

            <div class="d-flex justify-content-between">
                <p>Tenant Details</p>
                <p class="text-dark">Bakeley Properties</p>
            </div>

            <h5 class="mb-3">Description</h5>
            <p class="f_14"> Lorem ipsum dolor sit amet consectetur. Massa convallis dapibus tincidunt mollis et tellus. Mattis tristique ante ut vel leo cursus.Lorem ipsum dolor sit amet consectetur. Massa convallis dapibus tincidunt mollis et tellus. Mattis tristique ante ut vel leo cursus.</p>
        </div>

    </div>

</div>
@endsection