@extends('plantilla.plantilla')

@section('titulo','Importadora Cork')

@section('estilos')

    <link rel="stylesheet" type="text/css" href="{{ asset('asset/styles/main_styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('asset/styles/responsive.css') }}">

@endsection


@section('contenido')

    @php
        $currenturl = url()->full();
    @endphp

    <div class="super_container_inner">

        <div class="pageproduct"></div>
        <div class="container  pt-lg-5">
            <div class="jumbotron bg-white">
                <section class="container" id="carritoItemsDiv">
                    <div class="row">
                        <div class="col-12">
                            <h3 class="text-center text-blue">Carrito de compras</h3>
                        </div>
                    </div>
                    @if ($totalItems > 0)
                        <div class="row">
                            <div class="col-12">
                                <label>Destino:</label>
                                <select class="form-control" id="idDestino" name="idDestino" required>
                                    <option value="" selected disabled>-[Seleccione una opción]-</option>
                                    <option value="0">Direccion del cliente</option>
                                    @if (count($destinos) > 0)
                                        @foreach ($destinos as $d)
                                            <option value="{{ $d['Destino'] }}">
                                                {{ $d['Nombre'] }} ({{ $d['Estado'] }})
                                            </option>
                                        @endforeach

                                    @endif
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>Codigo</th>
                                            <th>Cantidad</th>
                                            <th>Producto</th>
                                            <th>Precio</th>
                                            <th>Importe</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {{--{{dd($items)  }}--}}
                                        @foreach ($items as $i)
                                            @php
                                                $cCodigo = "";
                                                if ($i->attributes->family == 255) {
                                                    $cCodigo = $i->id.'F, '.$i->id.'R';

                                                } elseif ($i->attributes->family == 256) {
                                                     $cCodigo = $i->id.'D, '.$i->id.'I';

                                                } elseif ($i->attributes->family == 257) {
                                                     $cCodigo = $i->id.'FD, '.$i->id.'RD, '.$i->id.'FI, '.$i->id.'RI';
                                                }else{
                                                $cCodigo=$i->id;
                                                }
                                            @endphp
                                            <tr>
                                                <td width="20%">
                                                    <img src="{{asset( 'imagenes/productos/'.$i->id.'_01.webp')}}"
                                                         alt="" width="50%">
                                                </td>
                                                <td>{{ $cCodigo}}</td>
                                                <td>{{ $i->quantity }}</td>
                                                <td>{{ $i->name }}</td>
                                                <td>${{ number_format($i->price,2) }}</td>
                                                <td>${{ number_format(($i->price*$i->quantity),2) }}</td>
                                                <td>
                                                    <button class="btn btn-danger btn-sm"
                                                            onclick="eliminarItem('{{ $i->id }}')">
                                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr>
                                            <td colspan="4" class="text-right">
                                                <h4>Total:</h4>
                                            </td>
                                            <td colspan="2" class="text-blue text-right">
                                                <h4 id="totalLabel">${{ number_format($total,2) }}</h4>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    <!-- <div class="row">
                    <div class="col-12 text-right">
                        <h4>Total <div id="totalLabel">${{ number_format($total,2) }}</div>
                        </h4>
                    </div>
                </div> -->
                        <div class="row">
                            <div class="col-12 text-right">
                                <button class="btn btn-primary" id="btnFactMain">Realizar pedido</button>
                            </div>
                        </div>
                    @else
                        <div class="row">
                            <div class="col-12">
                                <h3 class="text-center">Carrito vacio</h3>
                            </div>
                        </div>
                    @endif
                </section>
                <section class="container" id="resultDiv" style="display: none; height: 50vh;">
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-success text-center" role="alert" style="height: 50vh;">
                                <i class="fa fa-check-circle-o fa-5x" aria-hidden="true"></i>

                                <h4 class="alert-heading">Pedido Realizado con Éxito!</h4>
                                <p>Tu pedido se realizo con éxito</p>
                                <a href="{{ url('/') }}" class="btn btn-primary">Regresar al Inicio</a>
                                <!--<hr>
      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>-->
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

    </div>

    <div class="modal fade" id="modalloading">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            Procesando..
                        </div>
                    </div>
                </div>

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

    <script type="application/javascript">

		// window.addEventListener('popstate', function(event) {
		// 	history.pushState(null, null, window.location.pathname);
		// 	history.pushState(null, null, window.location.pathname);
		// }, false);

		$(document).ready(function () {

			let clicando2 = false;
			$('#btnFactMain').click(function () {
				// alert($('#idDestino').val());
				if ($('#idDestino').val() == null) {
					Swal.fire({
						icon: 'error',
						title: 'Seleccione un destino',
						showConfirmButton: false,
						timer: 2000
					});
					$('#idDestino').focus();
					return false
				}
				if (clicando2) {
					console.log('-------------------------ya se cliequeo------------------------------------')
				} else {
					clicando2 = true;
					$.ajaxSetup({
						headers: {
							'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
						}
					});
					// $('#modalloading').show();
					$('#modalloading').modal('show');
					$.ajax({
						url: '{{url("carrito/hacer-pedido")}}',
						type: 'POST',
						dataType: 'json',
						data: {
							iduser: 1,
							idDestino: $('#idDestino').val(),
						},
					})
						.done(function (resp) {
							console.log(resp);
							// $('#modalloading').hide();
							$('#modalloading').modal('hide');
							if (resp.status == 200) {
								$('#btnFactMain').prop('disabled', false);
								$("html, body").animate({
									scrollTop: 0
								}, 600);
								Swal.fire({
									icon: 'success',
									title: 'Pedido creado con Éxito!',
									showConfirmButton: false,
									timer: 3000
								});

								var URLHost = window.location.host;
								var palabra = "/corkshop/public/";
								var URLdomain = window.location.pathname;
								var index = URLdomain.indexOf(palabra);
								$('#folioPedido').html(resp.Documentos[0][0].FolioWeb);
								// $('#resultDiv').show();
								setTimeout(() => {
									window.location.reload();
									if (index >= 0) {
										location.href =  "/corkshop/public/admin";
									}else {
										location.href =  "/admin";
									}
									// location.href ="/admin";
								}, 3000);
								$('#carritoItemsDiv').hide();
								carrito();
								//window.location.href ='{{ url('/') }}';
							} else {
								$('#btnFactMain').prop('disabled', false);

								Swal.fire({
									title: resp.status + ' - ' + resp.message,
									type: 'error',
									timer: 7000
								});
								clicando2 = false;
								return false;
							}
						})
						.fail(function () {
							console.log("error");
						})
						.always(function () {
							console.log("complete");
						});
				}
			});
		});


		function eliminarItem(id) {

			// $('#modalloading').show();
			$('#modalloading').modal('show');
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
			$.ajax({
				url: '{{url("carrito/elimina_item")}}',
				type: 'POST',
				dataType: 'json',
				data: {
					id: id
				},
			})
				.done(function (resp) {
					console.log("success");
					window.location.reload()
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
					// $('#modalloading').hide();
					$('#modalloading').modal('hide');
				});

		}

		function carrito() {
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
			$.ajax({
				url: '{{url("carrito/total_items")}}',
				type: 'POST',
				dataType: 'json',
				data: {
					param1: 'value1'
				},
			})
				.done(function (resp) {
					console.log("success");
					console.log(resp);
					$('#totalItemsCartUser').html(resp.result)
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
				});

		}
    </script>
@endsection