@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="border rounded">
               <p class="f_20 m-0 p-3">Unit (Name, Numbered or Lettered) </p>
            </div>

            <div class="row mt-4">
                <div class="col-md-8">
                    <p class="f_12 fw-bold text-dark mb-2">Key System</p>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>(Default)</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>

                    <p class="f_12 fw-bold text-dark mb-2 mt-2">Payment Data</p>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>01/10/2020</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>

                    <p class="f_12 fw-bold text-dark mb-2 mt-2">Date avaliable </p>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>01/10/2020</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>

                    <p class="f_12 fw-bold text-dark mb-2 mt-2">PM Start Date</p>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>01/10/2020</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>

                    <p class="f_12 fw-bold text-dark mb-2 mt-2">Rent</p>
                    <div class="input-group">
                        <input class="form-control border-end-0 border shadow-none" type="text" value="$500" id="example-search-input">
                        <span class="input-group-append">
                            <button class="btn btn-outline-secondary bg-white border-start-0 border ms-n3" type="button">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                        </span>
                    </div>

                    <p class="f_12 fw-bold text-dark mb-2 mt-2">Tenant</p>
                    <div class="input-group">
                        <input class="form-control border-end-0 border shadow-none" type="text" value="$500" id="example-search-input">
                        <span class="input-group-append">
                            <button class="btn btn-outline-secondary bg-white border-start-0 border ms-n3" type="button">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                        </span>
                    </div>

                    <p class="f_12 fw-bold text-dark mb-2 mt-2">Guarantor Details</p>
                    <div class="input-group">
                        <input class="form-control border-end-0 border shadow-none" type="text" value="Bakeley Properties" id="example-search-input">
                    </div>


                    <p class="f_12 fw-bold text-dark mb-2 mt-3">Description</p>
                    <p>Lorem ipsum dolor sit amet consectetur. Massa convallis dapibus tincidunt  ristique 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>
                    
                    <button class="btn btn-primary gap-2 align-items-center" aria-current="page" href="#" >
                        Save Changes
                    </button>

                </div>

                <div class="col-md-4">
                    <button class="btnUnitDel mt-4"> 
                        <svg width="13" height="14" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_178_345)">
                            <path d="M1.68225 3.3252H2.6633H10.5117" stroke="#1C1B1F" stroke-width="0.981049" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M9.53067 3.32538V10.1927C9.53067 10.4529 9.42731 10.7024 9.24333 10.8864C9.05935 11.0704 8.80981 11.1738 8.54962 11.1738H3.64438C3.38419 11.1738 3.13465 11.0704 2.95067 10.8864C2.76669 10.7024 2.66333 10.4529 2.66333 10.1927V3.32538M4.1349 3.32538V2.34433C4.1349 2.08414 4.23826 1.83461 4.42225 1.65062C4.60623 1.46664 4.85576 1.36328 5.11595 1.36328H7.07805C7.33824 1.36328 7.58777 1.46664 7.77175 1.65062C7.95574 1.83461 8.0591 2.08414 8.0591 2.34433V3.32538" stroke="#1C1B1F" stroke-width="0.981049" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M5.11597 5.77783V8.72098" stroke="#1C1B1F" stroke-width="0.981049" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M7.078 5.77783V8.72098" stroke="#1C1B1F" stroke-width="0.981049" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_178_345">
                            <rect width="11.7726" height="11.7726" fill="white" transform="translate(0.210693 0.382324)"/>
                            </clipPath>
                            </defs>
                        </svg>
                        Delete Unit</button>
                </div>
            </div>
        </div>

    </div>

</div>
@endsection