@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Create Virtual</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <form action="{{ route('virtuals.store') }}" method="POST">
                        @csrf
                        <div class="form-group row">
                            <label for="System" class="col-md-4 col-form-label text-md-right">Choose system</label>
                            <div class="col-md-6">
                                <select name="system" id="system" class="form-control">                             
                                    @forelse ($systems as $system)
                                        <option value={{$system->name}}>{{$system->name}}</option>
                                    @empty
                                        <p>No systems to choose from</p>
                                    @endforelse
                                </select>
                                <br>
                            </div>
                            <label for="System" class="col-md-4 col-form-label text-md-right">Mem size</label>
                            <div class="col-md-6">
                                <table>
                                    <tr>
                                      <td>
                                          <input name="memory" id="memory" type="number" size="3" min="1" max="100"/>
                                      </td>
                                      <td>GB</td>
                                    </tr>
                                  </table>
                                <p style="color: red">@error('memory') {{ $message }} @enderror</p>
                            </div>
                            
                            <label for="System" class="col-md-4 col-form-label text-md-right">Disk size</label>
                            <div class="col-md-6">
                                <table>
                                    <tr>
                                      <td>
                                          <input name="disk" id="disk" type="number" size="3" min="1" max="500"/>
                                      </td>
                                      <td>GB</td>
                                    </tr>
                                  </table>
                                <p style="color: red">@error('disk') {{ $message }} @enderror</p>
                            </div>
                            <label for="System" class="col-md-4 col-form-label text-md-right">Number of CPU</label>
                            <div class="col-md-6">
                                <table>
                                    <tr>
                                      <td>
                                          <input name="cpu" id="cpu" type="number" size="3" min="1" max="100"/>
                                      </td>
                                      <td>CPU</td>
                                    </tr>
                                  </table>
                                <p style="color: red">@error('cpu') {{ $message }} @enderror</p>
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Create
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
