@extends('layout.master')

@section('main_content')
<div class="container-fluid">
    <div class="page-title">
      <div class="row">
        <div class="col-sm-6">
          <h3>Create Survey</h3>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
            <li class="breadcrumb-item">Surveys</li>
            <li class="breadcrumb-item active">Create</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
  <!-- Container-fluid starts-->
  <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">
            <div class="card">
              <div class="card-body">
                <form class="theme-form" action="{{ route('survey.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row mb-3">
                        <label class="col-sm-2 col-form-label">Client</label>
                        <div class="col-sm-10">
                            <select class="form-select select2-client" name="client_id" id="client_id">
                                @foreach ($clients as $client)
                                    <option value="{{ $client['RID'] }}">{{ $client['name'] }} {{ $client['CAddress'] }} Loan
                                        Date:{{ $client['RLoanDate'] }} Request Number:{{ $client['RID'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <h5 class="card-title text-center">Please enter a value between 1 and 5:</h5>

                    <!-- Is the product in Good Condition ? -->
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-2 pt-0">Is the product in Good Condition ?</legend>
                        <div class="col-sm-10">

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="goodCondition" id="1"
                                    value="1" checked>
                                <label class="form-check-label" for="goodCondition">
                                    Poor
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="goodCondition" id="2"
                                    value="2">
                                <label class="form-check-label" for="goodCondition">
                                    Need Improvement
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="goodCondition" id="3"
                                    value="3">
                                <label class="form-check-label" for="goodCondition">
                                    Average
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="goodCondition" id="4"
                                    value="4">
                                <label class="form-check-label" for="goodCondition">
                                    Good
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="goodCondition" id="5"
                                    value="5">
                                <label class="form-check-label" for="goodCondition">
                                    Excellent
                                </label>
                            </div>

                        </div>
                    </fieldset>

                    <!-- Did the product arrive in the requested Time ? -->
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-2 pt-0">Did the product arrive in the requested Time ?</legend>
                        <div class="col-sm-10">

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="requestedTime" id="1"
                                    value="1" checked>
                                <label class="form-check-label" for="requestedTime">
                                    Poor
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="requestedTime" id="2"
                                    value="2">
                                <label class="form-check-label" for="requestedTime">
                                    Need Improvement
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="requestedTime" id="3"
                                    value="3">
                                <label class="form-check-label" for="requestedTime">
                                    Average
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="requestedTime" id="4"
                                    value="4">
                                <label class="form-check-label" for="requestedTime">
                                    Good
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="requestedTime"
                                    id="5" value="5">
                                <label class="form-check-label" for="requestedTime">
                                    Excellent
                                </label>
                            </div>

                        </div>
                    </fieldset>

                    <!-- Did the IT person assemble the unit ? -->
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-2 pt-0">Did the IT person assemble the unit ?</legend>
                        <div class="col-sm-10">

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="assemble" id="1"
                                    value="1" checked>
                                <label class="form-check-label" for="assemble">
                                    Poor
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="assemble" id="2"
                                    value="2">
                                <label class="form-check-label" for="assemble">
                                    Need Improvement
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="assemble" id="3"
                                    value="3">
                                <label class="form-check-label" for="assemble">
                                    Average
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="assemble" id="4"
                                    value="4">
                                <label class="form-check-label" for="assemble">
                                    Good
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="assemble"
                                    id="5" value="5">
                                <label class="form-check-label" for="assemble">
                                    Excellent
                                </label>
                            </div>

                        </div>
                    </fieldset>

                    <!-- Are you satisfied with the overall experience? -->
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-2 pt-0">Are you satisfied with the overall experience?</legend>
                        <div class="col-sm-10">

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="happy" id="1"
                                    value="1" checked>
                                <label class="form-check-label" for="happy">
                                    Poor
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="happy" id="2"
                                    value="2">
                                <label class="form-check-label" for="happy">
                                    Need Improvement
                                </label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="happy" id="3"
                                    value="3">
                                <label class="form-check-label" for="happy">
                                    Average
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="happy" id="4"
                                    value="4">
                                <label class="form-check-label" for="happy">
                                    Good
                                </label>
                            </div>


                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="happy"
                                    id="5" value="5">
                                <label class="form-check-label" for="happy">
                                    Excellent
                                </label>
                            </div>

                        </div>
                    </fieldset>

              <div class="card-footer text-end">
                <button class="btn btn-primary" type="submit">Submit</button>
                <button class="btn btn-secondary">Cancel</button>
              </div>
            </div>
          </div>
        </form>

    </div>
  </div>    
@endsection

@section('scripts')
<script src="{{ asset('assets/js/tooltip-init.js') }}"></script>    
@endsection