@extends('layouts.admin')
@section('title', 'Mi Perfil')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="d-flex align-items-center gap-3 mb-4">
            <div>
                <h5 class="fw-bold mb-1">Mi Perfil</h5>
                <p class="text-muted small mb-0">Informacion de la cuenta, plan y suscripcion</p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card table-card">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="fw-bold mb-0"><i class="bi bi-person me-2 text-primary"></i>Informacion de la Cuenta</h6>
                    </div>
                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                            @csrf @method('PUT')

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Nombre de la cuenta</label>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', auth()->user()->name) }}" required>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', auth()->user()->email) }}" required>
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Logo del Colegio</label>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="bg-light border rounded-3 d-flex align-items-center justify-content-center overflow-hidden" style="width:90px;height:90px;flex-shrink:0;">
                                        @if(auth()->user()->logo)
                                            <img src="{{ image_url(auth()->user()->logo) }}" alt="Logo" style="width:100%;height:100%;object-fit:cover;">
                                        @else
                                            <i class="bi bi-building fs-1 text-muted"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <input type="file" name="logo" id="logoInput" class="form-control @error('logo') is-invalid @enderror" accept="image/*">
                                        @error('logo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        <small class="text-muted d-block mt-1">PNG, JPG, WEBP o GIF. Maximo 2MB.</small>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">

                            <h6 class="fw-bold mb-3"><i class="bi bi-credit-card me-2 text-primary"></i>Plan y Suscripcion</h6>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Plan</label>
                                    <select name="plan" class="form-select @error('plan') is-invalid @enderror">
                                        @foreach($plans as $value => $label)
                                            <option value="{{ $value }}" {{ (old('plan', auth()->user()->plan) === $value) ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    @error('plan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Espacio asignado (MB)</label>
                                    <input type="number" name="storage_limit_mb" class="form-control @error('storage_limit_mb') is-invalid @enderror" value="{{ old('storage_limit_mb', auth()->user()->storage_limit_mb) }}" min="1" required>
                                    @error('storage_limit_mb')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Fecha de inicio</label>
                                    <input type="date" name="subscription_started_at" class="form-control @error('subscription_started_at') is-invalid @enderror" value="{{ old('subscription_started_at', auth()->user()->subscription_started_at?->format('Y-m-d')) }}">
                                    @error('subscription_started_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Fecha de renovacion</label>
                                    <input type="date" name="subscription_ends_at" class="form-control @error('subscription_ends_at') is-invalid @enderror" value="{{ old('subscription_ends_at', auth()->user()->subscription_ends_at?->format('Y-m-d')) }}">
                                    @error('subscription_ends_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <hr class="my-4">

                            <h6 class="fw-bold mb-3"><i class="bi bi-shield-lock me-2 text-primary"></i>Cambiar Contrasena</h6>
                            <div class="mb-3">
                                <label class="form-label">Contrasena actual</label>
                                <input type="password" name="current_password" class="form-control @error('current_password') is-invalid @enderror">
                                @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Nueva contrasena</label>
                                    <input type="password" name="new_password" class="form-control @error('new_password') is-invalid @enderror">
                                    @error('new_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Confirmar nueva contrasena</label>
                                    <input type="password" name="new_password_confirmation" class="form-control">
                                </div>
                            </div>
                            <small class="text-muted d-block mb-3">Deja los campos de contrasena vacios si no deseas cambiarla.</small>

                            <div class="d-flex justify-content-end gap-2">
                                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Guardar Cambios</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card table-card">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="fw-bold mb-0"><i class="bi bi-hdd me-2 text-primary"></i>Resumen</h6>
                    </div>
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center gap-3 mb-4">
                            <div class="bg-primary bg-opacity-10 text-primary rounded-3 d-flex align-items-center justify-content-center" style="width:50px;height:50px;font-size:1.4rem;">
                                <i class="bi bi-stars"></i>
                            </div>
                            <div>
                                <div class="small text-muted">Plan actual</div>
                                <div class="fw-bold text-capitalize">{{ $plans[auth()->user()->plan] ?? auth()->user()->plan }}</div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="d-flex justify-content-between small mb-2">
                                <span class="text-muted">Almacenamiento</span>
                                <span class="fw-semibold">{{ $usedMb }} MB / {{ $limitMb }} MB</span>
                            </div>
                            <div class="progress" style="height:8px;">
                                <div class="progress-bar {{ $percent > 90 ? 'bg-danger' : 'bg-primary' }}" role="progressbar" style="width:{{ min($percent, 100) }}%;" aria-valuenow="{{ $percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="small text-muted mt-1">{{ $percent }}% utilizado</div>
                        </div>

                        <div class="mb-4">
                            <div class="small text-muted mb-1">Fecha de inicio</div>
                            <div class="fw-semibold">{{ auth()->user()->subscription_started_at?->format('d M Y') ?? 'No definida' }}</div>
                        </div>

                        <div class="mb-4">
                            <div class="small text-muted mb-1">Fecha de renovacion</div>
                            <div class="fw-semibold">
                                {{ auth()->user()->subscription_ends_at?->format('d M Y') ?? 'No definida' }}
                            </div>
                        </div>

                        @php
                            $endsAt = auth()->user()->subscription_ends_at;
                            $daysLeft = $endsAt ? now()->startOfDay()->diffInDays($endsAt, false) : null;
                        @endphp
                        @if($endsAt)
                            <div class="rounded-3 p-3 {{ $daysLeft !== null && $daysLeft < 0 ? 'bg-danger bg-opacity-10 text-danger' : ($daysLeft !== null && $daysLeft <= 7 ? 'bg-warning bg-opacity-10 text-warning' : 'bg-success bg-opacity-10 text-success') }}">
                                <i class="bi {{ $daysLeft !== null && $daysLeft < 0 ? 'bi-exclamation-triangle' : 'bi-clock-history' }} me-1"></i>
                                @if($daysLeft !== null && $daysLeft < 0)
                                    Suscripcion vencida hace {{ abs($daysLeft) }} dias
                                @elseif($daysLeft !== null && $daysLeft === 0)
                                    Se renueva hoy
                                @elseif($daysLeft !== null)
                                    {{ $daysLeft }} dias para la renovacion
                                @else
                                    Suscripcion activa
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('logoInput')?.addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (!file) return;
        var reader = new FileReader();
        reader.onload = function (ev) {
            var img = document.querySelector('img[alt="Logo"]');
            if (img) {
                img.src = ev.target.result;
            } else {
                var box = document.querySelector('.bg-light.border.rounded-3');
                if (box) {
                    box.innerHTML = '<img src="' + ev.target.result + '" alt="Logo" style="width:100%;height:100%;object-fit:cover;">';
                }
            }
        };
        reader.readAsDataURL(file);
    });
</script>
@endpush