@extends('layouts/contentNavbarLayout')

@section('title', 'Parking 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> Parking 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>

        @isset($spot)
          {!! Form::model($spot, ['route' => ['parking-spot.update', Crypt::encrypt($spot->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}
        @else
          {!! Form::open(['url' => '/parking-spot', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'lang' => 'en', 'files' => true]) !!}
        @endisset

          <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">
                      {!! Form::label('spot_id', 'Parking Spot ID', ['class' => 'form-label']) !!}
                      {!! Form::text('spot_id', @$spot_id, ['class' => 'form-control', 'id' => 'spot_id', 'readonly' ]) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('description', 'Location Description', ['class' => 'form-label']) !!}
                      {!! Form::text('description', @$spot->description, ['class' => 'form-control', 'id' => 'description', 'placeholder' => 'Location Description']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('type', 'Spot Type', ['class' => 'form-label']) !!}
                      {!! Form::select('type', ['' => 'Select Type', 'Car' => 'Car', 'Motorcycle' => 'Motorcycle', 'Handicap' => 'Handicap'], @$spot->type, ['class' => 'form-select form-select-lg', 'id' => 'largeSelect']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Spot Specifications</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('size', 'Size/Dimensions', ['class' => 'form-label']) !!}
                      {!! Form::text('size', @$spot->size, ['class' => 'form-control', 'id' => 'size', 'placeholder' => 'Size/Dimensions']) !!}
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('features', 'Special Features', ['class' => 'form-label']) !!}
                      {!! Form::select('features[]', ['EV charging' => 'EV charging', 'Covered Spot' => 'Covered Spot'], @$spot->features, ['id' => 'largeSelect', 'class' => 'form-select form-select-lg', 'multiple' => true]) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Account Status</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-check form-switch mb-2">
                      {!! Form::label('status', 'Active', ['class' => 'form-check-label', 'for' => 'status']) !!}
                      {!! Form::checkbox('status', 1, @$spot->status, ['class' => 'form-check-input', 'id' => 'status']) !!}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">
            <!-- Assuming you want to clear the form with JavaScript -->
            <button type="button" class="fw-medium btn btn-warning" style="margin-right: 10px" onclick="clearForm()">Clear</button>
            <!-- This button is for submitting the form -->
            {!! Form::button('Submit', ['type' => 'submit', 'class' => 'btn btn-primary']) !!}
          </div>
        {!! Form::close() !!}
    </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