@extends('frontend.layouts.app3')

@section('seo')
<title>Form | Muhlach Bakery</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Form | Muhlach Bakery" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Form | Muhlach Bakery" />

<meta property="og:image" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:image:alt" content="{{ asset('img/meta-thumbnail.jpg') }}">
@endsection

@section('content')

@php
$cart_total = 0;
@endphp
@if (session('cart'))
@foreach (session('cart') as $cart)
@php
$cart_total += $cart['amount'] * $cart['price'];

@endphp
@endforeach
@endif

<div class="container-fluid bg-dirty-white pb-5">
  <div class="pt-5 text-center">
    <h5 class="red italic-bold">Form</h5>
  </div>
  @foreach ($errors->all() as $error)
  {{ $error }}
  @endforeach

  <div class="mt-5 pb-5">
    <form class="container " method="POST" action="{{ url('form') }}">@csrf
      <input type="hidden" name="sf" value="50.0" />
      {{-- <input type="hidden" name="store_id" value="{{ session('store') }}" /> --}}
      <input type="hidden" name="cart_total" value="{{ $cart_total }}" />
      @if(session()->get('service_type') != 'Delivery')
      <input type="hidden" name="total" value="{{ $cart_total + (session('sf') ?? 0) }}" />
      @else
      <input type="hidden" name="total" value="{{ $cart_total + (session('sf') ?? 0) }}" />
      @endif
      @foreach (session('cart') as $cart)
      <input type="hidden" name="item" value="{{ $cart['name'] }}" />
      @endforeach

      @foreach (session('cart') as $cart)
      <input type="hidden" name="service_type" value="{{ session()->get('service_type') }}" />
      <input type="hidden" name="store_name" value="{{ session()->get('store_name') }}" />
      <input type="hidden" name="address" value="{{ session()->get('address') }}" />
      <input type="hidden" name="contact_no" value="{{ session()->get('contact_no') }}" />
      <input type="hidden" name="special_instructions" value="{{ session()->get('special_instructions') }}" />
      <input type="hidden" name="payment_method" value="{{ session()->get('payment_method') }}" />
      <input type="hidden" name="assigned_date" value="{{ session()->get('assigned_date') }}" />
      <input type="hidden" name="assigned_time" value="{{ session()->get('assigned_time') }}" />
      @endforeach
      {{-- @foreach (session('cart') as $cart)
      <input type="hidden" name="service_type" value="{{ $cart['service_type'] }}" />
      @endforeach --}}


      <div class="vstack gap-5 w-sm-100 w-75 m-auto">

        <div>
          <label for="firstName" class="form-label"><span class="fs-3">Personal Information </span></label>
        </div>

        <div class="row g-5">
          <div class="col-md">
            <label for="firstName" class="form-label"><span>Full Name <span class="red"><i>(Required)</i></span></span></label>
            <input type="text" name="full_name" class="form-control rounded-0" id="" required value="{{ session('full_name') }}">
            @error('full_name')
            <code>{{ $message }}</code>
            @enderror
          </div>
          <div class="col-md">
            <label for="firstName" class="form-label"><span>Email <span class="red"><i>(Required)</i></span></span></label>
            <input type="email" name="email" class="form-control rounded-0" id="" required value="{{ old('email') }}">
            @error('email')
            <code>{{ $message }}</code>
            @enderror
          </div>
        </div>

        <div>
          <label for="firstName" class="form-label"><span>Contact Number <span class="red"><i>(Required)</i></span></span></label>
          <input type="number" name="phone" class="form-control rounded-0" id="" required value="{{ old('phone') }}">
          @error('phone')
          <code>{{ $message }}</code>
          @enderror
        </div>

        <div>
          <label for="firstName" class="form-label"><span class="fs-3">Card Details </span></label>
        </div>

        <div>
          <label for="firstName" class="form-label"><span>Card Number <span class="red"><i>(Required)</i></span></span></label>
          <input type="number" name="card_number" class="form-control rounded-0" id="" required value="{{ old('card_number') }}">
          @error('card_number')
          <code>{{ $message }}</code>
          @enderror
        </div>

        <div>
          <div class="row g-5">
            <div class="col-md">
              <label for="firstName" class="form-label"><span>Expiration Month <span class="red"><i>(Required)</i></span></span></label>
              <select class="form-select" name="exp_month" aria-label="Default select example" required>
                <option selected disabled>Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>

              @error('exp_month')
              <code>{{ $message }}</code>
              @enderror
            </div>
            <div class="col-md">
              <label for="firstName" class="form-label"><span>Expiration Year <span class="red"><i>(Required)</i></span></span></label>
              <select class="selectpicker form-select" name="exp_year" aria-label="Default select example" value="{{ old('exp_year') }}">
                <option selected disabled>Year</option>
              </select>
              @error('exp_year')
              <code>{{ $message }}</code>
              @enderror
            </div>
          </div>
        </div>

        <div>
          <label for="firstName" class="form-label"><span>CVV <span class="red"><i>(Required)</i></span></span></label>
          <input type="number" name="cvc" class="form-control rounded-0" id="" required value="{{ old('cvc') }}">
          @error('cvc')
          <code>{{ $message }}</code>
          @enderror
        </div>

        <div>
          <label for="firstName" class="form-label"><span class="fs-3">Billing Address </span></label>
        </div>

        <div>
          <label for="firstName" class="form-label"><span>Street Address <span class="red"><i>(Required)</i></span></span></label>
          <input type="text" name="line1" class="form-control rounded-0" id="" required value="{{ old('line1') }}">
          @error('line1')
          <code>{{ $message }}</code>
          @enderror
        </div>

        <div class="row g-5">
          <div class="col-md">
            <label for="firstName" class="form-label"><span>City <span class="red"><i>(Required)</i></span></span></label>
            <input type="text" name="city" class="form-control rounded-0" id="" required value="{{ old('city') }}">
            @error('city')
            <code>{{ $message }}</code>
            @enderror
          </div>
          <div class="col-md">
            <label for="firstName" class="form-label"><span>State <span class="red"><i>(Required)</i></span></span></label>
            <input type="text" name="state" class="form-control rounded-0" id="" required value="{{ old('state') }}">
            @error('state')
            <code>{{ $message }}</code>
            @enderror
          </div>
        </div>

        <div>
          <label for="firstName" class="form-label"><span>Postal Code <span class="red"><i>(Required)</i></span></span></label>
          <input type="number" name="postal_code" class="form-control rounded-0" id="" required value="{{ old('postal_code') }}">
          @error('postal_code')
          <code>{{ $message }}</code>
          @enderror
        </div>

        @foreach (session('cart') as $cart)
        <input type="hidden" name="payment_method" value="card" />
        @endforeach

        <div class="d-flex justify-content-center">
          <button class="place-order red">PLACE ORDER</button>
        </div>
      </div>
    </form>
  </div>
