@extends('layouts.app')

@section('content')
<div class='cover'>
    <img src='/storage/cursos/{{ $course->photo2 }}'>
</div>
<section id='course-buy'>
    <div class="container">
        <div id="course-buy-inner">
            <div class="box left">
                <div class="box-content">
                    <h2>Información</h2>
                    <br>
                    <p>Sed vitae magna sed velit ornare tincidunt. Proin vel rutrum ipsum. Mauris ut sodales augue, non sagittis lectus. Sed in dui mattis, pharetra justo eu, lacinia nisl. Donec euismod erat purus, at facilisis eros viverra ac. Nunc non urna id purus tristique egestas vitae sed turpis. Maecenas eu leo dignissim, faucibus ante vitae, tincidunt mauris. Integer sed massa sodales, dignissim elit quis, ornare nisl. Morbi euismod, diam ac varius imperdiet, magna nisl scelerisque dui, sit amet aliquet enim dui a erat. Vestibulum non porta neque, at sollicitudin mauris. Integer posuere laoreet dolor id dictum. Phasellus quis faucibus nibh. Fusce aliquam sagittis enim. Phasellus dapibus neque et justo accumsan luctus.</p>
                    <br>
                    <p>Vivamus quis sollicitudin erat, a dapibus neque. Pellentesque vitae diam eget massa ullamcorper vulputate. Maecenas sollicitudin metus elit, ac ultrices odio facilisis vitae. Pellentesque efficitur tristique dolor at fermentum. In hac habitasse platea dictumst. In velit neque, efficitur et lobortis quis, condimentum at nisi. Nunc efficitur tristique ante in venenatis. Nam sed metus luctus, lacinia tortor sit amet, pretium est. Duis nec tellus at justo tristique accumsan. Maecenas efficitur ante non mi fringilla sodales. Maecenas congue tristique malesuada. Suspendisse varius tincidunt lectus vitae volutpat. Mauris quis neque pulvinar, sodales est malesuada, porta nulla. Duis sed pretium arcu.</p>
                    <br>
                    <a href='{{ route('courses.show', $course->id)}}'>
                        <button class='btn btn-big'>Volver al Curso</button>
                    </a>
                </div>
            </div>
            <div class='box right'>
                <div class='small-box-header'>
                    <h2>Comprar curso</h2>
                    <p>Complete los siguientes datos</p>
                </div>
                <div class="small-box-content">
                    <form id='form-purchase' method="POST" action="{{ route('payments.pay', ['id' => $course->id ]) }}">
                        @csrf 
                        <div class="form-group">
                            <h3>Datos de compra</h3>
                        </div>
                        <div class="form-inline">
                            <p>{{ Auth::user()->email }}</p>
                        </div>
                        <div class="form-inline">
                            <p>{{ Auth::user()->name }} {{ Auth::user()->surname }}</p>
                        </div>
                        <div class="form-group">
                            <input 
                                type="text"
                                name="address"
                                placeholder="Dirección de facturación"
                                maxlength=255
                                required>
                        </div> 
                        <div class="form-group">
                            <input 
                                type="text"
                                name="phone"
                                placeholder="Teléfono de contacto"
                                maxlength=255
                                required>
                        </div> 
                        <div class="form-group">
                            <h3>Método de pago</h3>
                        </div>
                        <label class="rb-container" style='display: none'>
                            <img class='purchase-method-icon' src='/img/mercadopago.png'>
                            MercadoPago
                            <input
                                type="radio"
                                id="payment_method_mp"
                                name="payment_method"
                                value="mercadopago"
                                required>
                            <span class="checkmark"></span>
                        </label>
                        <label class="rb-container" style='display: none'>
                            <i class="purchase-method-icon fab fa-paypal"></i>
                            PayPal
                            <input
                                type="radio"
                                id="payment_method_pp"
                                name="payment_method"
                                value="paypal"
                                required>
                            <span class="checkmark"></span>
                        </label>
                        <label class="rb-container">Giro / Transferencia / Otro
                            <input
                                type="radio"
                                id="payment_method_other"
                                name="payment_method"
                                value="other">
                            <span class="checkmark"></span>
                        </label>
                        <div class="form-group">
                            <h3>Detalle</h3>
                        </div>
                        <div class="form-inline">
                            <img class='purchase-image' src='/storage/cursos/{{ $course->photo }}'>
                        </div>
                        <div class="form-inline">
                            <p>1 x {{ $course->title }}</p>
                        </div>
                        <hr>
                        <div class="form-inline">
                            <b>Total:</b>
                            <p class='purchase-price'>USD {{ $course->price }}</p>
                        </div>
                        <div class="form-group">
                            <button id='btn-purchase-submit' type="submit" class="btn btn-primary btn-submit">
                                Comprar
                            </button>
                        </div>
                        <p id='form-purchase-error' class='form-error'>Seleccione un método de pago</p>
                    </form>
                </div>   
            </div>
        </div>
    </div>
    <section id='fixed-icons'>
        <a href='https://wa.me/099999999'>
            <div id="whatsapp" class='fixed-icon'>
                <i class="fab fa-whatsapp"></i>
            </div>
        </a>
        <div id="scroll-up" class='fixed-icon' onclick='scrollToTop()'>
            <i class="fas fa-arrow-up"></i>
        </div>
    </section>
</section>
<script>
    const btnPurchaseSubmit = document.querySelector("#btn-purchase-submit")
    const formPurchaseError = document.querySelector('#form-purchase-error')

    btnPurchaseSubmit.addEventListener('click', e => {
        let paymentMethod = document.querySelector('input[name="payment_method"]:checked');
        if(paymentMethod == null)
            formPurchaseError.style.display = 'block'
        else 
            formPurchaseError.style.display = 'none'
    })
</script>
@endsection