@extends('admin.layouts.index-template', [
    'pageTitle' => 'Cupones de Descuento',
    'items' => $discountCoupons,
    'icon' => 'price-tag-3',
    'module' => 'Cupones',
    'createRoute' => route('coupon.create'),
    'indexRoute' => route('coupon.index'),
    'searchPlaceholder' => 'Buscar por código, nombre o descripción...',
    'emptyIcon' => 'tags',
    'emptyTitle' => 'No hay cupones',
    'emptyMessage' => 'Comience creando su primer cupón de descuento',
    'stats' => $stats
])

@push('css')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@section('header-buttons')
    <a href="{{ route('coupon.create') }}" class="btn btn-primary">
        <i class="ri-add-line"></i> Nuevo Cupón
    </a>
@endsection

@section('action-buttons')
    <button type="button" class="btn btn-success btn-sm me-2" title="Exportar cupones">
        <i class="ri-file-excel-line"></i> Exportar
    </button>
@endsection

@section('filters')
    <!-- Filtro por Estado -->
    <div class="col-md-2">
        <label class="form-label small">Estado</label>
        <select name="status" class="form-select form-select-sm">
            <option value="">Todos</option>
            <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Activo</option>
            <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inactivo</option>
        </select>
    </div>
    
    <!-- Filtro por Tipo -->
    <div class="col-md-2">
        <label class="form-label small">Tipo</label>
        <select name="type" class="form-select form-select-sm">
            <option value="">Todos</option>
            <option value="percent" {{ request('type') === 'percent' ? 'selected' : '' }}>Porcentaje</option>
            <option value="fixed" {{ request('type') === 'fixed' ? 'selected' : '' }}>Monto Fijo</option>
        </select>
    </div>
@endsection

@section('table-headers')
    <tr>
        <th width="100">Código</th>
        <th>Nombre</th>
        <th width="120">Descuento</th>
        <th width="100">Tipo</th>
        <th width="100">Uso</th>
        <th width="130">Inicia</th>
        <th width="130">Vence</th>
        <th width="100">Estado</th>
        <th width="120">Acciones</th>
    </tr>
@endsection

@section('table-body')
    @foreach($discountCoupons as $coupon)
    <tr>
        <td>
            <span class="badge bg-primary">{{ $coupon->code }}</span>
        </td>
        <td>
            <div class="d-flex align-items-center">
                <div>
                    <strong>{{ $coupon->name }}</strong>
                    @if($coupon->description)
                        <br><small class="text-muted">{{ Str::limit($coupon->description, 50) }}</small>
                    @endif
                </div>
            </div>
        </td>
        <td>
            @if($coupon->type == 'percent')
                <span class="badge bg-info">{{ $coupon->discount_amount }}%</span>
            @else
                <span class="badge bg-success">${{ number_format($coupon->discount_amount, 2) }}</span>
            @endif
        </td>
        <td>
            @if($coupon->type == 'percent')
                <span class="badge badge-outline-info">Porcentaje</span>
            @else
                <span class="badge badge-outline-success">Monto Fijo</span>
            @endif
        </td>
        <td>
            @php
                $used = \App\Models\Order::where('coupon_code_id', $coupon->id)->count();
                $maxUses = $coupon->max_uses ?: '∞';
            @endphp
            <small class="text-muted">{{ $used }}/{{ $maxUses }}</small>
            @if($coupon->max_uses && $used >= $coupon->max_uses)
                <br><span class="badge bg-danger">Agotado</span>
            @endif
        </td>
        <td>
            @if($coupon->starts_at)
                <small class="text-muted">{{ \Carbon\Carbon::parse($coupon->starts_at)->format('d/m/Y') }}</small>
                @if(\Carbon\Carbon::parse($coupon->starts_at)->isFuture())
                    <br><span class="badge bg-warning">Programado</span>
                @endif
            @else
                <span class="text-muted">-</span>
            @endif
        </td>
        <td>
            @if($coupon->expires_at)
                <small class="text-muted">{{ \Carbon\Carbon::parse($coupon->expires_at)->format('d/m/Y') }}</small>
                @if(\Carbon\Carbon::parse($coupon->expires_at)->isPast())
                    <br><span class="badge bg-danger">Vencido</span>
                @endif
            @else
                <span class="text-muted">Sin vencimiento</span>
            @endif
        </td>
        <td>
            @if($coupon->status == 1)
                @if($coupon->expires_at && \Carbon\Carbon::parse($coupon->expires_at)->isPast())
                    <span class="badge bg-danger">Vencido</span>
                @elseif($coupon->starts_at && \Carbon\Carbon::parse($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
        </td>
        <td>
            <div class="d-flex gap-1">
                <a href="{{ route('coupon.edit', $coupon->id) }}"
                   class="btn btn-sm btn-warning" title="Editar">
                    <i class="ri-pencil-line"></i>
                </a>

                @if($coupon->status == 1)
                    <button type="button" class="btn btn-sm btn-success"
                            onclick="toggleStatus({{ $coupon->id }}, 0)" title="Desactivar">
                        <i class="ri-eye-line"></i>
                    </button>
                @else
                    <button type="button" class="btn btn-sm btn-secondary"
                            onclick="toggleStatus({{ $coupon->id }}, 1)" title="Activar">
                        <i class="ri-eye-off-line"></i>
                    </button>
                @endif

                <button type="button" class="btn btn-sm btn-danger"
                        onclick="deleteCoupon({{ $coupon->id }})" title="Eliminar">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </div>
        </td>
    </tr>
    @endforeach
@endsection

@push('js')
<script>
// Resaltar card activo si hay filtro
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const activeFilter = urlParams.get('filter');
    
    if (activeFilter) {
        const cards = document.querySelectorAll('.stats-card');
        cards.forEach(card => {
            const cardFilter = card.getAttribute('onclick').match(/'([^']+)'/)[1];
            if (cardFilter === activeFilter) {
                card.style.opacity = '1';
                card.style.transform = 'scale(1.05)';
                card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
            } else {
                card.style.opacity = '0.7';
            }
        });
    }
});

function toggleStatus(id, status) {
    const action = status == 1 ? 'activar' : 'desactivar';
    const title = status == 1 ? '¿Activar cupón?' : '¿Desactivar cupón?';
    
    Swal.fire({
        title: title,
        text: `¿Estás seguro que deseas ${action} este cupón?`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: status == 1 ? '#28a745' : '#ffc107',
        cancelButtonColor: '#6c757d',
        confirmButtonText: `Sí, ${action}`,
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            // Actualizar status usando AJAX
            const updateUrl = `/admin/coupons/${id}/status`;
            console.log('Update URL:', updateUrl); // Debug
            $.ajax({
                url: updateUrl,
                type: 'PUT',
                data: {
                    status: status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status) {
                        Swal.fire({
                            title: '¡Éxito!',
                            text: response.message,
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: response.message || 'Ocurrió un error',
                            icon: 'error'
                        });
                    }
                },
                error: function(xhr) {
                    console.log('Error response:', xhr.responseJSON); // Debug
                    let errorMessage = 'Ocurrió un error al procesar la solicitud';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).flat().join(', ');
                    }
                    Swal.fire({
                        title: 'Error',
                        text: errorMessage,
                        icon: 'error'
                    });
                }
            });
        }
    });
}

function deleteCoupon(id) {
    Swal.fire({
        title: '¿Estás seguro?',
        text: "Esta acción no se puede deshacer",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            // Crear formulario dinámico para enviar DELETE
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `{{ route('coupon.index') }}/${id}`;
            
            // CSRF Token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);
            
            // Method DELETE
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}
</script>
@endpush