@extends('layouts.app')
@section('content')
<div class="container my-5 px-5">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="fw-bold mb-4">Property  Maintenance</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 d-flex w-75">
            <p class="pt-1">Today you have </p>
            <p class="f_14 ps-3"><span class="me-2 number text-white">8</span>Backup </p>
            <p class="f_14 ps-3"><span class="me-2 number2 text-white">4</span>Preferred</p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="d-flex justify-content-between listName  py-2">
                <p class="mb-0 bg-white py-2 px-2">List </p>
                <p class="mb-0 py-2">| Icons |</p>
                <p class="mb-0 py-2 pe-2">Tiles </p>
            </div>
        </div>

        <div class="col-lg-6 text-end">
            <a class="btn btn_trans btn-sm gap-2 align-items-center" aria-current="page" href="#">    
                <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.828111 0.627221C0.936177 0.394306 1.1696 0.245285 1.42636 0.245285H14.6165C14.8733 0.245285 15.1067 0.394306 15.2147 0.627221C15.3228 0.860135 15.2859 1.1346 15.1201 1.33065L9.99995 7.3852V12.7759C9.99995 13.0045 9.8816 13.2168 9.68716 13.3369C9.49273 13.4571 9.24994 13.468 9.0455 13.3658L6.40747 12.0468C6.18404 11.9351 6.04291 11.7067 6.04291 11.4569V7.3852L0.922782 1.33065C0.756983 1.1346 0.720045 0.860135 0.828111 0.627221ZM2.8478 1.5643L7.20599 6.71786C7.30668 6.83692 7.36192 6.9878 7.36192 7.14372V11.0493L8.68093 11.7088V7.14372C8.68093 6.9878 8.73618 6.83692 8.83686 6.71786L13.1951 1.5643H2.8478Z" fill="#151515"/>
                </svg>
                Filter
              </a>

            <a class="btn btnBoard btn-sm gap-2 align-items-center" aria-current="page" href="#" target="_blank">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.238 3.21387C8.57945 3.21387 8.85624 3.49067 8.85624 3.83211V12.4876C8.85624 12.829 8.57945 13.1058 8.238 13.1058C7.89655 13.1058 7.61975 12.829 7.61975 12.4876V3.83211C7.61975 3.49067 7.89655 3.21387 8.238 3.21387Z" fill="#ffffff"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29199 8.15975C3.29199 7.8183 3.56879 7.5415 3.91024 7.5415H12.5657C12.9071 7.5415 13.1839 7.8183 13.1839 8.15975C13.1839 8.5012 12.9071 8.778 12.5657 8.778H3.91024C3.56879 8.778 3.29199 8.5012 3.29199 8.15975Z" fill="#ffffff"/>
                </svg>
                New board
              </a>
        </div>


        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between">
                    <p class="head">BACKUP <span class="roundNum ms-2">3</span></p>

                    <div class="d-flex">
                        
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-1">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.238 3.21387C8.57945 3.21387 8.85624 3.49067 8.85624 3.83211V12.4876C8.85624 12.829 8.57945 13.1058 8.238 13.1058C7.89655 13.1058 7.61975 12.829 7.61975 12.4876V3.83211C7.61975 3.49067 7.89655 3.21387 8.238 3.21387Z" fill="#4D4D4D"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29199 8.15975C3.29199 7.8183 3.56879 7.5415 3.91024 7.5415H12.5657C12.9071 7.5415 13.1839 7.8183 13.1839 8.15975C13.1839 8.5012 12.9071 8.778 12.5657 8.778H3.91024C3.56879 8.778 3.29199 8.5012 3.29199 8.15975Z" fill="#4D4D4D"/>
                        </svg>

                        <div class="dropdown">
                            <button class="btn btn-white px-2 py-0 " type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61792 8.08057C6.61792 7.41684 7.15598 6.87878 7.8197 6.87878C8.48343 6.87878 9.02148 7.41684 9.02148 8.08057C9.02148 8.74429 8.48343 9.28235 7.8197 9.28235C7.15598 9.28235 6.61792 8.74429 6.61792 8.08057Z" fill="#4D4D4D"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61792 3.87439C6.61792 3.21066 7.15598 2.67261 7.8197 2.67261C8.48343 2.67261 9.02148 3.21066 9.02148 3.87439C9.02148 4.53812 8.48343 5.07617 7.8197 5.07617C7.15598 5.07617 6.61792 4.53812 6.61792 3.87439Z" fill="#4D4D4D"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61792 12.2867C6.61792 11.623 7.15598 11.085 7.8197 11.085C8.48343 11.085 9.02148 11.623 9.02148 12.2867C9.02148 12.9505 8.48343 13.4885 7.8197 13.4885C7.15598 13.4885 6.61792 12.9505 6.61792 12.2867Z" fill="#4D4D4D"/>
                                </svg>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </div>

                    </div>
                </div>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Assignee</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th scope="col">Service Type</th>
                            <th scope="col">Service Area</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>

                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>

                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

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


            
            <div class="col-lg-12">
                <div class="d-flex justify-content-between">
                    <p class="head2">PREFERRED <span class="roundNum2 ms-2">3</span></p>

                    <div class="d-flex">
                        
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-1">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.238 3.21387C8.57945 3.21387 8.85624 3.49067 8.85624 3.83211V12.4876C8.85624 12.829 8.57945 13.1058 8.238 13.1058C7.89655 13.1058 7.61975 12.829 7.61975 12.4876V3.83211C7.61975 3.49067 7.89655 3.21387 8.238 3.21387Z" fill="#4D4D4D"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29199 8.15975C3.29199 7.8183 3.56879 7.5415 3.91024 7.5415H12.5657C12.9071 7.5415 13.1839 7.8183 13.1839 8.15975C13.1839 8.5012 12.9071 8.778 12.5657 8.778H3.91024C3.56879 8.778 3.29199 8.5012 3.29199 8.15975Z" fill="#4D4D4D"/>
                        </svg>

                        <div class="dropdown">
                            <button class="btn btn-white px-2 py-0 " type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61792 8.08057C6.61792 7.41684 7.15598 6.87878 7.8197 6.87878C8.48343 6.87878 9.02148 7.41684 9.02148 8.08057C9.02148 8.74429 8.48343 9.28235 7.8197 9.28235C7.15598 9.28235 6.61792 8.74429 6.61792 8.08057Z" fill="#4D4D4D"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61792 3.87439C6.61792 3.21066 7.15598 2.67261 7.8197 2.67261C8.48343 2.67261 9.02148 3.21066 9.02148 3.87439C9.02148 4.53812 8.48343 5.07617 7.8197 5.07617C7.15598 5.07617 6.61792 4.53812 6.61792 3.87439Z" fill="#4D4D4D"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.61792 12.2867C6.61792 11.623 7.15598 11.085 7.8197 11.085C8.48343 11.085 9.02148 11.623 9.02148 12.2867C9.02148 12.9505 8.48343 13.4885 7.8197 13.4885C7.15598 13.4885 6.61792 12.9505 6.61792 12.2867Z" fill="#4D4D4D"/>
                                </svg>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </div>

                    </div>
                </div>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Assignee</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th scope="col">Service Type</th>
                            <th scope="col">Service Area</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>

                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>

                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

                        </tr>


                        <tr>
                            <th scope="row">Lee Hutchinson</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    Plumber
                                </a>
                            </td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Newcastle
                                </a>
                            </td>
                            <td></td>
                            <td></td>

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


        </div>
    </div>

</div>
@endsection