@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="number text-white">3</span> Jobs in progress </p>
            <p class="f_14 ps-3"><span class="number2 text-white">3</span> Scheduling </p>
            <p class="f_14 ps-3"><span class="number3 text-white">3</span> Awaiting Payement </p>
            <p class="f_14 ps-3"><span class="number4 text-white">3</span> Task Completed </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">Job in Progress <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 scope="col">Reported</th>
                        <th scope="col">Complated</th>
                        <th scope="col">Property</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>


            </div>

            <div class="col-lg-12 mt-4">
                <div class="d-flex justify-content-between">
                    <p class="head2">SCHEDULING <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 scope="col">Reported</th>
                        <th scope="col">Complated</th>
                        <th scope="col">Property</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>


            </div>



            <div class="col-lg-12 mt-4">
                <div class="d-flex justify-content-between">
                    <p class="head3">AWAITING PAYEMENT <span class="roundNum3 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 scope="col">Reported</th>
                        <th scope="col">Complated</th>
                        <th scope="col">Property</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>


            </div>




            <div class="col-lg-12 mt-4">
                <div class="d-flex justify-content-between">
                    <p class="head4">TASK COMPLETED <span class="roundNum4 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 scope="col">Reported</th>
                        <th scope="col">Complated</th>
                        <th scope="col">Property</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">6 Hedley Street - Internal Pipe issue...</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Jan 1 </td>
                            <td>March 1</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                    6 HEDLEY STREET - GATESHEAD...
                                </a>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>


            </div>



        </div>
    </div>

</div>
@endsection