Refill Component View

refill-component.blade.php

<div>
  <div class="flex">


    <div class="max-w-md w-1/2 p-8">
      <h2 class="">You can now refill online!</h2>

      <form wire:submit.prevent="openConfirmation">
        <label class="block pt-6">
          <div class="form-label">Name: @error('name')<br>{{ $message }}@enderror</div>
          <input type="text" wire:model.lazy="name" name="name" id="name" autocomplete="" autocapitalize="off"
                 class="form-input block w-full @error('name') error @enderror"
                 placeholder="your name ..."/>
        </label>

        <label class="block mt-2">
          <div class="form-label">Phone: @error('phone')<br>{{ $message }}@enderror</div>
          <input type="tel" wire:model.lazy="phone" name="phone" id="phone" autocomplete="tel-national"
                 class="form-input block w-full @error('phone') error @enderror"
                 placeholder="your phone ..."/>
        </label>

        <label class="block mt-2">
          <div class="form-label">Callback: @error('callback')<br>{{ $message }}@enderror</div>
          <select wire:model.lazy="callback" name="callback" id="callback"
                  class="form-select block w-full @error('callback') error @enderror">
            @foreach($callbackTiming as $key=>$option)
              <option value="{{ $key }}" {{ $callback == $key ? 'selected' : '' }} >{{ $option }}</option>
            @endforeach
          </select>
        </label>

        <label class="block mt-2">
          <div class="form-label">Delivery: @error('pickup')<br>{{ $message }}@enderror</div>
          <select wire:model.lazy="pickup" name="pickup" id="pickup"
                  class="form-select block w-full @error('pickup') error @enderror">
            @foreach($pickupOptions as $key=>$option)
              <option value="{{ $key }}" {{ $pickup == $key ? 'selected' : '' }} >{{ $option['text'] }}</option>
            @endforeach
          </select>
        </label>


        <div class="">{{ $timingMessage }}</div>


        @foreach($rxs as $key => $rx)
          <label class="block mt-2">
            <div class="form-label">Prescription {{ $key + 1 }}: @error('rxs.'.$key)<br>{{ $message }}@enderror</div>
            <input type="text" wire:model="rxs.{{ $key }}" name="rxs.{{ $key }}" id="rxs.{{ $key }}" autocomplete=""
                   autocapitalize="off"
                   class="form-input block w-full @error('rxs.'.$key) error @enderror"
                   placeholder="your {{ ViewHelper::ordinal($key+1) }} prescription @if($key > 0)(optional) @endif..."/>
          </label>
        @endforeach

        <button type="submit" class=" border rounded px-6 py-2 mt-4">Send Refill</button>
      </form>


    </div>
    <div class="p-8 w-1/2">
      @if($showConfirmation)
        <div class="">
          <p>Please double check your information: If your name or phone number are wrong, we will not be able to
            contact you. And your refill will not be placed.</p>
          <div class="">Name: {{ $name }}</div>
          <div class="">Phone: {{ $phone }}</div>
          <div class="">Callback: {{ $callback }}</div>
          <div class="">Pickup: {{ $pickup }}</div>
          <div class="">message: {{ $timingMessage }}</div>
          <div class="">Rxs:</div>
          <pre class="">{{ print_r($rxs) }}</pre>
        </div>
        <div class="">
          <div class="">Close</div>
          <form wire:submit.prevent="createRefillRequest">
            <button type="submit" class=" border rounded px-6 py-2 mt-4">Confirm</button>
          </form>
        </div>
      @endif

    </div>
  </div>
  <pre class="">
    {{ print_r(json_decode($errors)) }}
  </pre>
  {{--  <pre class="">{{ $errors }}</pre>--}}
</div>