@php
    use Carbon\Carbon;

    $auth = Auth::user();
    $infos = "rien de plus a signaler !";
@endphp

@extends('layouts.site')

@section('styles')


@endsection

@section('page-content')

<!-- ============================ Page Title Start================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/bg2.png)no-repeat;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">

                <h2 class="ipt-title text-light">Checkout</h2>
                <span class="text-light opacity-75">Finaliser vos opérations d'achat ici !</span>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Page Title End ================================== -->



<!-- ============================ Our Story Start ================================== -->
<section>

    <div class="container">


        <div class="row">
            <div class="col-lg-12 col-md-12">
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif
            </div>
        </div>

        @if(empty($auth))
        <!-- row Start -->
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="alert alert-warning text-center" role="alert">
                    Bonjour cher, Avez-vous déjà un compte ?  <a href="#" data-bs-toggle="collapse" data-bs-target="#login-frm">Veuillez vous connecter</a>
                </div>
            </div>

            <div class="col-lg-12 col-md-12">
                <div id="login-frm" class="collapse mb-5">
                    <div class="row">
                        <form method="POST" action="{{ route('login') }}">

                            @csrf

                            <div class="col-lg-4 col-md-4 col-sm-6">
                                <div class="form-group">
                                    <input type="email" class="form-control border" name="email" placeholder="Email">
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-6">
                                <div class="form-group">
                                    <input type="password" class="form-control border" name="password" placeholder="Mot de Passe">
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary full-width">Soumettre</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!-- /row -->
        @endif

        <form id="payment-form" method="POST" action="{{ route('site.validate_checkout') }}">

            @csrf

            <!-- row Start -->
            <div class="row">
                <div class="col-lg-6 col-md-12 col-sm-12">

                    <!-- row -->
                    <div class="row m-0">
                        <div class="submit-page">
                            <div class="row">

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <h3>Détails de facturation</h3>
                                </div>

                                <input type="hidden" name="user_id" value="{{ $auth->id ?? '' }}" />
                                <input type="hidden" name="stripeToken" id="stripeToken">

                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Nom Complet<i class="req">*</i></label>
                                        <input type="text" name="name" value="{{ $auth->name ?? old('name') }}" class="form-control" required>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Email<i class="req">*</i></label>
                                        <input type="email" name="email" value="{{ $auth->email ?? old('email') }}" class="form-control" required>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Téléphone<i class="req">*</i></label>
                                        <input type="phone" name="phone" value="{{ $auth->phone ?? old('phone') }}" class="form-control" required>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Adresse<i class="req">*</i></label>
                                        <input type="text" name="adresse" value="{{ $auth->adresse ?? old('adresse') }}" class="form-control" required>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label>Informations Complémentaires</label>
                                        <textarea id="tinymce" name="infos" class="form-control ht-50">{{ $infos ?? old('infos') }}</textarea>
                                    </div>
                                </div>

                                @if(empty($auth))
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <input id="create_account" class="form-check-input bg-primary" name="create_account" type="checkbox" checked readonly value="1">
                                        <label for="create_account" class="form-check-label">Créer un compte</label>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <small><strong>Note : </strong> En créeant un compte, vous aurez la possibilité de suivre vos commandes aisément !</small>
                                </div>
                                @endif

                            </div>
                        </div>
                    </div>
                    <!--/row -->



                </div>

                <!-- Col-lg 4 -->
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="check-ourio-wrap">
                        <div class="check-ourio-head">
                            <h3>Vos Commandes</h3>
                        </div>
                        <div class="check-ourio-caption">
                            <div class="booking-info-try rounded bg-light-primary border border-warning mb-4">
                                <ul>
                                    @foreach($cartItems as $item)
                                        <li data-product-id="{{ $item->product->id }}">
                                            <h6>
                                                <b class="text-primary">(x{{ $item->quantity }})</b>

                                                &nbsp;

                                                {{ $item->product->libelle }}
                                            </h6>
                                            <span class="text-primary">
                                                {{ $item->product->price * $item->quantity }} XAF
                                            </span>
                                        </li>
                                    @endforeach
                                    <br><br>
                                    <li class="bg-primary">
                                        <h6 class="total-title">TOTAL</h6>
                                        <span class="total-price">
                                            {{ $cartItems->sum(function($item) { return $item->product->price * $item->quantity; }) }} XAF
                                        </span>
                                    </li>
                                </ul>
                            </div>


                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="form-group">
                                    <input type="hidden" name="mode_id" value="2" />
                                    <label>Mode de Paiement</label>
                                    <select class="form-control" name="mode_id" required>
                                        <option value="">Choix du Mode</option>
                                        @foreach($modes as $item)
                                            @if($item->libelle == "Carte Bancaire")
                                            <option value="{{ $item->id }}" selected>
                                                {{ $item->libelle }}
                                            </option>
                                            @else
                                            <option value="{{ $item->id }}">
                                                {{ $item->libelle }}
                                            </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Totla a Payer -->
                            <input type="hidden" name="total" value="{{ $cartItems->sum(function($item) { return $item->product->price * $item->quantity; }) }}">

                            <!-- Vos champs de formulaire ici -->
                            <div id="card-element" class="form-control"></div>
                            <div id="card-errors" role="alert"></div>
                            &nbsp;
                            <button type="submit" id="submitButton" class="btn btn-primary fw-medium full-width">Passer au Paiement</button>
                        </div>
                    </div>
                </div>


                <!-- /col-lg-4 -->


            </div>
            <!-- /row -->

        </form>

    </div>

</section>
<!-- ============================ Our Story End ================================== -->

<!-- ============================ Call To Action ================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/footer-bg-dark.png)no-repeat;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-10 col-md-12 col-sm-12">

                <div class="call-action-wrap">
                    <div class="sec-heading center">
                        <h2 class="lh-base mb-3 text-light">Devenez un Partenaire<br>JOBBO</h2>
                        <p class="fs-6 text-light">Devenez Partenaire de JOBBO et Développez Votre Activité et Profitez d'une Visibilité Accrue, Accédez à
                            Des Opportunités de Qualité et Rejoignez Une Communauté Dynamique de Clients et de Collaborateurs.</p>
                    </div>
                    <div class="call-action-buttons mt-3">
                        <a href="{{ route('site.register_freelance') }}" class="btn btn-lg btn-dark fw-medium px-xl-5 px-lg-4 me-2">Freelance</a>
                        <a href="{{ route('site.register_entreprise') }}" class="btn btn-lg btn-whites fw-medium px-xl-5 px-lg-4 text-primary">Entreprise</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Call To Action End ================================== -->

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->



@endsection