@extends('backoffice.layout.master')
@section('setSectionTitle', __('Il mio profilo'))
@section('setSectionDescription', __('Questo è il dettaglio del tuo profilo. Da qui, puoi aggiornare i tuoi dati.'))


@section('setContent')
    <div class="container-fluid">
        <div class="row">

            <div class="col">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active fw-bold" id="info-tab" data-bs-toggle="tab" href="#info" role="tab"
                            aria-controls="info" aria-selected="true">{{ __('I tuoi dati') }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link fw-bold" id="password-tab" data-bs-toggle="tab" href="#password" role="tab"
                            aria-controls="password" aria-selected="false">{{ __('Modifica Password') }}</a>
                    </li>
                </ul>

                <div class="card">
                    <div class="card-body tab-content">

                        <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="info-tab">
                            <h4>{{ __('Modifica le informazioni del tuo account.') }}</h4>
                            <form class="row g-3 align-items-center" method="POST"
                                action="{{ route(FormatHelper::roleRoute('updateProfile')) }}">
                                @csrf
                                <div class="col-12 col-md-6 col-lg-4">
                                    <label for="email" class="form-label">{{ __('Email') }}</label>
                                    <input type="email" name="email" id="email" value="{{ $user->email }}" class="form-control" disabled>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-input-field label="{{ __('Nome') }}" name="first_name" :value="$profile->first_name"
                                        :required="[true, true]" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-input-field label="{{ __('Cognome') }}" name="last_name" :value="$profile->last_name"
                                        :required="[true, true]" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-input-field label="{{ __('Ruolo in azienda') }}" name="job_title" :value="$profile->job_title"
                                        :required="[true, true]" />
                                </div>
                                <div class="col-12 mt-5">
                                    <button type="submit" class="btn btn-success">{{ __('Aggiorna profilo') }}</button>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
                            <h4>{{ __('Modifica password') }}</h4>
                            <form action="{{ route(FormatHelper::roleRoute('updatePassword')) }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <x-input-field label="{{ __('Password attuale') }}" name="current_password"
                                        type="password" :required="[true, false]" />
                                </div>
                                <div class="mb-3">
                                    <x-input-field label="{{ __('Nuova password') }}" name="new_password"
                                        type="password" :required="[true, false]" />
                                </div>
                                <div class="mb-3">
                                    <x-input-field label="{{ __('Conferma nuova password') }}" name="confirm_password"
                                        type="password" :required="[true, false]" />
                                </div>
                                <button type="submit" class="btn btn-success">{{ __('Aggiorna password') }}</button>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

@endsection

@section('setBodyEnd')
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const tab = urlParams.get('tab');
            if (tab) {
                const tabTrigger = document.querySelector(`[data-bs-toggle="tab"][href="#${tab}"]`);
                if (tabTrigger) {
                    const tabInstance = new bootstrap.Tab(tabTrigger);
                    tabInstance.show();
                }
            }
        });
    </script>
@endsection