@extends('template.main-template')

@section('content')
    <section class="custom-hero"></section>
    <div id="content">

        <!--======= CONATACT  =========-->
        <section class="contact padding-top-100 padding-bottom-100">
            <div class="container">
                <div class="contact-form">
                    <h5 class="text-center" style="font-size: 2.3em;">Warranty Registration</h5>
                    <div class="row">
                        <div class="col-md-12">

                            <!--======= Success Msg =========-->
                            @if (session('success'))
                                <div id="" class="success-msg">
                                    <i class="fa fa-paper-plane-o"></i>
                                    {{ session()->get('success') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div id="" class="error-msg">
                                    <i class="fa-solid fa-circle-exclamation"></i>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <!--======= FORM  =========-->
                            <form role="form" id="contact_form" class="contact-form" method="post"
                                action="{{ route('actions.sendWarrantyForm') }}" enctype="multipart/form-data">
                                @csrf
                                <ul class="row">
                                    <li class="col-sm-6">
                                        <label>First Name *
                                            <input type="text" class="form-control" name="first_name" id="name"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Last Name *
                                            <input type="text" class="form-control" name="last_name" id="last_name"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Email *
                                            <input type="text" class="form-control" name="email" id="email"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Phone *
                                            <input type="text" class="form-control" name="phone" id="company"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>ZipCode *
                                            <input type="text" class="form-control" name="zipcode" id="zipcode"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Address Line 1 *
                                            <input type="text" class="form-control" name="address_line_1"
                                                id="address_line_1" placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Address Line 2
                                            <input type="text" class="form-control" name="address_line_2"
                                                id="address_line_2" placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>City
                                            <input type="text" class="form-control" name="city" id="city"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>State
                                            <input type="text" class="form-control" name="state" id="state"
                                                placeholder="">
                                        </label>
                                    </li>


                                    <li class="col-sm-12">
                                        <h5 class="margin-top-25">Purchase Information:</h5>
                                    </li>

                                    <li class="col-sm-12">
                                        <label>Where did you purchase your product? *
                                            <input type="text" class="form-control" name="store_name" id="store_name"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Date
                                            <input type="date" class="form-control" name="date" id="date"
                                                placeholder="">
                                        </label>
                                    </li>

                                    <!--======= PRODUCTS SECTION =========-->
                                    <li class="col-sm-12">
                                        <h6 class="margin-top-25">Products:</h6>
                                        <div id="products-container">
                                            <!-- Product row template -->
                                            <div class="product-row" data-product-index="0">
                                                <div class="product-fields">
                                                    <div class="product-field">
                                                        <label>Product *
                                                            <select class="form-control product-select" name="products[0][product_id]" required>
                                                                <option value="">Select a Product</option>
                                                                @foreach ($products as $product)
                                                                    <option value="{{$product->id}}">{{ $product->product_title }}</option>
                                                                @endforeach
                                                            </select>
                                                        </label>
                                                    </div>
                                                    <div class="product-field">
                                                        <label>Quantity *
                                                            <input type="number" step="1" min="1" class="form-control product-quantity"
                                                                   name="products[0][quantity]" value="1" required>
                                                        </label>
                                                    </div>
                                                    <div class="product-field remove-field">
                                                        <label>&nbsp;</label>
                                                        <button type="button" class="btn btn-danger btn-sm remove-product"
                                                                onclick="removeProduct(this)">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Add Product Button -->
                                        <div class="add-product-container">
                                            <button type="button" class="btn btn-secondary btn-sm" onclick="addProduct()">
                                                <i class="fa fa-plus"></i> Add Another Product
                                            </button>
                                        </div>
                                    </li>

                                    <li class="col-sm-12">
                                        <label>Upload Your Invoice *
                                            <input type="file" class="form-control" name="invoice_field" id="invoice_field"
                                                placeholder="">
                                        </label>
                                    </li>

                                    <li class="col-sm-7">
                                        <div id="recaptchaContainer"></div>
                                        <div class="g-recaptcha" data-sitekey="{{ env('WEBSITE_KEY', '6LcRWLgpAAAAAASQv_KLrARI1KKZIR-fvdSYVP8B') }}" data-callback="onRecaptchaSuccess" data-expired-callback="onRecaptchaExpired"></div>
                                        <div id="recaptcha-error" class="error-message" style="display: none; color: #dc3545; margin-top: 5px; font-size: 14px;">
                                            Please complete the reCAPTCHA verification
                                        </div>
                                    </li>

                                    <li class="col-sm-12">
                                        <button type="submit" value="submit" class="btn" id="btn_submit">Register Products</button>
                                    </li>
                                </ul>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('javascript')
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script defer src="https://www.google.com/recaptcha/api.js" async defer></script>

<script>
let productIndex = 1;

// Função para validar o reCAPTCHA
function validateRecaptcha() {
    // Verificar se o grecaptcha está disponível
    if (typeof grecaptcha === 'undefined') {
        console.error('reCAPTCHA não está carregado');
        return false;
    }

    const recaptchaResponse = grecaptcha.getResponse();

    if (!recaptchaResponse || recaptchaResponse.length === 0) {
        const errorElement = document.getElementById('recaptcha-error');
        if (errorElement) {
            errorElement.style.display = 'block';
        }
        return false;
    }

    const errorElement = document.getElementById('recaptcha-error');
    if (errorElement) {
        errorElement.style.display = 'none';
    }
    return true;
}

function addProduct() {
    const container = document.getElementById('products-container');
    const newRow = document.createElement('div');
    newRow.className = 'product-row';
    newRow.setAttribute('data-product-index', productIndex);

    newRow.innerHTML = `
        <div class="product-fields">
            <div class="product-field">
                <label>Product *
                    <select class="form-control product-select" name="products[${productIndex}][product_id]" required>
                        <option value="">Select a Product</option>
                        @foreach ($products as $product)
                            <option value="{{$product->id}}">{{ $product->product_title }}</option>
                        @endforeach
                    </select>
                </label>
            </div>
            <div class="product-field">
                <label>Quantity *
                    <input type="number" step="1" min="1" class="form-control product-quantity"
                           name="products[${productIndex}][quantity]" value="1" required>
                </label>
            </div>
            <div class="product-field remove-field">
                <label>&nbsp;</label>
                <button type="button" class="btn btn-danger btn-sm remove-product"
                        onclick="removeProduct(this)">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        </div>
    `;

    container.appendChild(newRow);
    productIndex++;

    // Show remove button on first row if there are multiple products
    updateRemoveButtons();
}

function removeProduct(button) {
    const productRow = button.closest('.product-row');
    productRow.remove();

    // Reindex remaining products
    reindexProducts();
    updateRemoveButtons();
}

function reindexProducts() {
    const productRows = document.querySelectorAll('.product-row');
    productRows.forEach((row, index) => {
        row.setAttribute('data-product-index', index);

        // Update select name
        const select = row.querySelector('.product-select');
        select.name = `products[${index}][product_id]`;

        // Update quantity name
        const quantity = row.querySelector('.product-quantity');
        quantity.name = `products[${index}][quantity]`;
    });

    productIndex = productRows.length;
}

function updateRemoveButtons() {
    const productRows = document.querySelectorAll('.product-row');
    const removeButtons = document.querySelectorAll('.remove-product');

    // Hide remove button if there's only one product
    if (productRows.length === 1) {
        removeButtons.forEach(btn => btn.style.display = 'none');
    } else {
        removeButtons.forEach(btn => btn.style.display = 'inline-block');
    }
}

// Initialize remove buttons visibility
document.addEventListener('DOMContentLoaded', function() {
    updateRemoveButtons();

    // Adicionar validação no envio do formulário
    const form = document.getElementById('contact_form');

    if (form) {
        form.addEventListener('submit', function(e) {
            if (!proceed()) {
                e.preventDefault();
                return false;
            }
        });
    }
});

// Validate form before submission
function proceed() {
    // Primeiro validar o reCAPTCHA
    if (!validateRecaptcha()) {
        // Scroll para o reCAPTCHA se houver erro
        document.querySelector('.g-recaptcha').scrollIntoView({
            behavior: 'smooth',
            block: 'center'
        });
        return false;
    }

    // Depois validar os produtos
    const productRows = document.querySelectorAll('.product-row');
    let isValid = true;

    // Check if at least one product is selected
    productRows.forEach((row, index) => {
        const select = row.querySelector('.product-select');
        const quantity = row.querySelector('.product-quantity');

        if (!select.value) {
            alert(`Please select a product for row ${index + 1}`);
            isValid = false;
            return;
        }

        if (!quantity.value || quantity.value < 1) {
            alert(`Please enter a valid quantity for row ${index + 1}`);
            isValid = false;
            return;
        }
    });

    if (!isValid) {
        return false;
    }

    return true;
}

// Callback quando o reCAPTCHA é completado
function onRecaptchaSuccess() {
    const errorElement = document.getElementById('recaptcha-error');
    if (errorElement) {
        errorElement.style.display = 'none';
    }
}

// Callback quando o reCAPTCHA expira
function onRecaptchaExpired() {
    const errorElement = document.getElementById('recaptcha-error');
    if (errorElement) {
        errorElement.style.display = 'block';
        errorElement.textContent = 'reCAPTCHA expired. Please complete it again.';
    }
}
</script>
@endpush

@push('css')
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<style>
.error-message {
    color: #dc3545;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
}

.g-recaptcha {
    margin-bottom: 10px;
}

.error-msg {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.error-msg i {
    margin-right: 8px;
    color: #dc3545;
}

.error-msg ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.error-msg li {
    margin-bottom: 5px;
}

.success-msg {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
}

.success-msg i {
    margin-right: 8px;
    color: #28a745;
}

.product-row {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-row:hover {
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.product-fields {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.product-field {
    flex: 1;
    min-width: 200px;
}

.product-field.remove-field {
    flex: 0 0 auto;
    min-width: 80px;
}

.product-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.product-field .form-control {
    width: 100%;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
}

.product-field .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    outline: none;
}

.remove-product {
    width: 100%;
    height: 38px;
    border-radius: 4px;
    font-size: 14px;
}

.add-product-container {
    margin-top: 15px;
    text-align: center;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-fields {
        flex-direction: column;
        gap: 15px;
    }

    .product-field {
        min-width: 100%;
    }

    .product-field.remove-field {
        min-width: 100px;
        align-self: flex-end;
    }
}

@media (max-width: 576px) {
    .product-row {
        padding: 15px;
    }

    .product-fields {
        gap: 12px;
    }
}
</style>
@endpush