@extends('layouts.frontend')

@section('title', 'Pedido finalizado')

@section('content')
    <article id="checkout">
        <div class="breadcrumb">
            <div class="container d-flex align-items-center">
                <a href="{{ url('/') }}">Inicio</a>
                <span>@yield('title')</span>
            </div>
        </div>
        <section>
            <div class="container">
                @if($order->success)
                    <h2 class="text-center">Gracias por tu compra</h2>
                    <div class="text-center mt-5">
                        <a href="{{ url('cuenta') }}" class="btn">
                            <span>Ir a Mi cuenta</span>
                            <i class="far fa-arrow-right"></i>
                        </a>
                    </div>
                @else
                    <h2 class="text-center">No se ha podido finalizar tu compra</h2>
                    <p class="text-center">Por favor, intentá de nuevo</p>
                    <div class="text-center mt-5">
                        <a href="{{ url('carrito') }}" class="btn">
                            <span>Ir a Mi carrito</span>
                            <i class="far fa-arrow-right"></i>
                        </a>
                    </div>
                @endif
            </div>
        </section>
    </article>
@endsection

@push('scripts')
    <script>
      $(function() {
        $('#toggleShipping').on('change', function() {
          if($(this).is(':checked')) {
            $('.optional').removeAttr('disabled');
            $('.optional').parents('.form-group').removeClass('d-none');
          } else {
            $('.optional').attr('disabled', 'disabled');
            $('.optional').parents('.form-group').addClass('d-none');
          }
        });

        $('.shipping_method').on('change', function() {
          $('#shipping').text($(this).data('formatted-price'));
          $('#total').text((parseInt($('#total').data('value')) + parseInt($(this).data('price'))).toLocaleString('es-ES', {
            maximumFractionDigits: 0
          }));
        });
      });
    </script>
@endpush