@extends('layouts/contentNavbarLayout')

@section('title', 'Assign Spot')

@section('page-style')
  <link rel="stylesheet" href="/assets/css/strength.css" />
@endsection

@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">Home /</span> Assign Spot</h4>
<!-- Basic Layout & Basic with Icons -->
<div class="row">
  <!-- Basic Layout -->
  <div class="col-xxl">
    <div class="card mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap mt-2 mb-1">
        <h5 class="m-0 me-2"></h5>
        <div class="mx-3">
          <a class="fw-medium btn btn-warning" href="/parking-spot">
            Back </a>
        </div>
      </div>

        <form id="progress-form" class="p-4 progress-form" action="/assign-spot" lang="en" novalidate>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Assignment Details</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <label for="full_name" class="form-label">Resident Name/ID</label>
                    <select id="largeSelect" class="form-select form-select-lg">
                      <option>Select Resident</option>
                      <option value="1">Jhon Deo - Res001</option>
                      <option value="2">Jian Marks - Res002</option>
                      <option value="3">Jhony Daps - Res003</option>
                    </select>
                  </div>

                  <div class="col-sm-6">
                    <label for="email" class="form-label">Parking Spot ID:</label>
                    <select id="largeSelect" class="form-select form-select-lg">
                      <option>Select Parking Spot Id</option>
                      <option value="1">PARK001</option>
                      <option value="2">PARK002</option>
                      <option value="3">PARK003</option>
                    </select>
                  </div>

                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Assignment Duration</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" class="form-control" id="start_date" placeholder="Start Date">
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" class="form-control" id="end_date" placeholder="End Date">
                  </div>
                </div>

              </div>
            </div>
          </div>

          <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">
            <a class="fw-medium btn btn-warning" style="margin-right: 10px" href="#">
              Clear </a>

            <a href="/community-users" class="btn btn-primary">
              Submit
            </a>
          </div>

        </form>
    </div>
  </div>
</div>
@endsection

@section('page-script')
  <script src="/assets/js/strength.js"></script>
  <script>
    $(document).ready(function($) {
      $('#myPassword').strength({
          strengthClass: 'strength',
          strengthMeterClass: 'strength_meter',
          strengthButtonClass: 'button_strength',
          strengthButtonTextToggle: 'Hide Password'
        });
      });
  </script>
@endsection