@extends('dashboard.layouts.app')

@section('title', 'Modifier l\'Utilisateur - UAC eservices')

@section('page-title', 'Modifier l\'Utilisateur')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard.users.index') }}">Utilisateurs</a></li>
    <li class="breadcrumb-item active" aria-current="page">Modifier</li>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Modifier l'Utilisateur: {{ $user->name }}</h4>
                <p class="card-subtitle">Modifiez les informations de l'utilisateur ci-dessous.</p>

                <form method="POST" action="{{ route('dashboard.users.update', $user) }}" enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                    id="name" name="name" placeholder="Nom complet"
                                    value="{{ old('name', $user->name) }}" required>
                                <label for="name">Nom complet *</label>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                    id="email" name="email" placeholder="Adresse email"
                                    value="{{ old('email', $user->email) }}" required>
                                <label for="email">Adresse email *</label>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control @error('whatsapp_number') is-invalid @enderror"
                                    id="whatsapp_number" name="whatsapp_number" placeholder="Numéro WhatsApp"
                                    value="{{ old('whatsapp_number', $user->whatsapp_number) }}">
                                <label for="whatsapp_number">Numéro WhatsApp</label>
                                @error('whatsapp_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Format: +229XXXXXXXXX</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="password" class="form-control @error('password') is-invalid @enderror"
                                    id="password" name="password" placeholder="Nouveau mot de passe (laisser vide pour conserver)">
                                <label for="password">Nouveau mot de passe</label>
                                <div class="form-text">Laissez vide pour conserver le mot de passe actuel</div>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="password" class="form-control"
                                    id="password_confirmation" name="password_confirmation"
                                    placeholder="Confirmer le nouveau mot de passe">
                                <label for="password_confirmation">Confirmer le nouveau mot de passe</label>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="photo" class="form-label">Photo de profil</label>
                                <input type="file" class="form-control @error('photo') is-invalid @enderror"
                                    id="photo" name="photo" accept="image/*">
                                <div class="form-text">Formats acceptés: JPG, JPEG, PNG (max 2MB)</div>
                                @if($user->photo_path)
                                    <div class="mt-2">
                                        <small class="text-muted">Photo actuelle:</small><br>
                                        <img src="{{ Storage::url($user->photo_path) }}" alt="Photo actuelle" class="rounded" width="100" height="100" style="object-fit: cover;">
                                    </div>
                                @endif
                                @error('photo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <select class="form-select @error('role_id') is-invalid @enderror"
                                        id="role_id" name="role_id" required>
                                    <option value="">Sélectionner un rôle</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}" {{ old('role_id', $user->role_id) == $role->id ? 'selected' : '' }}>
                                            {{ $role->nom }}
                                        </option>
                                    @endforeach
                                </select>
                                <label for="role_id">Rôle *</label>
                                @error('role_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('dashboard.users.index') }}" class="btn btn-secondary">
                            <i class="mdi mdi-arrow-left"></i> Retour à la liste
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="mdi mdi-content-save"></i> Mettre à jour l'utilisateur
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@push('scripts')
<script>
    // Validation Bootstrap personnalisée pour permettre les champs vides
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    // Vérifier manuellement la validité en ignorant les champs vides de mot de passe
                    var isValid = true;
                    var requiredFields = form.querySelectorAll('[required]');
                    var passwordFields = form.querySelectorAll('input[type="password"]');

                    // Vérifier les champs requis (sauf mots de passe vides)
                    requiredFields.forEach(function(field) {
                        if (field.type !== 'password' && !field.value.trim()) {
                            isValid = false;
                            field.classList.add('is-invalid');
                        } else {
                            field.classList.remove('is-invalid');
                        }
                    });

                    // Pour les mots de passe, vérifier seulement s'ils sont remplis
                    passwordFields.forEach(function(field) {
                        if (field.value && field.name === 'password' && !form.querySelector('[name="password_confirmation"]').value) {
                            isValid = false;
                            form.querySelector('[name="password_confirmation"]').classList.add('is-invalid');
                        } else if (field.value && field.name === 'password_confirmation' && field.value !== form.querySelector('[name="password"]').value) {
                            isValid = false;
                            field.classList.add('is-invalid');
                        } else {
                            field.classList.remove('is-invalid');
                        }
                    });

                    if (!isValid) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()
</script>
@endpush