@extends('admin.layouts.app')

@section('title', 'Mon Profil')

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Informations du Profil</h3>
                </div>
                <form id="profileForm" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <img class="profile-user-img img-fluid img-circle"
                                src="{{ $admin->image ? Storage::url($admin->image) : asset('vendor/adminlte/dist/img/user2-160x160.jpg') }}"
                                alt="Photo de profil">
                            <div class="mt-2">
                                <input type="file" name="image" id="image" class="d-none">
                                <button type="button" class="btn btn-sm btn-primary" onclick="$('#image').click()">
                                    Changer la photo
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="fname">Prénom</label>
                            <input type="text" class="form-control" id="fname" name="fname"
                                value="{{ $admin->fname }}">
                            <span class="text-danger" id="fname-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="lname">Nom</label>
                            <input type="text" class="form-control" id="lname" name="lname"
                                value="{{ $admin->lname }}">
                            <span class="text-danger" id="lname-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                value="{{ $admin->email }}">
                            <span class="text-danger" id="email-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="phone">Téléphone</label>
                            <input type="text" class="form-control" id="phone" name="phone"
                                value="{{ $admin->phone }}">
                            <span class="text-danger" id="phone-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="birthday">Date de naissance</label>
                            <input type="date" class="form-control" id="birthday" name="birthday"
                                value="{{ $admin->birthday ? \Carbon\Carbon::parse($admin->birthday)->format('Y-m-d') : '' }}">
                            <div class="mt-1 text-muted">
                                {{ $admin->birthday_formatted ?? 'Non renseigné' }}
                            </div>
                            <span class="text-danger" id="birthday-error"></span>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Mettre à jour le profil</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Changer le mot de passe</h3>
                </div>
                <form id="passwordForm">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="current_password">Mot de passe actuel</label>
                            <input type="password" class="form-control" id="current_password" name="current_password">
                            <span class="text-danger" id="current_password-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="password">Nouveau mot de passe</label>
                            <input type="password" class="form-control" id="password" name="password">
                            <span class="text-danger" id="password-error"></span>
                        </div>

                        <div class="form-group">
                            <label for="password_confirmation">Confirmer le nouveau mot de passe</label>
                            <input type="password" class="form-control" id="password_confirmation"
                                name="password_confirmation">
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Mettre à jour le mot de passe</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endpush

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(function() {
            // Configuration Toastr
            toastr.options = {
                "closeButton": true,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "timeOut": "3000"
            };

            // Preview de l'image
            $('#image').change(function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('.profile-user-img').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(file);
                }
            });

            // Mise à jour du profil
            $('#profileForm').on('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);

                $.ajax({
                    url: "{{ route('admin.profile.update') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        toastr.success(response.message);
                        $('.text-danger').text('');
                        if (response.birthday_formatted) {
                            $('#birthday').siblings('.text-muted').text(response
                                .birthday_formatted);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $('.text-danger').text('');
                            $.each(errors, function(key, value) {
                                $(`#${key}-error`).text(value[0]);
                            });
                            toastr.error(xhr.responseJSON.message);
                        } else {
                            toastr.error('Une erreur est survenue');
                        }
                    }
                });
            });

            // Mise à jour du mot de passe
            $('#passwordForm').on('submit', function(e) {
                e.preventDefault();

                $.ajax({
                    url: "{{ route('admin.profile.update-password') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(response) {
                        toastr.success(response.message);
                        $('#passwordForm')[0].reset();
                        $('.text-danger').text('');
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $('.text-danger').text('');
                            $.each(errors, function(key, value) {
                                $(`#${key}-error`).text(value[0]);
                            });
                            toastr.error(xhr.responseJSON.message);
                        } else {
                            toastr.error('Une erreur est survenue');
                        }
                    }
                });
            });
        });
    </script>
@endpush