@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Crear Cupón de Descuento</h4>
            <div class="page-title-right">
                <a href="{{ route('coupon.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="discountForm" name="discountForm">
            
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="couponTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic-info" 
                                    type="button" role="tab" aria-controls="basic-info" aria-selected="true">
                                <i class="ri-information-line tab-icon"></i>
                                Información Básica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="discount-tab" data-bs-toggle="tab" data-bs-target="#discount-config" 
                                    type="button" role="tab" aria-controls="discount-config" aria-selected="false">
                                <i class="ri-percent-line tab-icon"></i>
                                Configuración de Descuento
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="restrictions-tab" data-bs-toggle="tab" data-bs-target="#restrictions" 
                                    type="button" role="tab" aria-controls="restrictions" aria-selected="false">
                                <i class="ri-shield-check-line tab-icon"></i>
                                Restricciones de Uso
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="dates-tab" data-bs-toggle="tab" data-bs-target="#dates-config" 
                                    type="button" role="tab" aria-controls="dates-config" aria-selected="false">
                                <i class="ri-calendar-2-line tab-icon"></i>
                                Vigencia y Fechas
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="couponTabContent">
                        
                        <!-- Tab 1: Información Básica -->
                        <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-tab">
                            <h5 class="form-section-title">
                                <i class="ri-coupon-3-line text-primary"></i>
                                Información Básica del Cupón
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="code">Código del Cupón *</label>
                                        <input type="text" name="code" id="code" class="form-control" placeholder="Ej: DESCUENTO20">
                                        <p class="error"></p>
                                        <small class="help-text">Ingrese un código único para el cupón, como "DESCUENTO20"</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name">Nombre del Cupón</label>
                                        <input type="text" name="name" id="name" class="form-control" placeholder="Ej: Descuento de Primavera">
                                        <p class="error"></p>
                                        <small class="help-text">Asigne un nombre descriptivo al cupón</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="description">Descripción</label>
                                        <textarea class="form-control" name="description" id="description" cols="30" rows="4" placeholder="Describa las condiciones y beneficios del cupón"></textarea>
                                        <p class="error"></p>
                                        <small class="help-text">Ingrese una breve descripción del cupón y sus condiciones</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Configuración de Descuento -->
                        <div class="tab-pane fade" id="discount-config" role="tabpanel" aria-labelledby="discount-tab">
                            <h5 class="form-section-title">
                                <i class="ri-percent-line text-success"></i>
                                Configuración del Descuento
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="type">Tipo de Descuento *</label>
                                        <select name="type" id="type" class="form-select">
                                            <option value="percent">Porcentaje (%)</option>
                                            <option value="fixed">Monto Fijo ($)</option>
                                        </select>
                                        <p class="error"></p>
                                        <small class="help-text">Seleccione si el descuento será un porcentaje o un monto fijo</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="discount_amount">Valor del Descuento *</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="discount-symbol">%</span>
                                            </div>
                                            <input type="number" name="discount_amount" id="discount_amount" class="form-control" placeholder="0" step="0.01">
                                        </div>
                                        <p class="error"></p>
                                        <small class="help-text">Ingrese el valor del descuento (porcentaje o monto)</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="min_amount">Monto Mínimo de Compra</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">$</span>
                                            </div>
                                            <input type="number" name="min_amount" id="min_amount" class="form-control" placeholder="0.00" step="0.01">
                                        </div>
                                        <p class="error"></p>
                                        <small class="help-text">Establezca un monto mínimo de compra para aplicar el cupón (opcional)</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="field_status">Estado del Cupón</label>
                                        <select name="status" id="field_status" class="form-select">
                                            <option value="1">Activo</option>
                                            <option value="0">Inactivo</option>
                                        </select>
                                        <p class="error"></p>
                                        <small class="help-text">Seleccione el estado inicial del cupón</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 3: Restricciones de Uso -->
                        <div class="tab-pane fade" id="restrictions" role="tabpanel" aria-labelledby="restrictions-tab">
                            <h5 class="form-section-title">
                                <i class="ri-shield-check-line text-warning"></i>
                                Restricciones y Límites de Uso
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="max_uses">Usos Máximos Totales</label>
                                        <input type="number" name="max_uses" id="max_uses" class="form-control" placeholder="Ilimitado" min="1">
                                        <p class="error"></p>
                                        <small class="help-text">Número máximo de veces que se puede usar este cupón en total (opcional)</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="max_uses_user">Usos Máximos por Usuario</label>
                                        <input type="number" name="max_uses_user" id="max_uses_user" class="form-control" placeholder="Ilimitado" min="1">
                                        <p class="error"></p>
                                        <small class="help-text">Número máximo de veces que un usuario puede utilizar este cupón (opcional)</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                <strong>Información:</strong> Si no especifica límites de uso, el cupón podrá ser utilizado de forma ilimitada mientras esté activo y dentro del período de vigencia.
                            </div>
                        </div>

                        <!-- Tab 4: Vigencia y Fechas -->
                        <div class="tab-pane fade" id="dates-config" role="tabpanel" aria-labelledby="dates-tab">
                            <h5 class="form-section-title">
                                <i class="ri-calendar-2-line text-info"></i>
                                Vigencia y Programación
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="starts_at">Fecha y Hora de Inicio</label>
                                        <input autocomplete="off" type="text" name="starts_at" id="starts_at" class="form-control" placeholder="Seleccionar fecha de inicio">
                                        <p class="error"></p>
                                        <small class="help-text">Fecha y hora en que el cupón comenzará a estar disponible (opcional)</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="expires_at">Fecha y Hora de Vencimiento</label>
                                        <input autocomplete="off" type="text" name="expires_at" id="expires_at" class="form-control" placeholder="Seleccionar fecha de vencimiento">
                                        <p class="error"></p>
                                        <small class="help-text">Fecha y hora en que el cupón dejará de estar disponible (opcional)</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="alert alert-warning">
                                <i class="ri-error-warning-line"></i>
                                <strong>Importante:</strong> Si no especifica fechas, el cupón estará disponible indefinidamente mientras esté activo. Las fechas son opcionales pero recomendadas para promociones específicas.
                            </div>
                        </div>

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

            <!-- Actions -->
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line"></i> Crear Cupón
                        </button>
                        <a href="{{ route('coupon.index') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line"></i> Cancelar
                        </a>
                    </div>
                </div>
            </div>

        </form>


