@extends('layouts.app')

@section('content')
<div class="row py-5 justify-content-center">
    <div class="col-lg-7 col-md-9">
        <div class="card mb-3">
            <div class="card-header fw-bold text-center {{ $smsPackage->campaign_type === 'prosp' ? 'bg-primary color-on-bg-primary' : 'bg-secondary color-on-bg-secondary' }}">
                {{ $smsPackage->campaign_type === 'prosp' ? 'Prospection' : 'Fidélisation' }}
            </div>

            <div class="card-body">
                <div class="card-title">
                    <h5>Récapitulatif</h5>
                </div>

                <div class="card-text">
                    <strong>Vous avez sélectionné le {{$smsPackage->name}} :</strong>
                    <div>{{number_format($smsPackage->volume, 0, ',', ' ') }} SMS à {{number_format($smsPackage->price, 2, ',', ' ') }} € ({{ rtrim(number_format(($smsPackage->getSmsPrice()), 3, ',', ' '),0) }}€/SMS) HT.</div>
                    <div>Soit {{number_format($smsPackage->price + $smsPackage->tax, 2, ',', ' ') }}€ TTC.</div>
                    <div class="js-promocode-exist"></div>
                </div>

                <div id="component-promocode" data-admin-url='{!! env("ADMIN_URL") !!}' data-volume='{!! $smsPackage->volume !!}' data-user='{!! encodePhpJsData(Auth::user()) !!}'></div>

            </div>
        </div>


        <div class="card mb-3">
            <div class="card-body">
                <div class="card-text">
                    @if($smsPackage->campaign_type === 'prosp')
                        Ces crédits sont utilisables uniquement dans le cadre de campagne de prospection par SMS. Les données sont issues de notre base de données propriétaire et vous serviront à trouver de nouveaux clients.
                    @else
                        Ces crédits sont utilisables uniquement dans le cadre de campagne de fidélisation par SMS. Ces numéros vous appartiennent et ces contacts ont accepté de recevoir vos offres.
                    @endif
                </div>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="card-title">
                    <h5>Paiement</h5>
                </div>
                <div id="component-stripe" data-partner='{!! encodePhpJsData($currentPartner) !!}' data-user-name='{!! encodePhpJsData(Auth::user()->name) !!}' data-payment-methods='{!! encodePhpJsData($paymentMethods) !!}' data-sms-package='{!! encodePhpJsData($smsPackage) !!}' data-stripe-key='{{env("STRIPE_KEY")}}'></div>
            </div>
        </div>


    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal-cgv" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Conditions générales de vente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                @include('components.cgv')
            </div>

            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts_before')
    <script src="https://js.stripe.com/v3/"></script>
@endpush