@extends('layouts/contentNavbarLayout')

@section('title', 'Profile')

@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> Profile</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="/">
            Back </a>
        </div>
      </div>

        <form id="profile-form" class="p-4 progress-form" action="/update-profile" method="POST" lang="en" files="true" enctype="multipart/form-data">
          @csrf
          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Personal Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('name', 'Full Name', ['class' => 'form-label']) !!}
                      {!! Form::text('name', @$user->name, ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'john bell', 'required']) !!}
                  </div>

                  <div class="col-sm-6">
                    {!! Form::label('username', 'Username', ['class' => 'form-label']) !!}
                    {!! Form::text('username', @$user->username, ['class' => 'form-control', 'id' => 'username', 'placeholder' => 'john bell', 'required']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('employee_resident_id', 'Resident Id', ['class' => 'form-label']) !!}
                      {!! Form::text('employee_resident_id', $resident_id, ['class' => 'form-control', 'id' => 'employee_resident_id', 'readonly']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('email', 'Email Address', ['class' => 'form-label']) !!}
                      {!! Form::email('email', @$user->email, ['class' => 'form-control', 'id' => 'email', 'placeholder' => 'abc@xyz.com', 'readonly']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('phone_number', 'Phone Number', ['class' => 'form-label']) !!}
                      {!! Form::tel('phone_number', @$user->phone_number, ['class' => 'form-control', 'id' => 'phone_number', 'placeholder' => '1231231231', 'required']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('profile_pic', 'Profile Picture:', ['class' => 'form-label']) !!}
                      {!! Form::file('profile_pic', ['class' => 'form-control', 'id' => 'profile_pic']) !!}
                  </div>
                </div>
                <div class="row form__field">
                  {!! Form::label('address', 'Address', ['class' => 'form-label']) !!}
                  <div class="col-sm-4">
                    {!! Form::label('street', 'Street', ['class' => 'col-sm-2']) !!}
                    {!! Form::text('street', @$user->street, ['class' => 'form-control', 'placeholder' => 'Street', 'required']) !!}
                  </div>
                  <div class="col-sm-4">
                    {!! Form::label('city', 'City', ['class' => 'col-sm-2']) !!}
                    {!! Form::text('city', @$user->city, ['class' => 'form-control', 'placeholder' => 'City', 'required']) !!}
                  </div>
                  <div class="col-sm-4">
                    {!! Form::label('state', 'State', ['class' => 'col-sm-2']) !!}
                    {!! Form::text('state', @$user->state, ['class' => 'form-control', 'placeholder' => 'State', 'required']) !!}
                  </div>
                  <div class="col-sm-4 mt-3">
                    {!! Form::label('zip', 'Zip', ['class' => 'col-sm-2']) !!}
                    {!! Form::text('zip_code', @$user->zip_code, ['class' => 'form-control', 'placeholder' => 'Zip Code', 'required']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Change Login Credentials</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    {!! Form::label('password', 'Password', ['class' => 'form-label']) !!}
                    {!! Form::password('password', ['class' => 'form-control', 'id' => 'myPassword', 'placeholder' => 'Password']) !!}
                  </div>

                  <div class="col-sm-6">
                    {!! Form::label('confirm_password', 'Confirm Password', ['class' => 'form-label']) !!}
                    {!! Form::password('password_confirmation', ['class' => 'form-control', 'id' => 'defaultFormControlInput', 'placeholder' => 'Confirm Password']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Residence Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-4">
                      {!! Form::label('apartment_number', 'Apartment/Unit Number', ['class' => 'form-label']) !!}
                      {!! Form::text('apartment_number', @$user->apartment_number, ['class' => 'form-control', 'id' => 'apartment_number', 'placeholder' => 'Apartment/Unit Number', 'required']) !!}
                  </div>

                  <div class="col-sm-4">
                      {!! Form::label('building_block', 'Building/Block', ['class' => 'form-label']) !!}
                      {!! Form::text('building_block', @$user->building_block, ['class' => 'form-control', 'id' => 'building_block', 'placeholder' => 'Building/Block', 'required']) !!}
                  </div>

                  <div class="col-sm-4">
                      {!! Form::label('resident_type', 'Resident Type', ['class' => 'form-label']) !!}
                      {!! Form::select('resident_type', ['' => 'Select Type', 'Owner' => 'Owner', 'Tenant' => 'Tenant'], @$user->resident_type, ['class' => 'form-select form-select-lg', 'id' => 'largeSelect', 'required']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          @if (isset($user->parkingSubscription) && !$user->is_cancelled)
            <div id="vehiclesContainer">
              @if (isset($user->vehicle) && sizeof($user->vehicle) > 0)

                @foreach ($user->vehicle as $index => $vehicle)

                  <div class="card mb-4">
                    <h5 class="card-header">Vehicle Information #{{ $index + 1 }}</h5>
                    <div class="card-body">
                        <div class="row">
                          <input type="hidden" name="vehicle[id][]" value="{{ @$vehicle->id }}">
                            <div class="col-sm-6">
                              <label for="make{{$index}}" class="form-label">Vehicle Make</label>
                              <input type="text" name="vehicle[make][]" value="{{ @$vehicle->make }}" id="make{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="Vehicle Make">
                              <br>
                              <label for="model{{$index}}" class="form-label">Vehicle Model</label>
                              <input type="text" name="vehicle[model][]" value="{{ @$vehicle->model }}" id="model{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="Vehicle Model">
                              <br>
                              <label for="color{{$index}}" class="form-label">Color</label>
                              <input type="text" name="vehicle[color][]" value="{{ @$vehicle->color }}" id="color{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="Color">
                              <br>
                              <label for="plateno{{$index}}" class="form-label">License Plate Number</label>
                              <input type="text" name="vehicle[license_plate_number][]" value="{{ @$vehicle->license_plate_number }}" id="plateno{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="License Plate No">
                              <br>
                              <label for="phoot{{$index}}" class="form-label">Photo</label> @if (@$vehicle->image)
                                <a href="#" class="image-link" data-toggle="modal" data-target="#imageModal" data-image-url="{{ $vehicle->image }}">Open Image</a>
                              @endif
                              <input type="file" name="vehicle[image][]" class="form-control" placeholder="License Plate No">
                            </div>
                            <div class="col-sm-6">
                              <label for="spot{{$index}}" class="form-label">Assigned Parking Spot</label>
                              <select name="vehicle[spot_id][]" onchange="getQR({{$index}})" id="spot{{$index}}" class="form-select form-select-lg">
                                @foreach ($spots as $sindex => $spot_name)
                                  <option value="{{$sindex}}" {{ $sindex == @$vehicle->spot_id ? 'selected' : '' }}>{{$spot_name}}</option>
                                @endforeach
                              </select>
                              <br>
                                <label for="type{{$index}}" class="form-label">Vehicle Type</label>
                                <select name="vehicle[type][]" onchange="getQR({{$index}})" id="type{{$index}}" class="form-select form-select-lg">
                                    <option value="">Select Type</option>
                                    <option value="Car" {{ "Car" == @$vehicle->type ? 'selected' : '' }}>Car</option>
                                    <option value="Motorcycle" {{ "Motorcycle" == @$vehicle->type ? 'selected' : '' }}>Motorcycle</option>
                                    <option value="Bicycle" {{ "Bicycle" == @$vehicle->type ? 'selected' : '' }}>Bicycle</option>
                                </select>
                              <br>
                              <div style="text-align: center; width: 100%;">
                                <span id="qrcode{{$index}}">{{ QrCode::size(150)->generate(@$vehicle->id) }}</span>
                              </div>
                              <br>

                              <div style="text-align: center; width: 100%;" class="card-footer text-muted">
                                <a class="fw-medium text-white btn btn-warning" onclick="downloadQR('qrcode{{$index}}')">
                                  Download QR</a>
                              </div>
                          </div>

                        </div>
                    </div>
                  </div>
                @endforeach
                @for ($i = 0; $i < $user->parkingSubscription->subscription->spots - sizeof($user->vehicle); $i++)
                  <div class="card mb-4">
                    <h5 class="card-header">Vehicle Information #{{ $i + 1 + sizeof($user->vehicle) }}</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6">
                              <label for="make{{sizeof($user->vehicle) + $i}}" class="form-label">Vehicle Make</label>
                              <input type="text" name="vehicle[make][]" id="make{{sizeof($user->vehicle) + $i}}" onchange="getQR({{sizeof($user->vehicle) + $i}})" class="form-control" placeholder="Vehicle Make">
                              <br>
                              <label for="model{{$index}}" class="form-label">Vehicle Model</label>
                              <input type="text" name="vehicle[model][]" id="model{{sizeof($user->vehicle) + $i}}" onchange="getQR({{sizeof($user->vehicle) + $i}})" class="form-control" placeholder="Vehicle Model">
                              <br>
                              <label for="color{{$index}}" class="form-label">Color</label>
                              <input type="text" name="vehicle[color][]" id="color{{sizeof($user->vehicle) + $i}}" onchange="getQR({{sizeof($user->vehicle) + $i}})" class="form-control" placeholder="Color">
                              <br>
                              <label for="plateno{{$index}}" class="form-label">License Plate Number</label>
                              <input type="text" name="vehicle[license_plate_number][]" id="plateno{{sizeof($user->vehicle) + $i}}" onchange="getQR({{sizeof($user->vehicle) + $i}})" class="form-control" placeholder="License Plate No">
                              <br>
                              <label for="phoot{{$index}}" class="form-label">Photo</label> @if (@$vehicle->image)
                                <a href="#" class="image-link" data-toggle="modal" data-target="#imageModal" data-image-url="{{ $vehicle->image }}">Open Image</a>
                              @endif
                              <input type="file" name="vehicle[image][]" class="form-control" placeholder="License Plate No">
                            </div>
                            <div class="col-sm-6">
                              <label for="spot{{sizeof($user->vehicle) + $i}}" class="form-label">Assigned Parking Spot</label>
                              <select name="vehicle[spot_id][]" onchange="getQR({{sizeof($user->vehicle) + $i}})" id="spot{{sizeof($user->vehicle) + $i}}" class="form-select form-select-lg">
                                @foreach ($spots as $sindex => $spot_name)
                                  <option value="{{$sindex}}">{{$spot_name}}</option>
                                @endforeach
                              </select>
                              <br>
                                <label for="type{{$index}}" class="form-label">Vehicle Type</label>
                                <select name="vehicle[type][]" onchange="getQR({{sizeof($user->vehicle) + $i}})" id="type{{sizeof($user->vehicle) + $i}}" class="form-select form-select-lg">
                                    <option value="">Select Type</option>
                                    <option value="Car">Car</option>
                                    <option value="Motorcycle">Motorcycle</option>
                                    <option value="Bicycle">Bicycle</option>
                                </select>
                              <br>
                              <div style="text-align: center; width: 100%;">
                                <span id="qrcode{{sizeof($user->vehicle) + $i}}">{{ QrCode::size(150)->generate(@$vehicle->id) }}</span>
                              </div>
                              <br>

                              <div style="text-align: center; width: 100%;" class="card-footer text-muted">
                                <a class="fw-medium text-white btn btn-warning" onclick="downloadQR('qrcode{{sizeof($user->vehicle) + $i}}')">
                                  Download QR</a>
                              </div>
                          </div>

                        </div>
                    </div>
                  </div>
                @endfor
              @else
                @foreach (array_map('strval', range(0, $user->parkingSubscription->subscription->spots - 1)) as $index => $count)
                  <div class="card mb-4">
                    <h5 class="card-header">Vehicle Information #{{ $index + 1 }}</h5>
                    <div class="card-body">
                        <div class="row">
                          <input type="hidden" name="vehicle[id][]" value="{{ @$vehicle->id }}">
                            <div class="col-sm-6">
                              <label for="make{{$index}}" class="form-label">Vehicle Make</label>
                              <input type="text" name="vehicle[make][]" value="{{ @$vehicle->make }}" id="make{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="Vehicle Make">
                              <br>
                              <label for="model{{$index}}" class="form-label">Vehicle Model</label>
                              <input type="text" name="vehicle[model][]" value="{{ @$vehicle->model }}" id="model{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="Vehicle Model">
                              <br>
                              <label for="color{{$index}}" class="form-label">Color</label>
                              <input type="text" name="vehicle[color][]" value="{{ @$vehicle->color }}" id="color{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="Color">
                              <br>
                              <label for="plateno{{$index}}" class="form-label">License Plate Number</label>
                              <input type="text" name="vehicle[license_plate_number][]" value="{{ @$vehicle->license_plate_number }}" id="plateno{{$index}}" onchange="getQR({{$index}})" class="form-control" placeholder="License Plate No">
                              <br>
                              <label for="phoot{{$index}}" class="form-label">Photo</label>
                              <input type="file" name="vehicle[image][]" class="form-control" placeholder="License Plate No">
                            </div>
                            <div class="col-sm-6">
                              <label for="spot{{$index}}" class="form-label">Assigned Parking Spot</label>
                              <select name="vehicle[spot_id][]" onchange="getQR({{$index}})" id="spot{{$index}}" class="form-select form-select-lg">
                                @foreach ($spots as $sindex => $spot_name)
                                  <option value="{{$sindex}}" @if ($sindex == @$vehicle->spot_id) "selected" @endif>{{$spot_name}}</option>
                                @endforeach
                              </select>
                              <br>
                                <label for="type{{$index}}" class="form-label">Vehicle Type</label>
                                <select name="vehicle[type][]" onchange="getQR({{$index}})" id="type{{$index}}" class="form-select form-select-lg">
                                    <option value="">Select Type</option>
                                    <option value="Car" @if ("Car" == @$vehicle->type) "selected" @endif>Car</option>
                                    <option value="Motorcycle" @if ("Motorcycle" == @$vehicle->type) "selected" @endif>Motorcycle</option>
                                    <option value="Bicycle" @if ("Bicycle" == @$vehicle->type) "selected" @endif>Bicycle</option>
                                </select>
                              <br>
                              @if(@$vehicle->id)
                                <div style="text-align: center; width: 100%;">
                                  <span id="qrcode{{$index}}">{{ QrCode::size(150)->generate(@$vehicle->id) }}</span>
                                </div>
                                <br>

                                <div style="text-align: center; width: 100%;" class="card-footer text-muted">
                                  <a class="fw-medium text-white btn btn-warning" onclick="downloadQR('qrcode{{$index}}')">
                                    Download QR</a>
                                </div>
                              @endif

                          </div>

                        </div>
                    </div>
                  </div>
                @endforeach
              @endif

            </div>
          @endif

          <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">
            <button type="submit" class="btn btn-primary">
              Update profile
            </button>
          </div>

        </form>
        @if (isset($user->parkingSubscription) && !$user->is_cancelled)