@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;
}

.usage-stats {
    background: #f8f9fa;
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
</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">Editar 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>
                            
                            <!-- Usage Statistics -->
                            <div class="usage-stats">
                                <h6><i class="ri-bar-chart-line"></i> Estadísticas de Uso</h6>
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="text-muted">Usos Totales:</span>
                                        <strong>{{ $coupon->getUsageCount() }}</strong>
                                        @if($coupon->max_uses)
                                            / {{ $coupon->max_uses }}
                                        @endif
                                    </div>
                                    <div class="col-md-4">
                                        <span class="text-muted">Estado:</span>
                                        @if($coupon->status)
                                            @if($coupon->expires_at && $coupon->expires_at->isPast())
                                                <span class="badge bg-danger">Vencido</span>
                                            @elseif($coupon->starts_at && $coupon->starts_at->isFuture())
                                                <span class="badge bg-warning">Programado</span>
                                            @else
                                                <span class="badge bg-success">Activo</span>
                                            @endif
                                        @else
                                            <span class="badge bg-secondary">Inactivo</span>
                                        @endif
                                    </div>
                                    <div class="col-md-4">
                                        <span class="text-muted">Tipo:</span>
                                        <strong>{{ $coupon->type_text }}</strong>
                                    </div>
                                </div>
                            </div>
                            
                            <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" value="{{ $coupon->code }}" placeholder="Ej: DESCUENTO20">
                                        <p class="error"></p>
                                        <small class="help-text">Código único para el cupón</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" value="{{ $coupon->name }}" placeholder="Ej: Descuento de Primavera">
                                        <p class="error"></p>
                                        <small class="help-text">Nombre descriptivo del 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">{{ $coupon->description }}</textarea>
                                        <p class="error"></p>
                                        <small class="help-text">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" {{ $coupon->type == 'percent' ? 'selected' : '' }}>Porcentaje (%)</option>
                                            <option value="fixed" {{ $coupon->type == 'fixed' ? 'selected' : '' }}>Monto Fijo ($)</option>
                                        </select>
                                        <p class="error"></p>
                                        <small class="help-text">Tipo de descuento aplicado</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">
                                                    {{ $coupon->type == 'percent' ? '%' : '$' }}
                                                </span>
                                            </div>
                                            <input type="number" name="discount_amount" id="discount_amount" class="form-control" value="{{ $coupon->discount_amount }}" step="0.01">
                                        </div>
                                        <p class="error"></p>
                                        <small class="help-text">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" value="{{ $coupon->min_amount }}" step="0.01">
                                        </div>
                                        <p class="error"></p>
                                        <small class="help-text">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" {{ $coupon->status == 1 ? 'selected' : '' }}>Activo</option>
                                            <option value="0" {{ $coupon->status == 0 ? 'selected' : '' }}>Inactivo</option>
                                        </select>
                                        <p class="error"></p>
                                        <small class="help-text">Estado actual 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" value="{{ $coupon->max_uses }}" 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
                                            @if($coupon->max_uses)
                                                <br><strong>Usados:</strong> {{ $coupon->getUsageCount() }} / {{ $coupon->max_uses }}
                                            @endif
                                        </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" value="{{ $coupon->max_uses_user }}" 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</small>
                                    </div>
                                </div>
                            </div>
                            
                            @if($coupon->max_uses && $coupon->getUsageCount() >= $coupon->max_uses)
                                <div class="alert alert-warning">
                                    <i class="ri-error-warning-line"></i>
                                    <strong>Atención:</strong> Este cupón ha alcanzado su límite máximo de usos.
                                </div>
                            @else
                                <div class="alert alert-info">
                                    <i class="ri-information-line"></i>
                                    <strong>Información:</strong> 
                                    @if($coupon->max_uses)
                                        Quedan {{ $coupon->max_uses - $coupon->getUsageCount() }} usos disponibles.
                                    @else
                                        Este cupón tiene usos ilimitados.
                                    @endif
                                </div>
                            @endif
                        </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" 
                                               value="{{ $coupon->starts_at ? $coupon->starts_at->format('Y-m-d H:i:s') : '' }}" 
                                               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
                                            @if($coupon->starts_at)
                                                @if($coupon->starts_at->isFuture())
                                                    <br><span class="text-warning">⏰ Cupón programado para activarse</span>
                                                @else
                                                    <br><span class="text-success">✓ Cupón ya activo</span>
                                                @endif
                                            @endif
                                        </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" 
                                               value="{{ $coupon->expires_at ? $coupon->expires_at->format('Y-m-d H:i:s') : '' }}" 
                                               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
                                            @if($coupon->expires_at)
                                                @if($coupon->expires_at->isPast())
                                                    <br><span class="text-danger">⚠️ Cupón vencido</span>
                                                @else
                                                    <br><span class="text-info">⏳ Válido hasta {{ $coupon->expires_at->format('d/m/Y H:i') }}</span>
                                                @endif
                                            @endif
                                        </small>
                                    </div>
                                </div>
                            </div>
                            
                            @if($coupon->expires_at && $coupon->expires_at->isPast())
                                <div class="alert alert-danger">
                                    <i class="ri-calendar-close-line"></i>
                                    <strong>Cupón Vencido:</strong> Este cupón expiró el {{ $coupon->expires_at->format('d/m/Y H:i') }}. 
                                    Actualice la fecha de vencimiento para reactivarlo.
                                </div>
                            @elseif($coupon->starts_at && $coupon->starts_at->isFuture())
                                <div class="alert alert-warning">
                                    <i class="ri-time-line"></i>
                                    <strong>Cupón Programado:</strong> Este cupón se activará el {{ $coupon->starts_at->format('d/m/Y H:i') }}.
                                </div>
                            @endif
                        </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> Actualizar 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: false // Allow past dates for editing
    });

    $('#expires_at').datetimepicker({
        format:'Y-m-d H:i:s',
        minDate: false // Allow past dates for editing
    });

    // 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('max', '100');
        } else {
            $('#discount_amount').removeAttr('max');
        }
    });
});

$("#discountForm").submit(function(event){
    event.preventDefault();
    var element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("coupon.update", $coupon->id) }}',
        type: 'put',
        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 actualizado 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 actualizar el cupón', 'error');
        }
    });
});
</script>
@endsection