@extends('layouts/contentNavbarLayout')

@section('title', 'Resident Users')

@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> Resident Users</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="/resident-users">
            Back </a>
        </div>
      </div>

      @isset($user)
        {!! Form::model($user, ['route' => ['resident-users.update', Crypt::encrypt($user->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}
      @else
        {!! Form::open(['url' => '/resident-users', '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">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']) !!}
                  </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']) !!}
                  </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']) !!}
                  </div>

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

                  <div class="col-sm-6">
                    {!! Form::label('confirm_password', "Confirm Password", ['class' => 'form-label']) !!}
                    {!! Form::password('password_confirmation', ['class' => 'form-control', 'placeholder' => 'Password']) !!}
                  </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']) !!}
                  </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', @$community->street, ['class' => 'form-control', 'placeholder' => 'Street', 'required']) !!}
                  </div>
                  <div class="col-sm-4">
                    {!! Form::label('city', 'City', ['class' => 'col-sm-2']) !!}
                    {!! Form::text('city', @$community->city, ['class' => 'form-control', 'placeholder' => 'City', 'required']) !!}
                  </div>
                  <div class="col-sm-4">
                    {!! Form::label('state', 'State', ['class' => 'col-sm-2']) !!}
                    {!! Form::text('state', @$community->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', @$community->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">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']) !!}
                  </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']) !!}
                  </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']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Emergency Contact</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    {!! Form::label('contact_name', 'Contact Name', ['class' => 'form-label']) !!}
                    {!! Form::text('contact_name', @$user->contact_name, ['class' => 'form-control', 'id' => 'contact_name', 'placeholder' => 'Contact Name']) !!}
                  </div>
                  <div class="col-sm-6">
                      {!! Form::label('contact_relationship', 'Contact Relationship', ['class' => 'form-label']) !!}
                      {!! Form::text('contact_relationship', @$user->contact_relationship, ['class' => 'form-control', 'id' => 'contact_relationship', 'placeholder' => 'Contact Relationship']) !!}
                  </div>
                  <div class="col-sm-6">
                      {!! Form::label('emergency_contact_number', 'Contact Phone', ['class' => 'form-label']) !!}
                      {!! Form::tel('emergency_contact_number', @$user->emergency_contact_number, ['class' => 'form-control', 'id' => 'emergency_contact_number', 'placeholder' => 'Contact Phone']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Subscription Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    {!! Form::label('plan_id', 'Parking Subscription Plan', ['class' => 'form-label']) !!}
                    {!! Form::select('plan_id', $subscription, @$user->plan_id, ['class' => 'form-select form-select-lg', "id"=>"plan_id"]) !!}
                  </div>
                  {{-- <div class="col-sm-6">
                      {!! Form::label('spot_id', 'Assigned Parking Spot', ['class' => 'form-label']) !!}
                      {!! Form::select('spot_id', $spots, @$user->spot_id, ['class' => 'form-select form-select-lg']) !!}
                  </div> --}}
                </div>
              </div>
            </div>
          </div>

          <div id="vehiclesContainer">
            @if (isset($user))
              @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="color{{$index}}" class="form-label">Vehicle Image</label>
                              <input type="file" name="vehicle[image][]" value="{{ $vehicle->image }}" id="image{{$index}}" class="form-control" placeholder="Vehicle image">
                          </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>
                            <span id="qrcode{{$index}}">{{ QrCode::size(150)->generate($vehicle->id) }}</span>

                            <div class="card-footer text-muted sm:justify-end float-end">
                              <a class="fw-medium text-white btn btn-warning sm:justify-end float-end" onclick="downloadQR('qrcode{{$index}}')">
                                Download QR</a>
                            </div>
                        </div>

                      </div>
                  </div>
                </div>
              @endforeach
            @endif
          </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 User', ['class' => 'form-check-label']) !!}
                        {!! Form::checkbox('status', 1, @$user->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'
        });
      });

      function downloadQR(qrid) {
        const svgElement = document.getElementById(qrid);
        const serializer = new XMLSerializer();
        const svgString = serializer.serializeToString(svgElement);
        const blob = new Blob([svgString], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);

        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = 'downloadedSvg.svg'; // Customize the file name
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

        URL.revokeObjectURL(url); // Clean up the object URL
      }

      function getSpots() {
        $.ajax({
          url: '/get-spots-count', // The URL to your endpoint that returns the number of items
          type: 'GET', // or 'POST', depending on your requirements
          data: {
            subscription_id: $("#plan_id").val(),
          },
          success: function(response) {
            $('#vehiclesContainer').empty();
            // Assuming 'response.spots' holds the number of times to generate the content
            $('#vehiclesContainer').append(response);
            console.log("Count fetch");
            // generateVehicleInformation(response.spots, response.spot_list, response.qr_code);
          },
          error: function(xhr, status, error) {
              // Handle any errors
              console.log("Error: " + error);
          }
        });
      }

  </script>
@endsection