@extends('layout')

@section('title', 'Cart')
@section('description', 'Paiement PayPal & Venmo')

@section('content')

<div class="breadcrumb-area mb-50">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="breadcrumb-container">
                    <ul>
                        <li><a href="{{route('accueil')}}"><i class="fa fa-home"></i> {{ __('messages.acc') }}</a></li>
                        <li><a href="{{route('cart')}}">{{ __('messages.pan') }}</a></li>
                        <li><a href="{{route('choose_payment',['id'=>$idcmde])}}">{{ __('messages.pm') }}</a></li>
                        <li class="active" >{{ __('messages.pap') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="single-product-content">
    <div class="container bg-white mb-50" style="max-width: 1100px !important;">
        @php
            $idcli = session('client')->id ?? null;
            $commande = DB::table('commande')->where('id', $idcmde)->first();
            $montant = $commande->montant ?? 0;
        @endphp


        <div class="row p-5">
            <!-- Colonne 1 : Montant -->
            <div class="col-12 col-md-6 pt-5">
                <div class="card custom-card p-4">
                    <img src="{{ asset('assets/images/pa.jpg') }}" alt="Paiement" class="img-fluid" style="height: 150px !important;">
                </div>
            </div>

            <!-- Colonne 2 : Méthode de paiement -->
            <div class="col-12 col-md-6">
                <div class="card custom-card p-4">
                    <div class="login-form">
                        <form id="payment-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-12 col-12 mb-15">
                                    <label for="amount"> {{ __('messages.amo') }} (USD) : <font color="red">*</font></label>
                                    <input type="number" name="price" id="price" value="{{ $montant }}" required class="form-control" readonly>
                                    <input type="text" type="hidden" id="idclient" value="{{ $idcli }}" hidden>
                                    <input type="text" type="hidden" id="idcommande" value="{{ $idcmde }}" hidden>
                                </div>
								

                                <div id="paypal-button-container" class="mt-3"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@push('scripts')

<script src="https://www.paypal.com/sdk/js?client-id={{ config('paypal.sandbox.client_id') }}&currency=USD&enable-funding=venmo,card"></script>

<style>
    .card.custom-card {
        border: 2px solid lightblue;
        box-shadow: 0 4px 12px rgba(173, 216, 230, 0.5);
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .card.custom-card:hover {
        box-shadow: 0 6px 18px rgba(173, 216, 230, 0.7);
        transform: translateY(-5px);
    }

    .card.custom-card img {
        max-width: 100% !important;
        height: auto;
    }

    @media (max-width: 767px) {
        .p-5 {
            padding: 2rem !important;
        }

        .col-12 {
            margin-bottom: 1rem;
        }
    }
</style>

<script>
    paypal.Buttons({
        createOrder: function (data, actions) {
            const price = document.getElementById('price').value;

            return actions.order.create({
                purchase_units: [{
                    amount: {
                        currency_code: "USD",
                        value: price
                    }
                }]
            });
        },
        onApprove: function (data, actions) {
            return actions.order.capture().then(function (details) {
                // Envoyer les infos au serveur Laravel
                fetch("{{ route('paypal.storeTransaction') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value
                    },
                    body: JSON.stringify({
                        order_id: data.orderID,
                        payer_id: data.payerID,
                        idclient: document.getElementById('idclient').value,
                        idcommande: document.getElementById('idcommande').value,
                        amount: document.getElementById('price').value,
                        payer_name: details.payer.name.given_name + ' ' + details.payer.name.surname,
                        payer_email: details.payer.email_address,
                        status: details.status
                    })
					
                }).then(() => {
                    window.location.href = "{{ route('merci', ['id' => $idcmde]) }}?success=1";
                });
            });
        }
    }).render('#paypal-button-container');
</script>

@endpush

@endsection
