@extends('layouts.master')

@section('title', 'Accueil')

@section('content')

    <!-- section start -->
    <section class="layout-pt-xl layout-pb-xs">
        <!-- container start -->
        <div data-anim-wrap class="container">

            <!-- row start -->
            <div class="row">
                <div class="col-xl-9 offset-xl-1 col-lg-11">
                    <div class="sectionHeading -lg">
                        <p class="sectionHeading__subtitle">
                            Etape 1 sur 2
                        </p>
                        <h1 class="sectionHeading__title leading-sm">
                            Caisse
                        </h1>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


    <!-- section start -->
    <section class="layout-pt-xs layout-pb-xs">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row no-gutters justify-content-between">
                <div class="col-lg-12">
                    <div class="section-border-bottom-dark sm:mt-32">

                        @foreach ($productInCart as $product)
                            <!-- row start -->
                            <div class="row no-gutters border-bottom-dark py-20">
                                <div class="col-lg-3 offset-lg-1 col-md-2 offset-md-1">
                                    <p class="text-lg">
                                        Quantité : {{ $product->quantity }}
                                    </p>
                                </div>
                                <div class="col-lg-3 offset-lg-1 col-md-3 offset-md-1">
                                    <p class="text-lg">
                                        {{ $product->product_name }}
                                    </p>
                                </div>

                                <div class="col-lg-3 offset-lg-1 col-md-2 offset-md-1">
                                    <p class="text-lg">
                                        {{ $product->subTotal }} CHF
                                    </p>
                                </div>
                            </div>
                            <!-- row end -->
                        @endforeach

                        <!-- row start -->
                        <div class="row no-gutters border-bottom-dark py-20">
                            <div class="col-lg-3 offset-lg-1 col-md-2 offset-md-1">
                                <p class="text-lg">
                                    &nbsp;
                                </p>
                            </div>
                            <div class="col-lg-3 offset-lg-1 col-md-3 offset-md-1">
                                <p class="text-lg">
                                    Livraison
                                </p>
                            </div>

                            <div class="col-lg-3 offset-lg-1 col-md-2 offset-md-1">
                                <p class="text-lg">
                                    {{ $priceDeliveryDisplay }}
                                </p>
                            </div>
                        </div>
                        <!-- row end -->

                        <!-- row start -->
                        <div class="row no-gutters border-bottom-dark py-20">
                            <div class="col-lg-3 offset-lg-1 col-md-2 offset-md-1">
                                <p class="text-lg">
                                    Total de la commande
                                </p>
                            </div>
                            <div class="col-lg-3 offset-lg-1 col-md-3 offset-md-1">
                                <p class="text-lg">
                                    &nbsp;
                                </p>
                            </div>

                            <div class="col-lg-3 offset-lg-1 col-md-2 offset-md-1">
                                <p class="text-lg">
                                    {{ $totalOrder }} CHF
                                </p>
                            </div>
                        </div>
                        <!-- row end -->
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- section start -->
    <section class="layout-pt-xs layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-7">
                    <div class="sectionHeading -sm">
                        <h2 class="sectionHeading__title">
                            Informations<br />facturation et livraison
                        </h2>
                    </div>
                </div>
                <div class="col-md-auto col-sm-12 sm:mt-24">
                    <a class="button -md -black text-white" href="{{ route('checkout-form-delivery') }}">
                        Livrer à une autre adresse
                    </a>
                </div>

                <div class="col-xl-10 mt-48 sm:mt-32">
                    <div class="contact-form -type-1">
                        <form class="row x-gap-40 y-gap-32 js-ajax-form" method="POST" action="{{ route('order-resume', ['delivery' => '1']) }}"
                            data-message-success="Votre commande à bien été envoyé."
                            data-message-error="Un problème est survenu. Contacter le support <a href='https://sarchitecturer.ch/bureau/contact'>ici</a>.">
                            @csrf
                            <div class="col-lg-12">
                                <p>Titre*</p><br />
                                <select class="js-input-group" id='title' name="title" data-required>
                                    <option value="Madame">Madame</option>
                                    <option value="Monsieur">Monsieur</option>
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Nom*
                                    <input type="text" name="name" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Prénom*
                                    <input type="text" name="firstname" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-12">
                                <label class="js-input-group">
                                    Entreprise
                                    <input type="text" name="company">
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-9">
                                <label class="js-input-group">
                                    Rue*
                                    <input type="text" name="street" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-3">
                                <label class="js-input-group">
                                    N°*
                                    <input type="text" name="num_street" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-12">
                                <label class="js-input-group">
                                    Complément d'adresse
                                    <input type="text" name="complement">
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-3">
                                <label class="js-input-group">
                                    Code postal*
                                    <input type="text" name="postal" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Localité*
                                    <input type="text" name="city" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>
                            <div class="col-lg-3">
                                <label class="js-input-group">
                                    <p>Pays*</p><br />
                                    <select class="js-input-group" id="country" name="country" data-required>
                                        <option value="Suisse">Suisse</option>
                                        <option value="Liechtenstein">Liechtenstein</option>
                                    </select>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Email*
                                    <input type="text" name="email" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Téléphone*
                                    <input type="text" name="phone" data-required>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-12 ajax-form-alert js-ajax-form-alert">
                                <div class="ajax-form-alert__content">
                                </div>
                            </div>

                            <div class="col-12">
                                <button type="submit" class="button -md -black text-white">
                                    Suivant
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

@endsection