@for ($spot = 1;  $spot <= $response['spots']; $spot++)

  <div class="card mb-4">
    <h5 class="card-header">Vehicle Information #{{ $spot }}</h5>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-6">
                <label for="make{{$spot}}" class="form-label">Vehicle Make</label>
                <input type="text" name="vehicle[make][]" id="make{{$spot}}" onchange="getQR({{$spot}})" class="form-control" placeholder="Vehicle Make">
                <br>
                <label for="model{{$spot}}" class="form-label">Vehicle Model</label>
                <input type="text" name="vehicle[model][]" id="model{{$spot}}" onchange="getQR({{$spot}})" class="form-control" placeholder="Vehicle Model">
                <br>
                <label for="color{{$spot}}" class="form-label">Color</label>
                <input type="text" name="vehicle[color][]" id="color{{$spot}}" onchange="getQR({{$spot}})" class="form-control" placeholder="Color">
                <br>
                <label for="plateno{{$spot}}" class="form-label">License Plate Number</label>
                <input type="text" name="vehicle[license_plate_number][]" id="plateno{{$spot}}" onchange="getQR({{$spot}})" class="form-control" placeholder="License Plate No">
                <br>
                <label for="color{{$spot}}" class="form-label">Vehicle Image</label>
                <input type="file" name="vehicle[image][]" id="image{{$spot}}" class="form-control" placeholder="Vehicle image">
            </div>
            <div class="col-sm-6">
              <label for="spot{{$spot}}" class="form-label">Assigned Parking Spot</label>
              <select name="vehicle[spot_id][]" onchange="getQR({{$spot}})" id="spot{{$spot}}" class="form-select form-select-lg">
                @foreach ($spots as $sindex => $spot_name)
                  <option value="{{$sindex}}">{{$spot_name}}</option>
                @endforeach
              </select>
              <br>
                <label for="type{{$spot}}" class="form-label">Vehicle Type</label>
                <select name="vehicle[type][]" onchange="getQR({{$spot}})" id="type{{$spot}}" 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{{$spot}}">{{ $response['qr_code'] }}</span>
              </div>
              <br>
              <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{{$spot}}')">
                  Download </a>
              </div>
          </div>

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

@endfor