@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
        </div>
    </div>  
    <form method="POST" action="{{ route('admin_fit.users.store') }}" 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>Crear Usuario</span>
                        <a href="{{ route('admin_fit.users.index') }}" class="btn btn-sm btn-secondary">
                            <i class="bi bi-chevron-left"></i>
                            Volver</a>
                    </div>
                    <div class="card-body">
                            <h6 class="mb-3">Datos del Usuario</h6>
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">Rol</label>
                                    <select name="role_name" id="role_name" class="form-select @error('role_name') is-invalid @enderror" required>
                                        <option value="">Seleccionar</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->name }}" {{ old('role_name') === $role->name ? 'selected' : '' }}>
                                                {{ $role->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('role_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Nombre completo</label>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="col-md-6">
                                    <label class="form-label">Contraseña</label>
                                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Obligatoria" required>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Confirmar Contraseña</label>
                                    <input type="password" name="password_confirmation" class="form-control @error('password') is-invalid @enderror" placeholder="Obligatoria" required>
                                </div>

                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input @error('is_active') is-invalid @enderror" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Usuario activo</label>
                                        @error('is_active')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>















                            <hr class="my-4">
                            <h6 class="mb-3">Membresía</h6>
                            <p class="text-muted small mb-3">Puede asignar una membresía al usuario. Si no selecciona ninguna, el usuario no tendrá membresía activa.</p>
                                <div class="col-12">
                                    <div class="form-check">
                                        <input
                                            class="form-check-input @error('is_couple') is-invalid @enderror"
                                            type="checkbox"
                                            name="is_couple"
                                            id="is_couple"
                                            value="1"
                                            {{ old('is_couple') ? 'checked' : '' }}
                                        >
                                        <label class="form-check-label" for="is_couple">Viene en pareja</label>
                                        @error('is_couple')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12 {{ old('is_couple') ? '' : 'd-none' }}" id="coupleSelectWrapper">
                                    <label class="form-label">Usuario pareja</label>
                                    <select name="couple_id" id="couple_id" class="form-select @error('couple_id') is-invalid @enderror">
                                        <option value="">Seleccionar usuario</option>
                                        @foreach($coupleCandidates as $candidate)
                                            <option value="{{ $candidate->id }}" {{ (string) old('couple_id') === (string) $candidate->id ? 'selected' : '' }}>
                                                {{ trim($candidate->name . ' ' . ($candidate->people->last_name ?? '')) }} - {{ $candidate->email }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('couple_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            <div class="row mb-3 {{ old('is_couple') && old('couple_id') ? 'd-none' : '' }}" id="membershipSection">
                                <div class="col-md-6">
                                    <label class="form-label">Membresía</label>
                                    <select name="membership_id" id="membership_id" class="form-select">
                                        <option value="">Sin membresía</option>
                                        @foreach($memberships as $membership)
                                            <option value="{{ $membership->id }}" {{ old('membership_id') == $membership->id ? 'selected' : '' }}>
                                                {{ $membership->name }} ({{ $membership->days }} días, ${{ $membership->price }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Plan de pago</label>
                                    <select name="payment_plan_id" id="payment_plan_id" class="form-select @error('payment_plan_id') is-invalid @enderror">
                                        <option value="">Sin plan de pago</option>
                                        @foreach($paymentPlans as $paymentPlan)
                                            <option value="{{ $paymentPlan->id }}" {{ old('payment_plan_id') == $paymentPlan->id ? 'selected' : '' }}>
                                                {{ $paymentPlan->plan_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('payment_plan_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Fecha de inicio de membresía</label>
                                    <input type="date" name="start_date" id="start_date" class="form-control" value="{{ old('start_date') }}">
                                </div>
                            </div>
                            <hr class="my-4">
                            <div id="entryTimeSection" class="{{ old('is_couple') && old('couple_id') ? 'd-none' : '' }}">
                                <h6 class="mb-3">Horario de Entrada/Salida</h6>
                                <p class="text-muted small mb-3">Puede asignar un horario de entrada y salida al usuario. Si no selecciona ninguno, el usuario no tendrá horario activo.</p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Horario de Entrada</label>
                                        <select name="entry_time_id" id="entry_time_id" class="form-select">
                                            <option value="">Sin horario</option>
                                            @foreach($entryTimes as $entryTime)
                                                <option value="{{ $entryTime->id }}" {{ old('entry_time_id') == $entryTime->id ? 'selected' : '' }}>
                                                    {{ $entryTime->entry_time }} - {{ $entryTime->exit_time }} ({{ $entryTime->period }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-4">
                            <h6 class="mb-3">Datos de Persona complementarios</h6>
                            <p class="text-muted small mb-3">La creación de Persona es obligatoria para relacionarla con el usuario.</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 @error('people.last_name') is-invalid @enderror" value="{{ old('people.last_name') }}" required>
                                    @error('people.last_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Fecha de Nacimiento</label>
                                    <input type="date" name="people[birth_date]" class="form-control @error('people.birth_date') is-invalid @enderror" value="{{ old('people.birth_date') }}">
                                    @error('people.birth_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

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

                                <div class="col-md-4">
                                    <label class="form-label">Teléfono</label>
                                    <input type="text" name="people[phone]" class="form-control @error('people.phone') is-invalid @enderror" value="{{ old('people.phone') }}" required>
                                    @error('people.phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">Dirección</label>
                                    <input type="text" name="people[address]" class="form-control @error('people.address') is-invalid @enderror" value="{{ old('people.address') }}" required>
                                    @error('people.address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Tipo de Documento</label>
                                    <select name="people[document_type]" class="form-select @error('people.document_type') is-invalid @enderror">
                                        <option value="">Seleccionar</option>
                                        <option value="cedula" {{ old('people.document_type') === 'cedula' ? 'selected' : '' }}>Cédula</option>
                                        <option value="rif" {{ old('people.document_type') === 'rif' ? 'selected' : '' }}>RIF</option>
                                    </select>
                                    @error('people.document_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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 @error('people.document_number') is-invalid @enderror" value="{{ old('people.document_number') }}" required>
                                    @error('people.document_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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="{{ 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 @error('user_image') is-invalid @enderror" accept="image/*" onchange="
                                    const [file] = this.files;
                                    if (file) {
                                        document.getElementById('user-image-preview').src = URL.createObjectURL(file);
                                    }
                                ">
                                @error('user_image')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </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>Rol:</strong> Se asigna al crear y el usuario hereda los permisos de ese rol.</p>
                        <p class="mb-2"><strong>Contraseña:</strong> Debe tener al menos 8 caracteres.</p>
                        <p class="mb-2"><strong>Usuario activo:</strong> Habilita o deshabilita el acceso.</p>
                        <p class="mb-2"><strong>Viene en pareja:</strong> Al seleccionarlo y elegir un usuario pareja, se heredan la membresía y el horario de entrada/salida de ese usuario.</p>
                        <hr>
                        <p class="mb-2"><strong>Apellidos:</strong> Obligatorios para crear la relación Persona.</p>
                        <p class="mb-2"><strong>Fecha de Nacimiento:</strong> Usa formato YYYY-MM-DD.</p>
                        <p class="mb-2"><strong>Género:</strong> Campo obligatorio.</p>
                        <p class="mb-2"><strong>Teléfono:</strong> Campo obligatorio para contacto.</p>
                        <p class="mb-2"><strong>Dirección:</strong> Campo obligatorio.</p>
                        <p class="mb-2"><strong>Tipo/Número de Documento:</strong> Ambos campos obligatorios.</p>
                        <hr>
                        <p class="mb-2"><strong>Membresía:</strong> Selecciona una membresía para asociar al usuario. Si no seleccionas ninguna, el usuario no tendrá membresía activa.</p>
                        <p class="mb-2"><strong>Nota de pareja:</strong> Si marcas la opción de pareja y eliges un usuario, esta sección no aplica porque la membresía y el horario se heredan automáticamente.</p>
                        <p class="mb-2"><strong>Fecha de inicio de membresía:</strong> Puedes definir desde cuándo estará activa la membresía asignada.</p>
                    </div>
                </div>
            </div>
        </div>
    </form>


</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const isCoupleCheckbox = document.getElementById('is_couple');
    const coupleSelectWrapper = document.getElementById('coupleSelectWrapper');
    const coupleSelect = document.getElementById('couple_id');
    const roleSelect = document.getElementById('role_name');
    const membershipSection = document.getElementById('membershipSection');
    const entryTimeSection = document.getElementById('entryTimeSection');
    const membershipSelect = document.getElementById('membership_id');
    const paymentPlanSelect = document.getElementById('payment_plan_id');
    const startDateInput = document.getElementById('start_date');
    const entryTimeSelect = document.getElementById('entry_time_id');

    if (!isCoupleCheckbox || !coupleSelectWrapper || !coupleSelect) {
        return;
    }

    function syncCoupleVisibility() {
        const checked = isCoupleCheckbox.checked;
        coupleSelectWrapper.classList.toggle('d-none', !checked);
        coupleSelect.required = checked;

        if (!checked) {
            coupleSelect.value = '';
        }

        const hasCoupleSelected = checked && coupleSelect.value !== '';
        const isClienteRole = roleSelect && roleSelect.value === 'Cliente';
        const showMembershipAndEntry = isClienteRole && !hasCoupleSelected;

        if (membershipSection) {
            membershipSection.classList.toggle('d-none', !showMembershipAndEntry);
        }

        if (entryTimeSection) {
            entryTimeSection.classList.toggle('d-none', !showMembershipAndEntry);
        }

        if (membershipSelect) {
            membershipSelect.disabled = !showMembershipAndEntry;
        }

        if (paymentPlanSelect) {
            paymentPlanSelect.disabled = !showMembershipAndEntry;
        }

        if (startDateInput) {
            startDateInput.disabled = !showMembershipAndEntry;
        }

        if (entryTimeSelect) {
            entryTimeSelect.disabled = !showMembershipAndEntry;
        }
    }

    isCoupleCheckbox.addEventListener('change', syncCoupleVisibility);
    coupleSelect.addEventListener('change', syncCoupleVisibility);
    if (roleSelect) {
        roleSelect.addEventListener('change', syncCoupleVisibility);
    }
    syncCoupleVisibility();
});
</script>

@endsection