@extends('layouts.app')

@section('custom_style')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('recaptcha.key') }}" async defer></script>
    <script type="text/javascript" src="https://js.openpay.mx/openpay.v1.min.js"></script>
    <script type='text/javascript' src="https://js.openpay.mx/openpay-data.v1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            OpenPay.setId("{{ config('openpay.merchant_id') }}");
            OpenPay.setApiKey("{{ config('openpay.public_key') }}");
            OpenPay.setSandboxMode({{ config('openpay.production') == true ? 'false' : 'true' }});
            var deviceSessionId = OpenPay.deviceData.setup(
                "purchasesForm",
                "deviceIdHiddenFieldName");
        });
    </script>

    <style>
        .shipping-logo {
            width: 50px;
            height: auto;
            margin-right: 8px;
        }
    </style>
@endsection

@section('content')
    <div class="container mt-4">
        <div class="row text-center">
            <div class="col-12">
                <h2 class="custom-text-color">Finalizar compra</h2>
                <p>Comprueba tus datos o rellena estos formularios para continuar con el pago</p>
            </div>
        </div>

        <form action="{{ Route('validatingPurchase') }}" method="post" enctype="multipart/form-data" id="purchasesForm">
            @csrf
            <div class="row mt-3">
                <div class="col-sm-12 col-lg-8">
                    {{-- User data form --}}
                    <div class="form-group">
                        <h4 class="custom-text-color">Tus datos</h4>
                    </div>
                    <div class="form-group mt-2">
                        @auth
                            <label for="email">Tu correo electronico:</label>
                            <input type="email" class="form-control" value="{{ $user->email ?? '' }}" disabled>
                        @endauth
                        @guest
                            <input type="hidden" name="guest" id="guest">
                            <div class="form-group mt-2">
                                <label for="email" class="">Correo
                                    electrónico: </label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                                    name="email" value="{{ old('email') }}" placeholder="Ingresa tu correo" minlength="3"
                                    maxlength="50" required>
                                @if ($errors->has('email'))
                                    <span class="text-danger">{{ $errors->first('email') }}</span>
                                @endif

                            </div>
                        @endguest
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group mt-2">
                                <label for="first_name">Nombre:</label>
                                <input type="text" class="form-control @error('first_name') is-invalid @enderror"
                                    id="first_name" name="first_name" placeholder="Ingresa tu nombre"
                                    value="{{ $user->first_name ?? old('first_name') }}" minlength="3" maxlength="50"
                                    pattern="^\S.*">
                                <span id="error-first_name" class="text-danger"></span>
                                @if ($errors->has('first_name'))
                                    <span class="text-danger">{{ $errors->first('first_name') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mt-2">
                                <label for="last_name">Apellidos:</label>
                                <input type="text" class="form-control @error('last_name') is-invalid @enderror"
                                    id="last_name" name="last_name" placeholder="Ingresa tus apellidos"
                                    value="{{ $user->last_name ?? old('last_name') }}" minlength="3" maxlength="50"
                                    pattern="^\S.*">
                                <span id="error-last_name" class="text-danger"></span>
                                @if ($errors->has('last_name'))
                                    <span class="text-danger">{{ $errors->first('last_name') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="form-group mt-2">
                        <label for="phone_number">Numero telefonico:</label>
                        <input type="text" step="1"
                            class="form-control @error('phone_number') is-invalid @enderror" id="phone_number"
                            name="phone_number" placeholder="Ingresa tu telefono"
                            value="{{ $user->phone_number ?? old('phone_number') }}" minlength="3" maxlength="15"
                            pattern="[0-9]*">
                        <span id="error-phone_number" class="text-danger"></span>
                        @if ($errors->has('phone_number'))
                            <span class="text-danger">{{ $errors->first('phone_number') }}</span>
                        @endif
                    </div>

                    {{-- Addresses form --}}
                    <div class="form-group mt-3">
                        <h4 class="custom-text-color">Tu dirección de facturación</h4>
                    </div>
                    <div class="form-group mt-2">
                        <label for="business_name">Raz&oacute;n social (opcional):</label>
                        <input type="text" class="form-control @error('business_name') is-invalid @enderror"
                            id="business_name" name="business_name" placeholder="Ingresa la razón social"
                            value="{{ $address->business_name ?? old('business_name') }}" minlength="3" maxlength="100"
                            pattern="^\S.*">
                        <span id="error-business_name" class="text-danger"></span>
                        @if ($errors->has('business_name'))
                            <span class="text-danger">{{ $errors->first('business_name') }}</span>
                        @endif
                    </div>

                    <div class="form-group mt-2">
                        <label for="name">RFC (opcional):</label>
                        <input type="text" class="form-control @error('rfc') is-invalid @enderror" id="rfc"
                            name="rfc" placeholder="Ingresa el RFC" value="{{ $address->rfc ?? old('rfc') }}"
                            pattern="^\S.*">
                        <span id="error-rfc" class="text-danger"></span>
                        @if ($errors->has('rfc'))
                            <span class="text-danger">{{ $errors->first('rfc') }}</span>
                        @endif
                    </div>

                    <div class="row mt-2">
                        <div class="col-sm-12 col-lg-8">
                            <div class="form-group">
                                <label for="address">Direcci&oacute;n:</label>
                                <input type="text" class="form-control @error('address') is-invalid @enderror"
                                    id="address" name="address" placeholder="Ingresa la direccion"
                                    value="{{ $address->address ?? old('address') }}" minlength="3" maxlength="100"
                                    pattern="^\S.*" required>
                                <span id="error-address" class="text-danger"></span>
                                @if ($errors->has('address'))
                                    <span class="text-danger">{{ $errors->first('address') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col">
                                        <label for="number_address">Numero:</label>
                                        <input type="number" step="1"
                                            class="form-control @error('number_address') is-invalid @enderror"
                                            id="number_address" name="number_address" placeholder="#"
                                            value="{{ $address->number_address ?? old('number_address') }}" required>
                                        <span id="error-number_address" class="text-danger"></span>
                                        @if ($errors->has('number_address'))
                                            <span class="text-danger">{{ $errors->first('number_address') }}</span>
                                        @endif
                                    </div>
                                    <div class="col">
                                        <label for="interior_number">Interior:</label>
                                        <input type="number" step="1"
                                            class="form-control @error('interior_number') is-invalid @enderror"
                                            id="interior_number" name="interior_number" placeholder="Int."
                                            value="{{ $address->interior_number ?? old('interior_number') }}">
                                        <span id="error-interior_number" class="text-danger"></span>
                                        @if ($errors->has('interior_number'))
                                            <span class="text-danger">{{ $errors->first('interior_number') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-sm-12 col-lg-3">
                            <div class="form-group">
                                <label for="city">Municipio:</label>
                                <input type="text" class="form-control @error('city') is-invalid @enderror"
                                    id="city" name="city" placeholder="Ingresa la ciudad"
                                    value="{{ $address->city ?? old('city') }}" minlength="3" maxlength="30"
                                    pattern="^\S.*" required>
                                <span id="error-city" class="text-danger"></span>
                                @if ($errors->has('city'))
                                    <span class="text-danger">{{ $errors->first('city') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-3">
                            <div class="form-group">
                                <label for="state">Estado:</label>
                                <select class="form-control @error('state') is-invalid @enderror" id="state"
                                    name="state" placeholder="Ingresa el estado" required>
                                    <option value="" disabled @selected(old('state', $address->state ?? '') == '')>
                                        Selecciona una opción
                                    </option>

                                    @foreach (config('states') as $code => $name)
                                        <option value="{{ $code }}" @selected(old('state', $address->state ?? '') == $code)>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="error-state" class="text-danger" style="display: none;"></span>
                                @if ($errors->has('state'))
                                    <span class="text-danger">{{ $errors->first('state') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-3">
                            <div class="form-group">
                                <label for="colony">Colonia:</label>
                                <input type="text" class="form-control @error('colony') is-invalid @enderror"
                                    id="colony" name="colony" placeholder="Ingresa el codigo postal"
                                    value="{{ $address->colony ?? old('colony') }}" required>
                                <span id="error-colony" class="text-danger"></span>
                                @if ($errors->has('colony'))
                                    <span class="text-danger">{{ $errors->first('colony') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-3">
                            <div class="form-group">
                                <label for="postcode">Código postal:</label>
                                <input type="number" step="1"
                                    class="form-control @error('postcode') is-invalid @enderror" id="postcode"
                                    name="postcode" placeholder="Ingresa el codigo postal"
                                    value="{{ $address->postcode ?? old('postcode') }}" required>
                                <span id="error-postcode" class="text-danger"></span>
                                @if ($errors->has('postcode'))
                                    <span class="text-danger">{{ $errors->first('postcode') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="form-group mt-2">
                        <label for="references">Referencias del domicilio:</label>
                        <input type="text" class="form-control @error('references') is-invalid @enderror"
                            id="references" name="references"
                            placeholder="Referencias para facilitar la entrega de tu pedido"
                            value="{{ $address->references ?? old('references') }}" minlength="3" maxlength="100"
                            pattern="^\S.*">
                        <span id="error-references" class="text-danger"></span>
                        @if ($errors->has('references'))
                            <span class="text-danger">{{ $errors->first('references') }}</span>
                        @endif
                    </div>

                    <div class="form-group mt-2">
                        <label for="cfdi">Uso del CFDI (opcional):</label>
                        <input type="text" class="form-control @error('cfdi') is-invalid @enderror" id="cfdi"
                            name="cfdi" placeholder="Ingresa el CFDI" value="{{ $address->cfdi ?? old('cfdi') }}"
                            minlength="3" maxlength="100" pattern="^\S.*">
                        <span id="error-cfdi" class="text-danger"></span>
                        @if ($errors->has('cfdi'))
                            <span class="text-danger">{{ $errors->first('cfdi') }}</span>
                        @endif
                    </div>

                    {{-- Extra address --}}
                    <div class="form-check mt-4">
                        <input class="form-check-input" type="checkbox" name="extra" value="extra"
                            id="checkExtraDirection" @if ($extraAddress) checked @endif>
                        <label class="form-check-label" for="checkExtraDirection">
                            ¿Enviar a una dirección diferente?
                        </label>
                    </div>

                    <div id="extraDirection"
                        style="display: @if ($extraAddress) block @else none @endif;">
                        <div class="row mt-2">
                            <div class="col-sm-6 col-lg-8">
                                <div class="form-group">
                                    <label for="extra_address">Direcci&oacute;n:</label>
                                    <input type="text"
                                        class="form-control @error('extra_address') is-invalid @enderror"
                                        id="extra_address" name="extra_address" placeholder="Ingresa la direccion"
                                        value="{{ $extraAddress->address ?? old('extra_address') }}" minlength="3"
                                        maxlength="100" pattern="^\S.*">
                                    <span id="error-extra_address" class="text-danger"></span>
                                    @if ($errors->has('extra_address'))
                                        <span class="text-danger">{{ $errors->first('extra_address') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col">
                                            <label for="extra_number_address">Numero:</label>
                                            <input type="number" step="1"
                                                class="form-control @error('extra_number_address') is-invalid @enderror"
                                                id="extra_number_address" name="extra_number_address" placeholder="#"
                                                value="{{ $extraAddress->number_address ?? old('extra_number_address') }}">
                                            <span id="error-extra_number_address" class="text-danger"></span>
                                            @if ($errors->has('extra_number_address'))
                                                <span
                                                    class="text-danger">{{ $errors->first('extra_number_address') }}</span>
                                            @endif
                                        </div>
                                        <div class="col">
                                            <label for="extra_interior_number">Interior:</label>
                                            <input type="number" step="1"
                                                class="form-control @error('extra_interior_number') is-invalid @enderror"
                                                id="extra_interior_number" name="extra_interior_number"
                                                placeholder="Int."
                                                value="{{ $address->interior_number ?? old('extra_interior_number') }}">
                                            <span id="error-extra_interior_number" class="text-danger"></span>
                                            @if ($errors->has('extra_interior_number'))
                                                <span
                                                    class="text-danger">{{ $errors->first('extra_interior_number') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-sm-12 col-lg-3">
                                <div class="form-group">
                                    <label for="extra_city">Municipio:</label>
                                    <input type="text" class="form-control @error('extra_city') is-invalid @enderror"
                                        id="extra_city" name="extra_city" placeholder="Ingresa la ciudad"
                                        value="{{ $extraAddress->city ?? old('extra_city') }}" minlength="3"
                                        maxlength="30" pattern="^\S.*">
                                    <span id="error-extra_city" class="text-danger"></span>
                                    @if ($errors->has('extra_city'))
                                        <span class="text-danger">{{ $errors->first('extra_city') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <div class="form-group">
                                    <label for="extra_state">Estado:</label>
                                    <select class="form-control @error('state') is-invalid @enderror" id="extra_state"
                                        name="extra_state" placeholder="Ingresa el estado"
                                        value="{{ $extraAddress->state ?? old('extra_state') }}">
                                        <option value="" disabled @selected(old('extra_state', $extraAddress->state ?? '') == '')>
                                            Selecciona una opción
                                        </option>

                                        @foreach (config('states') as $code => $name)
                                            <option value="{{ $code }}" @selected(old('extra_state', $extraAddress->state ?? '') == $code)>
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span id="error-extra_state" class="text-danger" style="display: none;"></span>
                                    @if ($errors->has('extra_state'))
                                        <span class="text-danger">{{ $errors->first('extra_state') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <div class="form-group">
                                    <label for="extra_colony">Colonia:</label>
                                    <input type="text"
                                        class="form-control @error('extra_colony') is-invalid @enderror"
                                        id="extra_colony" name="extra_colony" placeholder="Ingresa el codigo postal"
                                        value="{{ $extraAddress->colony ?? old('extra_colony') }}" required>
                                    <span id="error-extra_colony" class="text-danger"></span>
                                    @if ($errors->has('extra_colony'))
                                        <span class="text-danger">{{ $errors->first('extra_colony') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <div class="form-group">
                                    <label for="extra_postcode">C&oacute;digo postal:</label>
                                    <input type="number" step="1"
                                        class="form-control @error('extra_postcode') is-invalid @enderror"
                                        id="extra_postcode" name="extra_postcode" placeholder="Ingresa el codigo postal"
                                        value="{{ $extraAddress->postcode ?? old('extra_postcode') }}">
                                    <span id="error-extra_postcode" class="text-danger"></span>
                                    @if ($errors->has('extra_postcode'))
                                        <span class="text-danger">{{ $errors->first('extra_postcode') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-2">
                            <label for="extra_references">Referencias del domicilio:</label>
                            <input type="text" class="form-control @error('extra_references') is-invalid @enderror"
                                id="extra_references" name="extra_references"
                                placeholder="Referencias para facilitar la entrega de tu pedido"
                                value="{{ $extraAddress->references ?? old('extra_references') }}" minlength="3" maxlength="100"
                                pattern="^\S.*">
                            <span id="error-extra_references" class="text-danger"></span>
                            @if ($errors->has('extra_references'))
                                <span class="text-danger">{{ $errors->first('extra_references') }}</span>
                            @endif
                        </div>
                    </div>

                    <div class="mt-3">
                        <label for="aditional_notes" class="form-label">Notas del pedido (opcional): </label>
                        <textarea class="form-control" id="aditional_notes" name="aditional_notes" rows="3" minlength="3"
                            maxlength="500" placeholder="Notas sobre su pedido, p. Ej. horas y días preferidos para la entrega."
                            value="{{ old('aditional_notes') }}"></textarea>
                    </div>
                    <span id="error-aditional_notes" class="text-danger"></span>
                    @if ($errors->has('aditional_notes'))
                        <span class="text-danger">{{ $errors->first('aditional_notes') }}</span>
                    @endif

                    @if (isset($user) && $user->iam_profile_id == 2)
                        <div class="mt-3">
                            <label for="purchase_order" class="form-label">Orden de compra (opcional)</label>
                            <input class="form-control" type="file" id="purchase_order" name="purchase_order">
                            <small>Extensiones permitidas: pdf|max:4MB</small>
                        </div>
                        <span id="error-purchase_order" class="text-danger"></span>
                        @if ($errors->has('purchase_order'))
                            <span class="text-danger">{{ $errors->first('purchase_order') }}. Vuelve a ingresar la
                                orden</span>
                        @endif
                    @endif
                </div> {{-- /col-8 --}}

                <div class="col-sm-12 col-lg-4">
                    <h4 class="custom-text-color mt-3">Tu pedido</h4>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 25%;">Producto</th>
                                    <th style="width: 5%;">Nivel</th>
                                    <th style="width: 5%;">Ubicación</th>
                                    <th style="width: 100%;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- I mean with this variable in the shopping cart, there must be products, right? --}}
                                @foreach ($products as $product)
                                    <tr>
                                        <td>{{ $product->productInstance->product->model }}
                                            ({{ $product->productInstance->product->display_name }})
                                            <span class="fw-bold">x{{ $product->quantity }}</span>
                                        </td>
                                        <td>
                                            {{ $product->productInstance->attributes->first()->display_name }}
                                        </td>
                                        <td>
                                            @if ($product->productInstance->product->iam_vendor_id)
                                                Marketplace
                                            @else
                                                @if ($product->productInstance->product->type->id == 1)
                                                    {{ $product->productInstance->store->store_name }}
                                                    @if ($product->productInstance->free_shipping)
                                                        <p class="text-info">Con envío gratis</p>
                                                    @endif
                                                @else
                                                    Producto digital
                                                @endif
                                            @endif
                                        </td>
                                        <td>$ <span id="productPrice_{{ $product->productInstance->id }}"
                                                data-product-price="{{ $product->total }}">{{ number_format($product->total, 2, '.', ',') }}</span>
                                            MXN
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class=" mt-3">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th colspan="2">Tipo de envio</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($shipmentTypes)
                                    <tr>
                                        <td colspan="2">
                                            @foreach ($shipmentTypes as $key => $shipment)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="type_shipment"
                                                        id="{{ 'shipment_' . $shipment->id }}"
                                                        value="{{ $shipment->id }}" required
                                                        {{ old('type_shipment') == $shipment->id ? 'checked' : '' }}>
                                                    <label class="form-check-label"
                                                        for="{{ 'shipment_' . $shipment->id }}">
                                                        {{ $shipment->shipment_type }}
                                                        {{ $key == 0 ? '(Haz click)' : '' }}
                                                    </label>
                                                </div>
                                            @endforeach
                                            @if ($errors->has('type_shipment'))
                                                <span class="text-danger">{{ $errors->first('type_shipment') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @else
                                    <tr class="mt-5">
                                        <td class="fw-bold" colspan="2">Tu compra es 100% digital</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div id="shippingContainer"
                        data-free-shipping="{{ $freeShipmentProducts == $products->count() ? 1 : 0 }}">
                        @if ($freeShipmentProducts == $products->count())
                            <div class="mt-1 alert alert-info text-center" id="freeShipping">
                                <small class="custom-text-color">
                                    Tu envio es 100% gratuito.
                                </small>
                            </div>
                        @else
                            {{-- @if ($productsmarketplace == $products->count())
                            <small class="text-danger">Has seleccionado productos de marketplace, los precios de
                                envio quedan a cargo del vendedor</small>
                            <input type="hidden" id="productsmarketplace" value="{{ $productsmarketplace }}">
                            <input type="hidden" id="cartCount" value="{{ $products->count() }}">
                        @else --}}
                            <div class="mt-1" id="choiseShipment" style="display: none;">
                                {{-- <p>Selecciona una de nuestras opciones:</p>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="shipping"
                                                id="estafeta" value="estafeta" data-shipment-type="estafeta">
                                            <label class="form-check-label" for="estafeta">
                                                <img src="{{ Asset('assets/estafeta.png') }}" alt="Estafeta"
                                                    class="shipping-logo img-fluid">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="shipping"
                                                id="dhl" value="dhl" data-shipment-type="dhl">
                                            <label class="form-check-label" for="dhl">
                                                <img src="{{ Asset('assets/dhl.png') }}" alt="DHL"
                                                    class="shipping-logo img-fluid">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="shipping"
                                                id="fedex" value="fedex" data-shipment-type="fedex">
                                            <label class="form-check-label" for="fedex">
                                                <img src="{{ Asset('assets/fedex.png') }}" alt="FedEx"
                                                    class="shipping-logo img-fluid">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            {{-- @if ($productsmarketplace > 0)
                                        <small class="text-danger">Has seleccionado productos de marketplace, los precios
                                            de
                                            envio quedan a cargo del vendedor</small>
                                    @endif --}
                        </div> --}}
                            </div>
                            {{-- Here only contain the summary for the shipment --}}
                            <div class="mt-1 alert alert-info text-center" id="shipmentSummary" style="display: none;">
                                <ul id="shipmentSummaryContent"></ul>
                            </div>
                            {{-- @endif --}}
                            <input type="hidden" name="shipmentOptionsChoised" id="shipmentOptionsChoised"
                                value="">
                        @endif
                        <div id="subtotal" class="mt-3">
                            <hr>
                            <p class="fw-bold h3" id="subtotal">Subtotal: $ <span id="subtotalPrice"
                                    data-cart-subtotal="{{ $user->totalCart->totalCartAmount }}">{{ number_format($user->totalCart->totalCartAmount, 2, '.', ',') }}</span>
                                MXN</p>
                            <hr>
                            <input type="hidden" id="subtotalPriceHidden" name="subtotalPrice"
                                value="{{ $user->totalCart->totalCartAmount }}">
                        </div>

                        <div id="coupons" class="mt-3">
                            <label for="" class="custom-text-color fw-bold">Tienes algun cupón de
                                descuento?</label>
                            <div class="row mt-2">
                                <div class="col-8">
                                    <input type="text" name="coupon" id="coupon" class="form-control"
                                        placeholder="Ingresa el cupón" autocomplete="no" maxlength="6">
                                    <small id="errorCoupon" class="text-danger" style="display: none;"></small>
                                </div>
                                <div class="col-4">
                                    <button class="btn custom-bg-color custom-hover-color" id="validateCoupon"
                                        data-coupon-id="{{ $user->id }}">Validar</button>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div id="payment_method" class="mt-3 ">
                            <input class="form-check-input" type="radio" id="transferPayment" name="typePayment"
                                value="Transferencia" {{ old('typePayment') == 'Transferencia' ? 'checked' : '' }}
                                required>
                            <label class="form-check-label" for="transferPayment">
                                Pago por transferencia
                            </label> <br>
                            <input class="form-check-input" type="radio" id="cardPayment" name="typePayment"
                                value="Tarjeta" {{ old('typePayment') == 'Tarjeta' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="cardPayment">
                                Pago con tarjeta
                            </label>
                            {{-- <p class="text-danger">Por ahora solo contamos pago por transferencia</p> --}}
                            <div id="transferChoised" class="mt-3" style="display:none;">
                                <small class="mt-3 custom-text-color">
                                    Por favor, realice el pago en el portal de su banco, le enviaremos a su correo
                                    electrónico
                                    las
                                    instrucciones y datos bancarios. Una vez haya sido confirmado el pago, le enviaremos su
                                    pedido a
                                    la dirección indicada. <br>
                                    Si desea atención personalizada, por favor contáctenos por WhatsApp pulsando el
                                    siguiente
                                    icono:
                                    <a href="https://api.whatsapp.com/send?phone=5214427906892&text=Hola!%20Estoy%20buscando%20ayuda%20de%20Industry%20All%20Market."
                                        id="float-wa-icon" target="_blank" class="text-decoration-none m-1">
                                        <i class="bi bi-whatsapp" style="color: green;font-size: 25px;"></i>
                                    </a>
                                </small>
                            </div>
                            <div id="cardChoised" class="mt-3" style="display:none;">
                                <input type="hidden" name="token_id" id="token_id" />
                                <div class="pymnt-itm active">
                                    {{-- <h5 class="fw-bold">Tarjeta de crédito o débito</h5> --}}
                                    <div class="pymnt-cntnt">
                                        <div class="card-expl">
                                            <div class="credit">
                                                <small>Tarjetas de crédito</small><br>
                                                <img src="{{ Asset('assets/cards1.png') }}" alt="cards1"
                                                    class="img-fluid">
                                            </div>
                                            <div class="debit">
                                                <small>Tarjetas de débito</small>
                                                <img src="{{ Asset('assets/cards2.png') }}" alt="cards2"
                                                    class="img-fluid">
                                            </div>
                                        </div>
                                        <div class="card-js mt-2" id="theCard">
                                            <div class="sctn-row">
                                                <div class="sctn-col l">
                                                    <label>Nombre del titular</label>
                                                    <input type="text" class="form-control name"
                                                        placeholder="Como aparece en la tarjeta" autocomplete="off"
                                                        data-openpay-card="holder_name" />
                                                </div>
                                                <div class="sctn-col">
                                                    <label>Número de tarjeta</label>
                                                    <input type="text" class="form-control card-number"
                                                        autocomplete="off" data-openpay-card="card_number"
                                                        placeholder="XXXX XXXX XXXX XXXX" />
                                                </div>
                                            </div>
                                            <div class="sctn-row">
                                                <div class="sctn-col l">
                                                    <label>Fecha de expiración</label>
                                                    <div class="row">
                                                        <div class="col-6 half l">
                                                            <input type="text" placeholder="Mes"
                                                                class="form-control expiry-month" id="expiry-month"
                                                                data-openpay-card="expiration_month" maxlength="2" />
                                                        </div>
                                                        <div class="col-6 half l">
                                                            <input type="text" placeholder="Año"
                                                                class="form-control expiry-year" id="expiry-year"
                                                                data-openpay-card="expiration_year" maxlength="2" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="sctn-col cvv">
                                                    <label>Código de seguridad</label>
                                                    <div class="row">
                                                        <div class="col half l">
                                                            <input type="text" placeholder="3 dígitos"
                                                                class="form-control cvc2" autocomplete="off"
                                                                data-openpay-card="cvv2" maxlength="4" />
                                                        </div>
                                                        <div class="col">
                                                            <img src="{{ Asset('assets/cvv.png') }}" alt="cvv"
                                                                class="img-fluid">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="openpay mt-3">
                                            <div class="row">
                                                <div class="logo col border-end">
                                                    Transacciones realizadas vía: <img
                                                        src="{{ Asset('assets/openpay.png') }}" alt="openpay"
                                                        class="img-fluid">
                                                </div>
                                                <div class="shield col">
                                                    <img src="{{ Asset('assets/security.png') }}" alt="security"
                                                        class="img-fluid">
                                                    Tus pagos se realizan de forma segura con encriptación de 256
                                                    bits
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="condition_terms mt-3">
                            <hr>
                            <p>
                                Sus datos personales se utilizarán para procesar su pedido, respaldar su experiencia en este
                                sitio web y para otros fines descritos en nuestra política de privacidad.
                            </p>

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="termsAndConditions"
                                    id="termsAndConditions" value="1"
                                    @if (old('termsAndConditions')) checked @endif required>
                                <label class="form-check-label" for="termsAndConditions">
                                    He leído y estoy de acuerdo con los <a href="{{ Route('termsConditions') }}"
                                        target="_blank">
                                        Términos y Condiciones</a> de Industry All Market.
                                </label>
                            </div>
                        </div>
                        <div id="submit_purchase" class="mt-5 text-center">
                            <button type="submit" id="submitPurchaseButton"
                                class="btn custom-bg-color custom-hover-color">Realizar
                                el pedido</button>
                        </div>
                    </div> {{-- /col-4 --}}
                </div>
                <input type="hidden" id="transaction-id">
        </form>
    </div>

    {{-- Select a carrier option modal --}}
    <div class="modal fade" id="carrierOptionModal" tabindex="-1"data-bs-backdrop="static" data-bs-keyboard="false"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="carrierOptionLabel">Opción de precio</h1>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <p>El envio esta a cargo de DHL, por favor elige una opción de envio:</p>
                        <small><strong>Nota: </strong>Los precios son aproximados pueden variar.</small>
                    </div>
                    <div class="mt-3" id="shippingSummary" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn custom-bg-color custom-hover-color"
                        id="choisesCarrierOption">Elegir opciones</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_script')
    @vite('resources/js/checkout/validationsCheckout.js')
    @vite('resources/js/checkout/shipmentValidations.js')

    <script>
        $(document).ready(function() {
            $("#purchasesForm").on("submit", function(e) {
                e.preventDefault();

                if ($("#shipment_1").is(":checked")) {
                    const subtotalPrice = $("#subtotalPrice").data("cart-subtotal");
                    /*const productsmarketplace = $("#productsmarketplace").val()
                    const cartCount = $("#cartCount").val();
                    console.log(cartCount)*/

                    if (subtotalPrice >= 2000 || $("#freeShipping")
                        .length /*|| productsmarketplace == cartCount*/ ) {
                        $("#shippingSummary").html("");
                    }
                    /*else {
                        //if ($("input[name='shippingChoised']:checked").length === 0) {
                        if ($(".shipmentOption:checked").length === 0) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: "top-end",
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                                didOpen: (toast) => {
                                    toast.onmouseenter = Swal.stopTimer;
                                    toast.onmouseleave = Swal.resumeTimer;
                                },
                            });
                            Toast.fire({
                                icon: "error",
                                title: "Selecciona una opción de envio",
                            });
                            return false;
                        }
                    }*/
                }

                $("#submitPurchaseButton").html(`
                <div class="spinner-border" role="status">
                </div>
                `);
                $("#submitPurchaseButton").prop("disabled", true);

                var sucess_callbak = function(response) {
                    var token_id = response.data.id;
                    $("#token_id").val(token_id);
                    $("#purchasesForm").unbind("submit").submit();
                    $("#submitPurchaseButton").html("Realizar el pedido");
                };

                var error_callbak = function(response) {
                    var desc =
                        response.data.description != undefined ?
                        response.data.description :
                        response.message;
                    alert("ERROR [" + response.status + "] " + desc);
                    $("#submitPurchaseButton").prop("disabled", false);
                    $("#submitPurchaseButton").html("Realizar el pedido");
                };

                grecaptcha.ready(function() {
                    grecaptcha
                        .execute("{{ config('recaptcha.key') }}", {
                            action: "submit",
                        })
                        .then(function(token) {
                            $("#purchasesForm").prepend(
                                '<input type="hidden" name="g-recaptcha-response" value="' +
                                token +
                                '">'
                            );

                            if ($("#cardPayment").is(":checked")) {
                                var cardNumberInput = $(
                                    'input[data-openpay-card="card_number"]');
                                var cleanCardNumber = cardNumberInput.val().replace(/\D/g,
                                    '');
                                cardNumberInput.val(cleanCardNumber);

                                OpenPay.token.extractFormAndCreate(
                                    "purchasesForm",
                                    sucess_callbak,
                                    error_callbak
                                );
                            }
                            if ($("#transferPayment").is(":checked")) {
                                $("#purchasesForm").unbind("submit").submit();
                                $("#submitPurchaseButton").html("Realizar el pedido");
                            }
                        });
                });
            });
        });
    </script>
@endsection