@extends('layouts.web')
@section('main')
<div class="breadcrumb-area breadcrumb-img bg-img" data-bg="{{ asset('images/cabeceras/bg_cuenta.jpg') }}">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-wrap">
                    <nav aria-label="breadcrumb">
                        <h3 class="breadcrumb-title">Confirmación de compra</h3>
                        <ul class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="{{ route('index') }}"><i class="fa fa-home"></i></a>
                            </li>
                            <li class="breadcrumb-item"><a
                                    href="{{ isset($sobrepedido) ? route('carrito_sobrepedido') : route('carrito') }}">Carrito</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Confirmación</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- breadcrumb area end -->

<!-- checkout main wrapper start -->
<div class="checkout-page-wrapper section-padding">
    <div class="container">
        <form action="{{ $url }}" method="post" class="form" id="form_confirmacion">
            @csrf
            <div class="row">
                <div class="col-lg-6">
                    <div class="checkout-billing-details-wrap">
                        <h5 class="checkout-title">Datos de envío</h5>
                        <div class="billing-form-wrap">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="nombre">Nombres</label>
                                        <input type="text" id="nombre" readonly
                                            value="{{ Auth::guard('cliente')->user()->nombre }}" />
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="single-input-item">
                                        <label for="l_name">Apellidos</label>
                                        <input type="text" id="l_name" readonly
                                            value="{{ Auth::guard('cliente')->user()->apellido_paterno.' '.Auth::guard('cliente')->user()->apellido_materno }}." />
                                    </div>
                                </div>
                            </div>
                            <div class="single-input-item">
                                <label for="email" class="required">Correo Electrónico</label>
                                <input type="email" id="email" readonly
                                    value="{{ Auth::guard('cliente')->user()->email }}" />
                            </div>
                            <div>
                                <label for="direccion">Dirección de envío</label>
                                @if ($direcciones->count())
                                @foreach ($direcciones as $item)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="direccion"
                                        id="direccion{{ $item->id }}" value="{{ $item->id }}"
                                        {{ $item->id == $direcciones->first()->id ?"checked": "" }}>
                                    <label class="form-check-label" for="direccion{{ $item->id }}">
                                        {{ $item->alias }}
                                    </label>
                                    <span class="{{ $item->id == $direcciones->first()->id ?"d-block": "d-none" }}">
                                        {{ $item->calles }}
                                        {{ $item->numero_exterior ? "Num.".$item->numero_exterior:"" }}.
                                        {{ $item->colonia }},C.P. {{ $item->codigo_postal }}. {{ $item->municipio }},
                                        {{ $item->estado}}.
                                    </span>
                                </div>
                                @endforeach
                                @else
                                <input type="hidden" name="crear_direccion" value="true">
                                <div class="row">
                                    <div class="form-group col-6">
                                        <label for="">Alias</label>
                                        <input type="text" class="form-control" name="alias" id="alias"
                                            placeholder="Ejemplo:casa,oficina,trabajo..." value="">
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="codigo_postal">Código Postal</label>
                                        <input type="text" class="form-control codigo_postal" name="codigo_postal"
                                            id="codigo_postal" data-url="{{ route('codigo_postal') }}" minlength="5"
                                            maxlength="5" value="">
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="estado">Estado</label>
                                        <select name="estado" id="estado" class="form-control">
                                            <option value=""></option>
                                        </select>
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="municipio">Municipio</label>
                                        <select name="municipio" id="municipio" class="form-control">
                                            <option value=""></option>
                                        </select>
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="localidad">Colonia, Localidad, Asentamiento</label>
                                        <select name="localidad" id="localidad" class="form-control">
                                            <option value=""></option>
                                        </select>
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="num_interior">Número Interior</label>
                                        <input type="text" class="form-control" name="num_interior" id="num_interior"
                                            value="">
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="num_exterior">Número Exterior</label>
                                        <input type="text" class="form-control" name="num_exterior" id="num_exterior"
                                            value="">
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-6">
                                        <label for="direccion">Calle o Avenida</label>
                                        <input type="text" name="direccion" id="direccion" class="form-control"
                                            value="">
                                        <span class="invalid-feedback"></span>
                                    </div>
                                    <div class="form-group col-12">
                                        <label for="referencia">Referencias</label>
                                        <textarea name="referencias" id="referencias" cols="30" rows="2"
                                            class="form-control"></textarea>
                                        <span class="invalid-feedback"></span>
                                    </div>
                                </div>
                                @endif
                            </div>
                            <div class="single-input-item">
                                <label for="telefono">Teléfono</label>
                                <input type="text" id="telefono"
                                    value="{{ Auth::guard('cliente')->user()->telefono }}" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="order-summary-details">
                        <h5 class="checkout-title">Descripción del {{ isset($sobrepedido) ? "sobre":"" }}pedido</h5>
                        <div class="order-summary-content">
                            <!-- Order Summary Table -->
                            <div class="order-summary-table table-responsive text-center">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th><b>SubTotal</b></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><a href="product-details.html">Costo del
                                                    {{  isset($sobrepedido) ? "sobre":""  }}pedido</a>
                                            </td>
                                            <td>${{ number_format($subtotal,2,'.',',') }}</td>
                                        </tr>
                                        <tr>
                                            <td><a href="product-details.html">Costo del envio</a>
                                            </td>
                                            <td>${{ number_format($envio,2,'.',',') }}</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td>Total</td>
                                            <td style="background-color: #ff055d;color: white;">
                                                ${{ number_format($total,2,'.',',') }}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <div class="col-12">
                                                    <h3>Método de pago</h3>
                                                    <div class="text-left pt-2">
                                                        <input type="radio" name="pago" value="vaucher" checked
                                                            class="metodo_pago"> Voucher
                                                    </div>
                                                    <div class="text-left">
                                                        <input type="radio" name="pago" value="openpay"
                                                            class="metodo_pago"> Pago con tarjeta(Openpay)
                                                    </div>
                                                    @if ($total < 30000)
                                                    <div class="text-left">
                                                        <input type="radio" name="pago" value="referenciado" class="metodo_pago"> Pago en tienda (Openpay)
                                                    </div>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                        <tr id="tarjeta" class="d-none">
                                            <td colspan="2">
                                                <input type="hidden" name="token_id" id="token_id" />
                                                <fieldset>
                                                    <legend>Datos de la tarjeta</legend>
                                                    <div class="form-group">
                                                        <label id="holder_name">Nombre del titular</label>
                                                        <input type="text" size="20" autocomplete="off"
                                                            data-openpay-card="holder_name" class="form-control"
                                                            id="holder_name" placeholder="Como aparece en la tarjeta" />
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Número de tarjeta</label>
                                                        <input type="text" size="20" autocomplete="off" maxlength="16"
                                                            data-openpay-card="card_number"
                                                            class="form-control only_number" id="card_number" />
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-6">
                                                            <label>Fecha de expiración (MM/YY)</label>
                                                            <div class="row">
                                                                <input type="text" class="form-control col-5 mx-auto"
                                                                    maxlength="2" data-openpay-card="expiration_month"
                                                                    placeholder="Mes" />
                                                                <input type="text" class="form-control col-5 mx-auto"
                                                                    maxlength="2" data-openpay-card="expiration_year"
                                                                    placeholder="Año" />
                                                            </div>
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <label>Código de seguridad</label>
                                                            <input class="form-control" size="4"
                                                                maxlength="4" autocomplete="off"
                                                                data-openpay-card="cvv2" placeholder="" type="password"/>
                                                        </div>
                                                        <div class="form-group col-12">
                                                            <input type="checkbox" name="terminos" id="terminos">
                                                            <a href="{{ route('terminos') }}" target="_blank">Acepto
                                                                Términos y Condiciones</a>
                                                            <span class="invalid-feedback"></span>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                                <div class="form-group row">
                                                    <div class="col-md-6">
                                                        <div class="w-100">Transacciones realizadas via:</div>
                                                        <div class="col-md-10">
                                                            <img src="{{ asset('images/openpay/openpay_color.png') }}"
                                                                class="img-fluid">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <span>Tarjetas de crédito</span>
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/visa.png') }}"
                                                                    class="img-fluid" alt="visa">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/masterCard.png') }}"
                                                                    class="img-fluid" alt="mastercard">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/carnet.png') }}"
                                                                    class="img-fluid" alt="carnet">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/americanExpress.png') }}"
                                                                    alt="american express" class="img-fluid">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <span>Tarjetas de débito</span>
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/hsbc.png') }}"
                                                                    class="img-fluid" alt="hsbc">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/scotiabank.png') }}"
                                                                    class="img-fluid" alt="scotiabank">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/citibanamex.png') }}"
                                                                    class="img-fluid" alt="citibanamex">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/bbva.png') }}"
                                                                    alt="bbva" class="img-fluid">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/santander.png') }}"
                                                                    alt="santander" class="img-fluid">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/ixe.png') }}"
                                                                    alt="ixe" class="img-fluid">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/bancoAzteca.png') }}"
                                                                    alt="bancoAzteca" class="img-fluid">
                                                            </div>
                                                            <div class="col-md-3">
                                                                <img src="{{ asset('images/openpay/inbursa.png') }}"
                                                                    alt="inbursa" class="img-fluid">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr id="tiendas" class="d-none">
                                            <td colspan="2">
                                                <div>Podrás realizar el pago en alguna de las tiendas de conveniencia afiliadas.</div>
                                                <img src="{{ asset('images/openpay/kit_paynet/kit4.png') }}">
                                                <div class="row">
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/7eleven.png') }}" alt="7Eleven">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Asturiano.png') }}" alt="Asturiano">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Bodega-Aurrera.png') }}" alt="Bodega Aurrera">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Circle K.jpg') }}" alt="Circle K">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Extra.png') }}" alt="Extra">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Farmacias del Ahorro.png') }}" alt="Farmacias del Ahorro">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Sams Club.png') }}" alt="Sams Club">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Superama.png') }}" alt="Superama">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Tiendas K.jpg') }}" alt="Tiendas K">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Waldos.png') }}" alt="Waldos">
                                                    </div>
                                                    <div class="col-3 align-items-center d-flex">
                                                        <img src="{{ asset('images/openpay/kit_paynet/Walmart.png') }}" alt="Walmart">
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <div class="d-flex">
                                                    <div class="col-6">
                                                        <a href="{{ isset($sobrepedido) ? route('previo_sobrepedido') : route('previo') }}"
                                                            target="_blank"
                                                            class="btn btn-cart2 btn-cart text-white">Ver detalles del
                                                            pedido</a>
                                                    </div>
                                                    <div class="col-6">
                                                        <button class="btn-cart2 btn-cart submit" id="submit">Confirmar
                                                            Pedido</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
