@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">Cleaners Form</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">4</span>Forms </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="row mt-4">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between">
                    <p class="head">Forms <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>Due Date</th>
                            <th scope="col">Priority</th>
                            <th scope="col">Property</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">FormSubmission - 2023-05-06</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Unit Name...</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Urgent
                                </a>
                            </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">FormSubmission - 2023-05-06</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Unit Name...</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Urgent
                                </a>
                            </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">FormSubmission - 2023-05-06</th>
                            <td> <span style="background:black; color:white; padding: 5px 6px; border-radius: 30px;">NB</span></td>
                            <td>Unit Name...</td>
                            <td>
                                <a class="btn btn-primary btn-sm gap-2 align-items-center" aria-current="page" href="#">
                                Urgent
                                </a>
                            </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