</div>

<style>
  .navbar {
    background-color: #9b0000;
  }

  .place-order {
    padding: 16px 13px !important;
    border-radius: 50px;
    background-color: transparent;
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 18px !important;
    transition: all 0.5s ease;
    border: 2px solid rgb(155, 0, 0);
    color: rgb(155, 0, 0);
    font-family: Cobbler Bold;
    width: 100%;
  }

  .place-order:hover {
    letter-spacing: 3px;
    background-color: rgb(155, 0, 0);
    color: hsl(0, 0%, 100%) !important;
    box-shadow: rgb(155, 0, 0) 0 7px 29px 0;
  }

  .place-order:active {
    letter-spacing: 3px;
    background-color: rgb(155, 0, 0);
    color: hsl(0, 0%, 100%) !important;
    box-shadow: rgb(255, 177, 45) 0 0 0 0;
    transform: translateY(10px);
    transition: 100ms;
  }

  @media only screen and (max-width: 600px) {
    .w-sm-100 {
      width: 100% !important;
    }
  }
</style>

<script>
  $(document).ready(function() {
    var currentYear = new Date().getFullYear();
    var endYear = currentYear + 10;
    var options = "";
    for (var i = currentYear; i <= endYear; i++) {
      var selected = (i.toString().substr(-2) == '{{ old("exp_year") }}') ? 'selected' : '';
      options += "<option value='" + i.toString().substr(-2) + "' " + selected + ">" + i + "</option>";
    }
    $('.selectpicker').append(options);
    $('.selectpicker').selectpicker('refresh');
  });
</script>
@endsection