@extends('layouts.app')

@section('content')
    <div class="container mt-5">
        @if ($products->count() > 0)
            <div class="table-responsive text-center">
                <table class="table" id="shopping-cart">
                    <thead>
                        <tr>
                            <th></th>
                            <th style="width: 10%;"></th>
                            <th style="width: 25%;">Producto</th>
                            <th style="width: 7%;">Nivel</th>
                            <th style="width: 7%;">Ubicación</th>
                            <th style="width: 25%;">Precio</th>
                            <th style="width: 1%;">Cantidad</th>
                            <th style="width: 25%;">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>
                                    <form action="{{ Route('dropProductInCart') }}" class="dropProductInCart">
                                        @csrf
                                        <input type="hidden" name="slug" value="{{ $product->productInstance->slug }}">
                                        <button type="submit" class="btn custom-hover-color drop-product">X</button>
                                    </form>
                                </td>
                                <td>
                                    <img src="{{ Asset('uploads/products/' . $product->productInstance->product->images->first()->image) }}"
                                        alt="Sin imagen de producto" width="75%" height="75%" class="img-fluid">
                                </td>
                                <td>
                                    <a class="text-decoration-none text-black"
                                        href="{{ Route('productDetails', $product->productInstance->product->slug) }}">
                                        {{ $product->productInstance->product->display_name }}
                                    </a>
                                    @if ($product->productInstance->free_shipping)
                                        <p class="text-info">Con envío gratis</p>
                                    @endif
                                </td>
                                <td>
                                    {{ $product->productInstance->attributes->first()->display_name }}
                                </td>
                                <td>
                                    <p>
                                        @if ($product->productInstance->product->iam_vendor_id)
                                            Marketplace
                                        @else
                                            @if ($product->productInstance->product->type->id == 1)
                                                {{ $product->productInstance->store->store_name }}
                                            @else
                                                Producto-digital
                                            @endif
                                        @endif
                                    </p>
                                </td>
                                @if ($product->productInstance->offert)
                                    <td>
                                        <small
                                            class="text-decoration-line-through">${{ number_format($product->productInstance->price, 2, '.', ',') }}
                                            MXN</small>
                                        <p class="custom-text-color">
                                            ${{ number_format($product->productInstance->product->offert->discount_price, 2, '.', ',') }}
                                        </p>
                                    </td>
                                @else
                                    <td>
                                        ${{ $product->productInstance->price }}.00
                                    </td>
                                @endif
                                <td>
                                    <form action="{{ Route('setQuantity') }}" class="setQuantity" method="post"
                                        id="setQuantity_{{ $product->productInstance->slug }}">
                                        @csrf

                                        <input type="hidden" name="slug" value="{{ $product->productInstance->slug }}">
                                        <input type="number" class="form-control quantity" name="quantity"
                                            id="quantity_{{ $product->productInstance->slug }}"
                                            value="{{ $product->quantity }}"
                                            data-product-slug="{{ $product->productInstance->slug }}">
                                    </form>
                                </td>
                                <td id="total_{{ $product->productInstance->slug }}">
                                    ${{ $product->total }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="row mt-3">
                <div class="col-sm-12 col-lg-4">
                    <form action="{{ Route('dropCart') }}" method="post" id="dropCartForm">
                        @csrf
                        <button type="submit" class="btn btn-danger">Borrar carrito</button>
                    </form>
                </div>
                <div class="col-sm-12 col-lg-4" id="checking"></div>
                <div class="col-sm-12 col-lg-4">
                    <hr>
                    <p id="subtotal">Subtotal: ${{ $subtotal->totalCartAmount }}</p>
                    <hr>
                    <div class="d-flex justify-text-between gap-2">
                        <form action="{{ Route('validateCart') }}" method="post" id="submitCart">
                            @csrf
                            <button type="submit" class="btn custom-bg-color custom-hover-color text-center submit-cart">
                                Finalizar compra
                            </button>
                        </form>
                        <a href="" class="btn btn-success flex-fill" id="makeQuote">Cotizar</a>
                    </div>
                </div>
            </div>
        @else
            <div class="text-center">
                <p class="text-danger">
                    Sin productos en el carrito
                </p>
                <a href="{{ Route('home') }}" class="btn custom-bg-color custom-hover-color">Regresar a la tienda</a>
            </div>
        @endif

        {{--
        @guest
            <div id="cartContent">
                <div class=" text-center shopping-cart">
                    <table class="table" id="cart-table">
                        <thead>
                            <tr>
                                <th></th>
                                <th style="width: 10%;"></th>
                                <th style="width: 25%;">Producto</th>
                                <th style="width: 7%;">Nivel</th>
                                <th style="width: 7%;">Ubicación</th>
                                <th style="width: 25%;">Precio</th>
                                <th style="width: 1%;">Cantidad</th>
                                <th style="width: 25%;">Total</th>
                            </tr>
                        </thead>
                        <tbody id="cart-table-body">
                            <!-- Generate rows -->
                        </tbody>
                    </table>
                </div>
                <div class="row mt-3">
                    <div class="col-sm-12 col-lg-4">
                        {{-- Redirige a drop-cart --}
                        <button type="button" class="btn btn-danger dropCart">Borrar carrito</button>
                    </div>
                    <div class="col-sm-12 col-lg-4" id="checking"></div>
                    <div class="col-sm-12 col-lg-4">
                        <hr>
                        <p id="cartSubtotal"></p>
                        <hr>
                        <div class="d-flex justify-text-between gap-2">
                            <form action="{{ Route('validateCart') }}" method="post" id="submitCart">
                                @csrf
                                <button type="submit"
                                    class="btn custom-bg-color custom-hover-color text-center submit-cart flex-fill">
                                    Finalizar compra
                                </button>
                            </form>
                            <a href="" class="btn btn-success flex-fill" id="makeQuote">Cotizar</a>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Se deberia hacer mejor esto --}
            <form id="dropCartForm" action="{{ Route('dropCart') }}" method="post">
                @csrf
                <input type="hidden" name="guestToken" id="guestToken">
            </form>
        @endguest
--}}

    </div>
    {{-- Make quote --}}
    <div class="modal fade" id="makeQuoteModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="notLinkedModal">Crear cotización
                    </h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="makeQuoteForm" action="{{ Route('makeQuote') }}" method="post">
                        @csrf
                        <h5 class="fw-bold">Necesitamos algunos datos para poder cotizar y por si quieres que te
                            contactemos</h5><br>
                        <div class="mb-3 form-group">
                            <label for="contact" class="form-label">Nombre del solicitante</label>
                            <input type="text" class="form-control" name="contact" id="contact"
                                placeholder="Ingresa su nombre o de quien solicito la cotización" required>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="rfc" class="form-label">RFC</label>
                            <input type="text" class="form-control" name="rfc" id="rfc"
                                placeholder="Ingresa el rfc">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="phone_number" class="form-label">Teléfono</label>
                            <input type="text" class="form-control" name="phone_number" id="phone_number"
                                placeholder="Ingresa el telefono" required>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="email" class="form-label">Correo Electronico</label>
                            <input type="email" class="form-control" name="email" id="email"
                                placeholder="Ingresa el correo de contacto"
                                value="{{ Auth::guard('web')->check() ? Auth::guard('web')->user()->email : '' }}"
                                required>
                        </div>
                        <div class="mb-3 form-group">
                            <input type="checkbox" name="followAuthorization" id="followAuthorization">
                            <label for="followAuthorization" class="form-label">Hacer seguimiento de
                                cotización</label><br>
                            <small>Si acepta nos pondremos en contacto con usted tan pronto sea posible para dar
                                seguimiento</small>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success" id="submitMakeQuoteForm">Crear
                                cotización</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_script')
    <script>
        $(document).ready(function() {
            $("#makeQuote").on("click", function(e) {
                e.preventDefault();
                $("#makeQuoteModal").modal("show");
            })

            $("#makeQuoteForm").on("submit", function(e) {
                e.preventDefault();
                var myArray = JSON.parse(localStorage.getItem('cart')) || [];

                var form = this;
                var hiddenInput = $('<input>')
                    .attr('type', 'hidden')
                    .attr('name', 'cart')
                    .val(JSON.stringify(myArray));
                $("#makeQuoteForm").append(hiddenInput);
                swal.fire({
                    icon: "info",
                    title: "Creando cotización",
                    text: "Por favor no recargues la pagina. Cuando se descargue ya puedes salir de esta pantalla",
                    showConfirmButton: false,
                    showCancelButton: false,
                });
                form.submit();
                $("#makeQuoteModal").modal("hide");
                /*
                                                var csrfToken = $('input[name="_token"]').val();
                                                var cartItems = JSON.parse(localStorage.getItem("cart"));
                                                var company_name = $("#company_name").val();
                                                var contact = $("#contact").val();
                                                var rfc = $("#rfc").val();
                                                var address = $("#address").val();
                                                var phone_number = $("#phone_number").val();
                                                var email = $("#email").val();
                                                var followAuthorization = $("#followAuthorization").val();

                                                if (cartItems.length === 0) {
                                                    alert('El carrito está vacío.');
                                                    return;
                                                }
                                                var formData = {
                                                    _token: csrfToken,
                                                    cart: cartItems,
                                                    company_name: company_name,
                                                    contact: contact,
                                                    rfc: rfc,
                                                    address: address,
                                                    phone_number: phone_number,
                                                    email: email,
                                                    followAuthorization: followAuthorization,
                                                };

                                                $("#submitMakeQuoteForm").prop("disabled", true).html(`
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="">
                        Creando cotización
                    </p>
                </div>
            `);

                                                $.ajax({
                                                    method: "POST",
                                                    url: $(this).attr("action"),
                                                    data: formData,
                                                    xhrFields: {
                                                        responseType: 'blob'
                                                    },
                                                    success: function(response) {
                                                        console.log(response)
                                                        $("#submitMakeQuoteForm").prop("disabled", false).html("Crear cotización")
                                                    }, 
                                                    error: function(xhr) {
                                                        console.log(xhr.responseJSON.error);
                                                        $("#submitMakeQuoteForm").prop("disabled", false).html("Crear cotización")
                                                    }
                                                });
                                                */
            })
        });
    </script>
@endsection