@extends('layouts.app', ['title' => 'Comprar Pin', 'titleIconClass' => 'credit-card'])
@section('content')
    <div class="container" id="buy-wizard">

        @if(isset($transactionStatus))
            <div class="p-3 mt-2 d-flex justify-content-center align-items-center flex-column">
                <p class="mb-0 h3">
                El estado de la transacción es
                <span class="text-{{$messageColor}}">{{$transactionStatus}}</span>
                </p>
                <p class="mb-0 h4">{{$statusMessage}}</p>
                <p class="h5 text-muted">
                <span class="">Concepto: </span>{{$description}}
                </p>
            </div>
        @endif

        <div class="row">
            <div class="col col-md-8 col-lg-6 mx-auto">
            <p>La compra de 1 PIN permite realizar la exploración del potencial de aprendizaje y/o de los campos de talento de 1 niño(a) o joven.</p>
                <!-- <p>La compra de
                @personal 1 pin. @endpersonal
                @institution pines. @endinstitution
                Un pin permite realizar la exploración del potencial de aprehendizaje y de campos de talento para 1 niño(a) o joven.</p> -->

                <div v-show="step=='step1'">
                    <div class="card center" v-show="clientType=='personal'">
                        <div class="card-header bg-dark">
                            <div class="text-center">
                                <h2 class="text-secondary">Antes de realizar la compra tenga en cuenta que la aplicación realiza dos tipos de procesos, según la edad de la (del)niña(o) o joven.</h2>
                            </div>
                        </div>
                        <div class="card-body pb-5">
                            <p>-Proceso tipo A. Para niñas(os) entre los 4 y 7 años. consiste en la exploración del potencial de aprehendizaje.</p>
                            <p>-Proceso tipo B. Para niños(as) y jóvenes de 8 años en adelante, consiste en la exploración del potencial de aprehendizaje y de los campos de talento.</p>

                            <div class="text-center mt-4">
                                <button class="btn btn-primary" @click="nextStepPinA">
                                    <i class="fa fa-arrow-circle-right"></i> Adquirir PIN Proceso tipo A
                                </button>
                            </div>

                            <div class="text-center mt-4">
                            <button class="btn btn-primary" @click="nextStep">
                                    <i class="fa fa-arrow-circle-right"></i> Adquirir PIN Proceso tipo B
                                </button>
                            </div>

                            <back-button :back-function="previousStep"></back-button>
                        </div>

                    </div>

                    <div class="card center" v-show="clientType=='institution'">
                        <div class="card-header bg-dark">
                            <div class="text-center">
                                <h2 class="text-secondary">Antes de realizar la compra tenga en cuenta que la aplicación realiza dos tipos de procesos:</h2>
                            </div>
                        </div>

                        <div class="card-body pb-5">
                            <p>-Proceso tipo A: para niñas(os) entre los 4 y 7 años, consiste en la exploración del potencial de aprehendizaje.</p>
                            <p>-Proceso tipo B. Para niñas(os) y jóvenes de 8 a 17 años, consiste en la exploración del potencial de aprehendizaje y de los campos de talento.</p>

                            <p>Si usted va a adquirir pines de los dos tipos, tendrá dos facturaciones. Indique la cantidad de pines del tipo que desea adquirir primero.<p>
                            <input type="number"
                                   min="1"
                                   class="form-control text-center"
                                   v-model="studentsQuantity"
                                   @blur="calculatePrice"
                                   style="font-size: 2rem">

                            <!-- <div class="form&#45;check mt&#45;4"> -->
                            <!--     <div class="form&#45;check"> -->
                            <!--         <input class="form&#45;check&#45;input" -->
                            <!--                type="checkbox" -->
                            <!--                id="thereAreStudentsOlderThanEight" -->
                            <!--                v&#45;model="thereAreStudentsOlderThanEight"> -->
                            <!--         <label class="form&#45;check&#45;label" for="thereAreStudentsOlderThanEight"> -->
                            <!--             Hay niños/jóvenes de ocho (8) años o mas -->
                            <!--         </label> -->
                            <!--     </div> -->
                            <!-- </div> -->

                            <p> Por favor, realice a continuación el proceso de compra de estos pines. Una vez finalizado podrá realizar la compra de pines del otro tipo, si lo requiere.<p>

                            <div class="text-center mt-5">
                                <button class="btn btn-primary" @click="nextStepPinAInstitucion">
                                    <i class="fa fa-arrow-circle-right"></i> Continuar compra pines Tipo A
                                </button>
                            </div>

                            <div class="text-center mt-4">
                            <button class="btn btn-primary" @click="nextStepInstitucion">
                                    <i class="fa fa-arrow-circle-right"></i> Continuar compra pines Tipo B
                                </button>
                            </div>

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

        <div v-show="step=='step2'">
            <div class="card center" v-show="clientType=='personal'">
                <div class="card-header bg-dark">
                    <div class="text-center">
                        <h2 class="text-secondary">Una vez realizado el proceso de pago por los medios disponibles se enviará una notificación del PIN adquirido a la dirección de
                        correo electrónico registrada por usted</h2>
                    </div>
                </div>

                <div class="card-body pb-5">
                    <!-- <div>
                        <p>Una vez realizado el proceso de pago por los medios disponibles se enviará al correo electrónico registrado por usted una notificación del PIN correspondiente a su compra.</p>
                    </div> -->

                    <div class="text-center mt-5">
                        <p> Valor del Pin:
                            <h2 class="my-0 py-0" style="line-height: 0.5">
                                @money($personalPricePlan->value)
                            </h2>
                        </p>
                    </div>

                    <form action="{{route('invoices.pay')}}" method="post">
                        @csrf

                        <div class="custom-control text-center custom-control-alternative custom-checkbox mt-3">
                            <input class="custom-control-input" name="terms_conditions" id="terms_conditions" type="checkbox" checked required>
                            <label class="custom-control-label" for="terms_conditions">
                                <span class="text-muted">
                                    <small>
                                        Al realizar esta compra estoy aceptando los
                                        <a href="javascript:void(0)"
                                           data-toggle="modal"
                                           data-target=".terms-conditions-modal">
                                            Términos y Condiciones
                                        </a>
                                    </small>
                                </span>
                            </label>
                        </div>
                        
                        <input type="hidden" name="typePin" value="2">
                        <input type="hidden" name="name" value="{{auth()->user()->name}}">
                        <input type="hidden" name="email" value="{{auth()->user()->email}}">
                        <input type="hidden" name="plan_id" value="{{auth()->user()->client->plan_id}}">
                        <input type="hidden" name="pinsQuantity" value="1">

                        <div class="text-center mt-5">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-credit-card"></i> Proceder al pago
                            </button>
                        </div>
                    </form>

                    <back-button :back-function="previousStep"></back-button>
                </div>
            </div>

            <div class="card center" v-show="clientType=='institution'">
                <div class="card-header bg-dark">
                    <div class="text-center">
                        <h2 class="text-secondary">VERIFIQUE SU INFORMACIÓN DE PAGO</h2>
                    </div>
                </div>
                <div class="card-body pb-5">
                    <div>
                    <p>Usted va a adquirir  @{{studentsQuantity}}  pines tipo B. Si está de acuerdo, continúe con el proceso</p>
                    </div>

                    <div class="text-center mt-4">
                        <button class="btn btn-primary" @click="nextStep">
                            <i class="fa fa-arrow-circle-right"></i> Información de pago
                        </button>
                    </div>


                    <back-button :back-function="previousStep"></back-button>
                </div>
            </div>
        </div>

        <div v-show="step=='step2PinA'">
            <div class="card center" v-show="clientType=='personal'">
                <div class="card-header bg-dark">
                    <div class="text-center">
                        <h2 class="text-secondary">Una vez realizado el proceso de pago por los medios disponibles se enviará una notificación del PIN adquirido a la dirección de
                        correo electrónico registrada por usted</h2>
                    </div>
                </div>

                <div class="card-body pb-5">
                    <!-- <div>
                        <p>Una vez realizado el proceso de pago por los medios disponibles se enviará al correo electrónico registrado por usted una notificación del PIN correspondiente a su compra.</p>
                    </div> -->

                    <div class="text-center mt-5">
                        <p> Valor del Pin:
                            <h2 class="my-0 py-0" style="line-height: 0.5">
                            @money($personalPricePlanA->value)
                            </h2>
                        </p>
                    </div>

                    <form action="{{route('invoices.pay')}}" method="post">
                        @csrf

                        <div class="custom-control text-center custom-control-alternative custom-checkbox mt-3">
                            <input class="custom-control-input" name="terms_conditions" id="terms_conditions" type="checkbox" checked required>
                            <label class="custom-control-label" for="terms_conditions">
                                <span class="text-muted">
                                    <small>
                                        Al realizar esta compra estoy aceptando los
                                        <a href="javascript:void(0)"
                                           data-toggle="modal"
                                           data-target=".terms-conditions-modal">
                                            Términos y Condiciones
                                        </a>
                                    </small>
                                </span>
                            </label>
                        </div>
                        
                        <input type="hidden" name="typePin" value="1">
                        <input type="hidden" name="name" value="{{auth()->user()->name}}">
                        <input type="hidden" name="email" value="{{auth()->user()->email}}">
                        <input type="hidden" name="plan_id" value="{{auth()->user()->client->plan_id}}">
                        <input type="hidden" name="pinsQuantity" value="1">

                        <div class="text-center mt-5">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-credit-card"></i> Proceder al pago
                            </button>
                        </div>
                    </form>

                    <back-button :back-function="previousStepPinA"></back-button>
                </div>
            </div>

            <div class="card center" v-show="clientType=='institution'">
                <div class="card-header bg-dark">
                    <div class="text-center">
                        <h2 class="text-secondary">VERIFIQUE SU INFORMACIÓN DE PAGO</h2>
                    </div>
                </div>
                <div class="card-body pb-5">
                    <div>
                        <p>Usted va a adquirir  @{{studentsQuantity}}  pines tipo A. Si está de acuerdo, continúe con el proceso</p>
                    </div>

                    

                    <div class="text-center mt-4">
                        <button class="btn btn-primary" @click="nextStepPinA">
                            <i class="fa fa-arrow-circle-right"></i> Información de pago
                        </button>
                    </div>


                    <back-button :back-function="previousStepPinA"></back-button>
                </div>
            </div>
        </div>

        <div v-show="step=='step3'">
            <div class="card center" v-show="clientType=='personal'">
                <!-- nada -->
            </div>

            <div class="card center" v-show="clientType=='institution'">
                <div class="card-header bg-dark">
                    <div class="text-center">
                        <h2 class="text-secondary">Información de pago</h2>
                    </div>
                </div>
                <div class="card-body pb-5">
                    <div>
                        <p>Una vez realizado el proceso de pago por los medios disponibles se enviará al correo electrónico registrado por usted una notificación del los PINES correspondientes a su compra.</p>
                    </div>

                    <div class="text-center mt-5">
                        <p> Valor del Pin:
                            <strong class="my-0 py-0" style="line-height: 0.5">
                                @money($institutionPricePlan->value)
                            </strong>
                        </p>

                        <div class="row justify-content-center mt-2">
                            <div class="col-auto">
                                <table class="table table-responsive">
                                    <tr>
                                        <th class="text-uppercase text-left">Pines</th>
                                        <th class="text-dark text-right"><span>@{{studentsQuantity}}</span></th>
                                    </tr>
                                    <tr>
                                        <th class="text-uppercase text-left">Valor</th>
                                        <th class="text-dark text-right"><span>$@{{priceNoDiscount}}</span></th>
                                    </tr>
                                    <tr>
                                        <th  class="text-uppercase text-left">Descuento <span>@{{percentageDiscount}}%</span></th>
                                        <th class="text-dark text-right"><span>$@{{discount}}</span></th>
                                        </th>
                                        <tr class="border-bottom">
                                            <th class="text-uppercase text-left"><h3>Total</h3></th>
                                            <th scope="row" class="text-dark text-right">
                                                <h3 class="text-dark">$@{{totalPrice | number}}</h3>
                                            </th>
                                        </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <form action="{{route('invoices.pay')}}" method="post">
                        @csrf

                        <div class="custom-control text-center custom-control-alternative custom-checkbox mt-3">
                            <input class="custom-control-input" name="terms_conditions" id="terms_conditions" type="checkbox" checked required>
                            <label class="custom-control-label" for="terms_conditions">
                                <span class="text-muted">
                                    <small>
                                        Al realizar esta compra estoy aceptando los
                                        <a href="javascript:void(0)"
                                           data-toggle="modal"
                                           data-target=".terms-conditions-modal">
                                            Términos y Condiciones
                                        </a>
                                    </small>
                                </span>
                            </label>
                        </div>
                        
                        <input type="hidden" name="typePin" value="2">
                        <input type="hidden" name="name" value="{{auth()->user()->name}}">
                        <input type="hidden" name="email" value="{{auth()->user()->email}}">
                        <input type="hidden" name="plan_id" value="{{auth()->user()->client->plan_id}}">
                        <input type="hidden" name="pinsQuantity" :value="studentsQuantity">

                        <div class="text-center mt-5">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-credit-card"></i> Proceder al pago
                            </button>
                        </div>
                    </form>

                    <back-button :back-function="previousStep"></back-button>
                </div>
            </div>
        </div>


        <div v-show="step=='step3PinA'">
            <div class="card center" v-show="clientType=='personal'">
                <!-- nada -->
            </div>

            <div class="card center" v-show="clientType=='institution'">
                <div class="card-header bg-dark">
                    <div class="text-center">
                        <h2 class="text-secondary">Información de pago</h2>
                    </div>
                </div>
                <div class="card-body pb-5">
                    <div>
                        <p>Una vez realizado el proceso de pago por los medios disponibles se enviará al correo electrónico registrado por usted una notificación del los PINES correspondientes a su compra.</p>
                    </div>

                    <div class="text-center mt-5">
                        <p> Valor del Pin:
                            <strong class="my-0 py-0" style="line-height: 0.5">
                            @money($institutionPricePlanA ->value)
                            </strong>
                        </p>

                        <div class="row justify-content-center mt-2">
                            <div class="col-auto">
                                <table class="table table-responsive">
                                    <tr>
                                        <th class="text-uppercase text-left">Pines</th>
                                        <th class="text-dark text-right"><span>@{{studentsQuantity}}</span></th>
                                    </tr>
                                    <tr>
                                        <th class="text-uppercase text-left">Valor</th>
                                        <th class="text-dark text-right"><span>$@{{priceNoDiscount}}</span></th>
                                    </tr>
                                    <tr>
                                        <th  class="text-uppercase text-left">Descuento <span>@{{percentageDiscount}}%</span></th>
                                        <th class="text-dark text-right"><span>$@{{discount}}</span></th>
                                        </th>
                                        <tr class="border-bottom">
                                            <th class="text-uppercase text-left"><h3>Total</h3></th>
                                            <th scope="row" class="text-dark text-right">
                                                <h3 class="text-dark">$@{{totalPrice | number}}</h3>
                                            </th>
                                        </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <form action="{{route('invoices.pay')}}" method="post">
                        @csrf

                        <div class="custom-control text-center custom-control-alternative custom-checkbox mt-3">
                            <input class="custom-control-input" name="terms_conditions" id="terms_conditions" type="checkbox" checked required>
                            <label class="custom-control-label" for="terms_conditions">
                                <span class="text-muted">
                                    <small>
                                        Al realizar esta compra estoy aceptando los
                                        <a href="javascript:void(0)"
                                           data-toggle="modal"
                                           data-target=".terms-conditions-modal">
                                            Términos y Condiciones
                                        </a>
                                    </small>
                                </span>
                            </label>
                        </div>

                        <input type="hidden" name="typePin" value="1">
                        <input type="hidden" name="name" value="{{auth()->user()->name}}">
                        <input type="hidden" name="email" value="{{auth()->user()->email}}">
                        <input type="hidden" name="plan_id" value="{{auth()->user()->client->plan_id}}">
                        <input type="hidden" name="pinsQuantity" :value="studentsQuantity">

                        <div class="text-center mt-5">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-credit-card"></i> Proceder al pago
                            </button>
                        </div>
                    </form>

                    <back-button :back-function="previousStepPinA"></back-button>
                </div>
            </div>
        </div>


    </div>

    <div class="modal fade terms-conditions-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Términos y condiciones</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-3 w-100" style="height:70vh; overflow: scroll">
                        <pre>{{setting('pin_purchase_contract_text')}}</pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
           </div>
        </div>
    </div>
