@extends('mails.index')

@section('content')
    <td align="center" style="padding: 40px 20px;">
        <div
            style="max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
            <!-- Header -->
            <div style="background: #fff3cd; padding: 30px; border-radius: 8px 8px 0 0; text-align: center;">
                <div
                    style="display: inline-block; background: #ffecb5; border-radius: 50%; padding: 15px; animation: pulse 1.5s infinite;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 32px; color: #ffc107;"></i>
                </div>
                <h1 style="color: #856404; margin: 20px 0 0; font-size: 24px; font-weight: 600;">
                    Modificación de Presupuesto
                </h1>
            </div>

            <!-- Content -->
            <div style="padding: 40px 30px; color: #4a5568;">
                <p style="margin: 0 0 25px; font-size: 16px;">
                    El usuario <strong style="color: #2d3748;">{{ $usuario->nombre_completo }}</strong> ha realizado un
                    cambio en el presupuesto del proyecto:
                </p>

                <div style="background: #f8f9fa; border-radius: 6px; padding: 25px; margin-bottom: 30px;">
                    <h2 style="margin: 0 0 15px; font-size: 20px; color: #2d3748;">
                        {{ $proyecto->nombre }}
                    </h2>

                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                        <div style="padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #e2e8f0;">
                            <div style="font-size: 14px; color: #718096; margin-bottom: 8px;">Presupuesto anterior</div>
                            <div style="font-size: 18px; color: #e53e3e; font-weight: 600;">
                                ${{ number_format($valorAnterior, 0, '', '.') }}
                            </div>
                        </div>

                        <div style="padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #e2e8f0;">
                            <div style="font-size: 14px; color: #718096; margin-bottom: 8px;">Nuevo presupuesto</div>
                            <div style="font-size: 18px; color: #38a169; font-weight: 600;">
                                ${{ number_format($valorActual, 0, '', '.') }}
                            </div>
                        </div>
                    </div>

                    <div
                        style="margin-top: 20px; padding: 15px; background: #f8fafc; border-radius: 6px; text-align: center;">
                        <div style="font-size: 14px; color: #718096;">Diferencia</div>
                        <div style="font-size: 20px; color: #2d3748; font-weight: 700;">
                            ${{ number_format(abs($diferencia), 0, '', '.') }}
                            <span style="color: {{ $diferencia >= 0 ? '#38a169' : '#e53e3e' }}; font-size: 14px;">
                                ({{ $diferencia >= 0 ? '+' : '-' }}{{ number_format($porcentajeCambio, 2) }}%)
                            </span>
                        </div>
                    </div>
                </div>

                <div style="text-align: center; margin: 30px 0;">
                    <a href="{{ route('project.edit', ['proyecto' => $proyecto->id]) }}"
                        style="display: inline-block; padding: 12px 30px; background: #4299e1; color: white; 
                          text-decoration: none; border-radius: 25px; font-weight: 600; transition: all 0.3s;
                          box-shadow: 0 2px 4px rgba(66,153,225,0.3);"
                        onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 6px rgba(66,153,225,0.4)';"
                        onmouseout="this.style.transform='none'; this.style.boxShadow='0 2px 4px rgba(66,153,225,0.3)';">
                        Ver proyecto
                    </a>
                </div>
            </div>

            <!-- Footer -->
            <div
                style="padding: 25px; background: #f7fafc; border-radius: 0 0 8px 8px; text-align: center; 
                    border-top: 1px solid #e2e8f0;">
                <p style="margin: 0; font-size: 14px; color: #718096;">
                    Este cambio ha sido registrado en el sistema el {{ now()->format('d/m/Y H:i') }}<br>
                    K2 Digital - Gestión de Proyectos
                </p>
            </div>
        </div>

        <style>
            @keyframes pulse {
                0% {
                    transform: scale(1);
                }

                50% {
                    transform: scale(1.05);
                }

                100% {
                    transform: scale(1);
                }
            }
        </style>
    </td>
@endsection