@endsection

@section('customJs')
<script>
$(document).ready(function(){
    // Initialize datetime pickers
    $('#starts_at').datetimepicker({
        format:'Y-m-d H:i:s',
        minDate: new Date()
    });

    $('#expires_at').datetimepicker({
        format:'Y-m-d H:i:s',
        minDate: new Date()
    });

    // Update discount symbol based on type
    $('#type').change(function() {
        const symbol = $(this).val() === 'percent' ? '%' : '$';
        $('#discount-symbol').text(symbol);
        
        // Update placeholder
        if($(this).val() === 'percent') {
            $('#discount_amount').attr('placeholder', '0').attr('max', '100');
        } else {
            $('#discount_amount').attr('placeholder', '0.00').removeAttr('max');
        }
    });
});

$("#discountForm").submit(function(event){
    event.preventDefault();
    var element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("coupon.store") }}',
        type: 'post',
        data: element.serializeArray(),
        dataType: 'json',
        success: function(response){
            $("button[type=submit]").prop('disabled', false);
            
            if (response["status"] == true) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: response.message || 'Cupón creado exitosamente',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = "{{ route('coupon.index')}}";
                });
            } else {
                // Clear previous errors
                $('.error').removeClass('invalid-feedback').html('');
                $('input, select, textarea').removeClass('is-invalid');
                
                // Show new errors
                var errors = response['errors'];
                $.each(errors, function(key, value){
                    $(`#${key}`).addClass('is-invalid')
                        .siblings('p.error')
                        .addClass('invalid-feedback')
                        .html(value);
                });
                
                Swal.fire('Error', 'Por favor corrige los errores en el formulario', 'error');
            }
        }, 
        error: function(jqXHR, exception){
            $("button[type=submit]").prop('disabled', false);
            Swal.fire('Error', 'Ocurrió un error al crear el cupón', 'error');
        }
    });
});
</script>
@endsection