@endsection
@if(!auth()->user()->invoicePaid)
    @push('js')
        <script>
            $('#sidenav-main').css('display', 'none')
            $('.main-content').css('margin-left', '0')
        </script>
    @endpush
@endif
@push('js')
    <script>
        Vue.component('back-button', {
            props: ['backFunction'],
            template: `
                <button class="btn btn-outline-primary rounded-circle"
                        style="position:absolute; bottom:3px; left:3px; padding: 0.5em 1em;"
                        title="Volver al paso anterior"
                        @click="backFunction">
                    <i class="fa fa-arrow-left"></i>
                </button>
            `,
        })

        new Vue({
            el: '#buy-wizard',
            data() {
                return {
                    step: 'step1',
                    clientType: @json(auth()->user()->clientTypeName),
                    studentsQuantity: 100,
                    thereAreStudentsOlderThanEight: false,
                    totalPrice: 0,
                    priceNoDiscount: 0,
                    percentageDiscount: 0,
                    discount: 0,
                    typepinId: 0,
                }
            },
            methods: {
                nextStep() {
                    this.typepinId  = 2; 
                    if(this.step == 'step3') this.step = 'step4';
                    if(this.step == 'step2') this.step = 'step3';
                    if(this.step == 'step1') {
                        this.step = 'step2';
                    }
                    
                },
                nextStepPinA() {
                    this.typepinId  = 1;
                    if(this.step == 'step3PinA') this.step = 'step4';
                    if(this.step == 'step2PinA') this.step = 'step3PinA';
                    if(this.step == 'step1') {
                        this.step = 'step2PinA'; ; 
                    };
                     
                },
                nextStepInstitucion() {
                    this.typepinId  = 2; 
                    if(this.step == 'step3') this.step = 'step4';
                    if(this.step == 'step2') this.step = 'step3';
                    if(this.step == 'step1') {
                        this.step = 'step2';
                        this.calculatePrice(); 
                    }
                    
                },
                nextStepPinAInstitucion() {
                    this.typepinId  = 1;
                    if(this.step == 'step3PinA') this.step = 'step4';
                    if(this.step == 'step2PinA') this.step = 'step3PinA';
                    if(this.step == 'step1') {
                        this.step = 'step2PinA'; 
                        this.calculatePrice(); 
                    };
                     
                },
                previousStepPinA() {
                    if(this.step == 'step2PinA') this.step = 'step1';
                    if(this.step == 'step3PinA') this.step = 'step2PinA';
                    if(this.step == 'step4') this.step = 'step3PinA'; 
                },
                previousStep() {
                    if(this.step == 'step2') this.step = 'step1';
                    if(this.step == 'step3') this.step = 'step2';
                    if(this.step == 'step4') this.step = 'step3';
                },
                setClienType(clientType) {
                    this.clientType = clientType
                    this.nextStep()
                },
                calculatePrice() {
                    axios.get('/api/buy/calculate-price', {
                        params: {
                            plans_id: @json(auth()->user()->client->plan_id),
                            number_pines: this.studentsQuantity,
                            type_pin_id: this.typepinId, 
                        }
                    }).then(data => {
                        this.totalPrice = data.data.total;
                        this.priceNoDiscount = data.data.value;
                        this.percentageDiscount = data.data.percentage;
                        this.discount = data.data.discount;
                    }).catch(err => {
                        alert('Error al calcular el precio de los pines')
                        console.log(err.response)
                    });

                },
            },
            
            mounted() {
                if(this.clientType == 'institution') {
                    this.calculatePrice()
                }
            }
        })
    </script>
@endpush