@extends('layouts.master')
@section('title')
    @lang('translation.emitter')
@endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('css')
    <!-- plugin css -->
    <link href="{{ URL::asset('build/libs/jsvectormap/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" />
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.emitter')
        @endslot
        @slot('title')
            Adquisición de timbres
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-end">
                        <div class="col-12 fs-16">
                            {{ $plan->nombre}}
                        </div>
                        <div class="col-12 fs-10">
                            <div class="row">
                                <div class="col-6">
                                    Fecha de compra 
                                </div>
                                <div class="col-6 text-end">
                                    {{ now()->format('d/m/Y') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 fs-14">
                            <div class="row">
                                <div class="col-6">
                                    Timbres adquiridos 
                                </div>
                                <div class="col-6 text-end">
                                    {{ ($plan->timbres_incluidos!=-1)?$plan->timbres_incluidos:'Ilimitado'}}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 fs-14">
                            <div class="row">
                                <div class="col-6">
                                    Precio 
                                </div>
                                <div class="col-6 text-end">
                                    $ {{ number_format($plan->precio,2,'.',',')}}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 fs-14">
                            <div class="row bg-warning text-white p-1">
                                <div class="col-6">
                                    Timbres vigentes hasta 
                                </div>
                                <div class="col-6 text-end">
                                    {{ \Carbon\Carbon::now()->addMonths((int)$plan->duracion_contrato)->format('d/m/Y') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-8 fs-14" >
                            <a href="{{ route('plans.show') }}" class="btn btn-light">
                                <i class="ri-arrow-left-s-line align-bottom me-2"></i> Regresar
                            </a>
                        </div>
                        <div class="col-4 fs-14 text-center">
                            <div class="row">
                                <div class="col-12 p-1 text-align-start">
                                    <h4>Pagar</h4>
                                </div>
                                <div class="col-12 p-1">
                                    <button 
                                        type="button" 
                                        class="btn btn-light float-end"  
                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                        id="s-checkout-button"
                                        title="Pagar ahora con Stripe" style="width: 200px; !important;">
                                        <img src="{{ URL::asset('build/images/stripe-logo.png') }}" alt="Stripe" style="height: 20px; vertical-align: middle;">
                                    </button>                                    
                                </div>
                                <div class="col-12 p-1">
                                    <button
                                        type="button"
                                        class="btn btn-light float-end"
                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                        id="mp-checkout-button"
                                        title="Pagar ahora con Mercado Pago" style="width: 200px; !important;">
                                        <img src="{{ URL::asset('build/images/mercado-pago-logo.png') }}" alt="Mercado Pago" style="height: 20px; vertical-align: middle;">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div> <!-- end row-->

  @endsection
@section('script')

    <script src="https://js.stripe.com/v3/"></script>
    <!-- Swiper Js -->
    <script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/app.js') }}"></script>

    <script>
        // Inicializa todos los tooltips de la página
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })

        // Configuración de Stripe
        const stripe = Stripe('{{ config('services.stripe.key') }}'); // Usamos la clave pública desde la configuración
        const checkoutButton = document.getElementById('s-checkout-button');

        checkoutButton.addEventListener('click', function () {
            fetch('{{ route('payments.checkout', $plan->id) }}')
            .then(response => response.json())
            .then(data => {
                stripe.redirectToCheckout({
                    sessionId: data.sessionId
                });
            })
            .catch(error => console.error('Error:', error));
        });

        // Configuración de Mercado Pago
        const mpCheckoutButton = document.getElementById('mp-checkout-button');
        mpCheckoutButton.addEventListener('click', function () {
            // Lógica para redirigir a Mercado Pago
            fetch('{{ route('payments.mpcheckout', $plan->id) }}')
            .then(response => response.json())
            .then(data => {
                //console.log(data);
                //console.log(data.url);
                window.location.href = data.url;
            })
            .catch(error => console.error('Error:', error));
        });

    </script>

@endsection