@parent
<script>
    $(document).ready(function () {
        OpenPay.setId('{{ env('OPENPAY_ID') }}');
        OpenPay.setApiKey('{{ env('OPENPAY_PK') }}');
        OpenPay.setSandboxMode(true);
        $(".metodo_pago").change(function () {
            if ($(this).val() == "openpay") {
                $("#tarjeta").removeClass('d-none');
                $("#tiendas").addClass('d-none');
            } else {
                if($(this).val() == "referenciado"){
                    $("#tiendas").removeClass('d-none')
                    $("#tarjeta").addClass('d-none');
                }else{
                    $("#tarjeta").addClass('d-none');
                    $("#tiendas").addClass('d-none');
                }
            }
        });
        var deviceSessionId = OpenPay.deviceData.setup("form_confirmacion", "deviceId");
        $('body').on('click', '#submit', function (event) {
            if($('input:radio[name=pago]:checked').val() == "openpay"){
                event.preventDefault();
                $("#submit").prop("disabled", true);
                OpenPay.token.extractFormAndCreate('form_confirmacion', success_callbak, error_callbak);
            }
        });
        var success_callbak = function (response) {
            var token_id = response.data.id;
            $('#token_id').val(token_id);
            $('#form_confirmacion').submit();
        };
        var error_callbak = function (response) {
            console.log(response);
            var desc = response.data.description != undefined ? response.data.description : response
            .message;
            var translate = "";
            if (response.data.error_code == 1001) {
                switch (desc) {
                    case "holder_name is required, card_number is required, expiration_year expiration_month is required":
                        translate =
                            "{{ __('El nombre del titular es requerido, el número de la tarjeta es requerido, el año y mes de expiración es requerido') }}";
                        break;
                    case "card_number is required, expiration_year expiration_month is required":
                        translate =
                            "{{ __('El número de la tarjeta es requerido, el año y mes de expiración es requerido') }}";
                        break;
                    case "expiration_year expiration_month is required":
                        translate = "{{ __('El año y mes de expiración es requerido') }}";
                        break;
                    case "holder_name is required, expiration_year expiration_month is required":
                        translate =
                            "{{ __('El nombre del titular es requerido, el año y mes de expiración es requerido') }}";
                        break;
                    case "cvv2 length must be 4 digits":
                        translate =
                            "{{ __('El código de seguridad de la tarjeta(CVV2) debe ser de cuatro dígitos') }}"
                        break;
                    case "cvv2 length must be 3 digits":
                        translate =
                            "{{ __('El código de seguridad de la tarjeta(CVV2) debe ser de tres dígitos') }}";
                        break;
                    case "cvv2 must contain only digits":
                        translate =
                            "{{ __('El código de seguridad de la tarjeta(CVV2) solo debe contener dígitos') }}";
                        break;
                    default:
                        translate =
                            "{{ __('El mes de expiración es inválido. El formato debe ser de 01 a 12') }}";
                        break;
                }
            }
            if (response.data.error_code == 2002) {
                translate =
                    "{{ __('La tarjeta con este número ya se encuentra registrada en el cliente') }}";
            }
            if (response.data.error_code == 2003) {
                translate = "{{ __('El cliente con este identificador externo (External ID) ya existe') }}";
            }
            if (response.data.error_code == 2005) {
                translate = "{{ __('La fecha de expiración ya no es vigente') }}";
            }
            if (response.data.error_code == 2006) {
                translate = "{{ _('El código de seguridad de la tarjeta (CVV2) no fue proporcionado') }}"
            }
            Swal.fire({
                type: "error",
                title: "Error",
                text: translate
            })
            $("#submit").prop("disabled", false);
        };

    });

</script>
@endsection