@extends('layouts.app')
@section('content')
<div class="container">
<form method="POST" action="{{ route('user_fit.storeUser', $user) }}" enctype="multipart/form-data">
@csrf
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center  bg-dark text-white">
                    <span>Editar Usuario</span>
                    <div class="d-flex gap-2">
                        <a href="{{ url()->previous() }}" class="btn btn-sm btn-secondary">
                         <i class="bi bi-chevron-left"></i>
                        Volver</a>
                    </div>
                </div>
                <div class="card-body bg-white">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger mb-3">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                        <h6 class="mb-3">Datos del Usuario</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nombre</label>
                                <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                            </div>


                            <div class="col-md-6">
                                <label class="form-label">Nueva Contraseña</label>
                                <input type="password" name="password" class="form-control" placeholder="Opcional">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Confirmar Contraseña</label>
                                <input type="password" name="password_confirmation" class="form-control" placeholder="Opcional">
                            </div>

                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $user->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">Usuario activo</label>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <h6 class="mb-3">Datos de Persona</h6>
                        <p class="text-muted small mb-3">
                            @if($user->people_id)
                                Este usuario ya tiene relación con Persona. Actualiza los campos según sea necesario.
                            @else
                                Este usuario aún no tiene relación con Persona. Completa los campos para crearla.
                            @endif
                        </p>

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label">Apellidos</label>
                                <input type="text" name="people[last_name]" class="form-control" value="{{ old('people.last_name', optional($user->people)->last_name) }}">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Fecha de Nacimiento</label>
                                <input type="date" name="people[birth_date]" class="form-control" value="{{ old('people.birth_date', optional($user->people)->birth_date) }}">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Género</label>
                                <select name="people[gender]" class="form-select">
                                    <option value="">Seleccionar</option>
                                    <option value="male" {{ old('people.gender', optional($user->people)->gender) === 'male' ? 'selected' : '' }}>Masculino</option>
                                    <option value="female" {{ old('people.gender', optional($user->people)->gender) === 'female' ? 'selected' : '' }}>Femenino</option>
                                    <option value="other" {{ old('people.gender', optional($user->people)->gender) === 'other' ? 'selected' : '' }}>Otro</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Teléfono</label>
                                <input type="text" name="people[phone]" class="form-control" value="{{ old('people.phone', optional($user->people)->phone) }}">
                            </div>


                            <div class="col-md-12">
                                <label class="form-label">Dirección</label>
                                <input type="text" name="people[address]" class="form-control" value="{{ old('people.address', optional($user->people)->address) }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Tipo de Documento</label>
                                <select name="people[document_type]" class="form-select">
                                    <option value="">Seleccionar</option>
                                    <option value="cedula" {{ old('people.document_type', optional($user->people)->document_type) === 'cedula' ? 'selected' : '' }}>Cédula</option>
                                    <option value="rif" {{ old('people.document_type', optional($user->people)->document_type) === 'rif' ? 'selected' : '' }}>RIF</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Número de Documento</label>
                                <input type="text" name="people[document_number]" class="form-control" value="{{ old('people.document_number', optional($user->people)->document_number) }}">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                        </div>
                        <hr class="my-4">
                        <h6 class="mb-3">Membresía</h6>
                        @php
                            $consumedMembershipDays = $user->daysOfMembership();
                            $totalMembershipDays = $user->totalDaysOfMembership();
                            $membershipProgressPercent = $totalMembershipDays > 0
                                ? min(100, round(($consumedMembershipDays / $totalMembershipDays) * 100, 2))
                                : 0;
                            $indicatorDots = max(0, $totalMembershipDays);
                            $filledDots = min($consumedMembershipDays, $indicatorDots);
                        @endphp
                        <div class="card border-0 shadow-sm mb-3 bg-light">
                            <div class="card-body py-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="fw-semibold">Consumo de membresía (Mes en curso)</div>
                                    <div class="small text-muted">{{ $consumedMembershipDays }} / {{ $totalMembershipDays }} días ({{ $membershipProgressPercent }}%)</div>
                                </div>
                                @if ($indicatorDots > 0)
                                    <div class="d-flex align-items-center gap-1 mt-2 flex-wrap" aria-label="Indicador de días consumidos">
                                        @for ($dot = 1; $dot <= $indicatorDots; $dot++)
                                            <span
                                                class="rounded-circle {{ $dot <= $filledDots ? 'bg-dark' : 'bg-white border' }}"
                                                style="width: 10px; height: 10px; display: inline-block;"
                                            ></span>
                                        @endfor
                                    </div>
                                @else
                                    <div class="small text-muted mt-2">Sin días de membresía para mostrar.</div>
                                @endif
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-success">Guardar</button>
                        </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
                <div class="card mb-3 shadow-sm">
                    <div class="card-header bg-info text-white">Imagen</div>
                    <div class="card-body small">
                        <div class="row mb-4 align-items-center">
                            <div class="col-md-12 text-center">
                                <img id="user-image-preview" src="{{ !empty(optional($user->people)->url_face) ? route('user_fit.users.image', ['filename' => optional($user->people)->url_face]) : asset('images/no-user-imagen.jpg') }}" alt="Imagen de usuario" class="img-thumbnail mb-2" style="width: 180px; height: 180px; object-fit: contain; object-position: center; background-color: #f8f9fa;">
                            </div>
                            <div class="col-md-12 text-center">
                                <label class="form-label w-100">Subir imagen</label>
                                <input type="file" name="user_image" class="form-control" accept="image/*" onchange="
                                    const [file] = this.files;
                                    if (file) {
                                        document.getElementById('user-image-preview').src = URL.createObjectURL(file);
                                    }
                                ">
                            </div>
                        </div>
                    </div>
                </div>
            <div class="card mb-3 shadow-sm">
                <div class="card-header bg-info text-white">Ayuda por Campo</div>
                <div class="card-body small">
                    <p class="mb-2"><strong>Nombre:</strong> Nombre completo para identificar la cuenta.</p>
                    <p class="mb-2"><strong>Email:</strong> Debe ser único para iniciar sesión.</p>
                    <p class="mb-2"><strong>Nueva Contraseña:</strong> Déjala vacía para conservar la contraseña actual.</p>
                    <p class="mb-2"><strong>Usuario activo:</strong> Habilita o deshabilita el acceso.</p>
                    <hr>
                    <p class="mb-2"><strong>Apellidos:</strong> Datos de identidad personal asociados al usuario.</p>
                    <p class="mb-2"><strong>Fecha de Nacimiento:</strong> Usa formato YYYY-MM-DD.</p>
                    <p class="mb-2"><strong>Género:</strong> Selecciona Masculino, Femenino u Otro.</p>
                    <p class="mb-2"><strong>Teléfono:</strong> Número de contacto de la persona.</p>
                    <p class="mb-2"><strong>Dirección:</strong> Dirección principal de la persona.</p>
                    <p class="mb-2"><strong>Tipo/Número de Documento:</strong> Datos de identificación.</p>
                    <hr>
                    <p class="mb-2"><strong>Imagen:</strong> Puedes subir una foto de perfil para el usuario.</p>
                    <p class="mb-2"><strong>Consumo de membresía:</strong> El indicador muestra los días consumidos del mes en curso.</p>
                    <hr>
                    <p class="mb-0"><strong>Guardar:</strong> Aplica los cambios del formulario actual.</p>
                </div>
            </div>
        </div>
    </div>
    </form>
</div>
@endsection