@extends('layouts.account', ['title' => __('account_info.page_title')])

@section('content')
    <!-- Personal info content -->
    <div class="col-lg-9">
        <div class="ps-lg-3 ps-xl-0">
            <!-- Page title -->
            <h1 class="h2 mb-1 mb-sm-2">{{ __('account_info.personal_info') }}</h1>
            <!-- Basic info -->
            <div class="border-bottom py-4">
                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
                    <h2 class="h6 mb-0">{{ __('account_info.basic_info') }}</h2>
                    <a aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="false"
                        class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
                        data-bs-toggle="collapse" href=".basic-info">{{ __('account_info.edit') }}</a>
                </div>
                <div class="collapse basic-info @if(session('error') || $errors->has('name') || $errors->has('email') || $errors->has('phone') || $errors->has('birth_date') || $errors->has('photo')) @else show @endif" id="basicInfoPreview">
                    <ul class="list-unstyled fs-sm m-0">
                        <li>{{ auth()->user()->name }}</li>
                        <li>{{ auth()->user()->email }}</li>
                        {{-- <li>English</li> --}}
                    </ul>
                </div>
                
                <div class="collapse basic-info @if(session('error') || $errors->has('name') || $errors->has('email') || $errors->has('phone') || $errors->has('birth_date') || $errors->has('photo')) show @endif" id="basicInfoEdit">
                    <form class="row g-3 g-sm-4 needs-validation" novalidate="" enctype="multipart/form-data" method="POST" action="{{ route('profile.update') }}">
                        @csrf
                        
                        @if(session('error'))
                            <div class="alert alert-danger" role="alert">
                                {{ session('error') }}
                            </div>
                        @endif

                        <div class="col-sm-12">
                            <label class="form-label">{{ __('account_info.profile_photo') }}</label>
                            <div class="d-flex align-items-center gap-4">
                                <div class="position-relative">
                                    <div class="avatar avatar-lg" style="aspect-ratio: 1/1; overflow: hidden; max-width: 300px; width: 100%; height: auto;">
                                        @if(auth()->user()->photo)
                                            <img src="{{ asset('storage/' . auth()->user()->photo) }}" alt="{{ auth()->user()->name }}" class="avatar-img rounded-circle" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.src='{{ asset('img/photo-placeholder.png') }}'">
                                        @else
                                            <img src="{{ asset('img/photo-placeholder.png') }}" alt="{{ auth()->user()->name }}" class="avatar-img rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
                                        @endif
                                    </div>
                                    <label for="photo-upload" class="btn btn-sm btn-primary position-absolute bottom-0 end-0 rounded-circle" style="width: 32px; height: 32px; padding: 0;">
                                        <i class="ci-camera" style="font-size: 14px;"></i>
                                    </label>
                                    <input type="file" id="photo-upload" name="photo" class="d-none" accept="image/*" onchange="previewAvatar(event)">
                                </div>
                                <div class="flex-grow-1">
                                    <p class="fs-sm text-muted mb-1">{{ __('account_info.photo_requirements') }}</p>
                                    <p class="fs-sm text-muted mb-0">JPG, PNG or GIF (Max 2MB)</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <label class="form-label" for="fn">{{ __('account_info.name') }}</label>
                            <div class="position-relative">
                                <input class="form-control" id="fn" name="name" required="" type="text"
                                    value="{{ auth()->user()->name }}" />
                                <div class="invalid-feedback">{{ __('account_info.please_enter_first_name') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label class="form-label" for="email">{{ __('account_info.email_address') }}</label>
                            <div class="position-relative">
                                <input class="form-control" id="email" name="email" required="" type="email"
                                    value="{{ auth()->user()->email ?? __('account_info.not_set') }}" />
                                <div class="invalid-feedback">{{ __('account_info.please_enter_valid_email') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label class="form-label" for="phone">{{ __('account_info.phone_number') }}</label>
                            <div class="position-relative">
                                <input class="form-control"
                                    id="phone" name="phone" placeholder="" required="" type="text"
                                    value="{{ auth()->user()->phone ?? __('account_info.not_set') }}" />
                                <div class="invalid-feedback">{{ __('account_info.please_enter_phone_number') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label class="form-label" for="birthdate">{{ __('account_info.date_of_birth') }}</label>
                            <div class="position-relative">
                                <input class="form-control form-icon-end"
                                name="birth_date"
                                    data-datepicker='{
                                        "dateFormat": "Y-m-d",
                                        "defaultDate": "{{ auth()->user()->customer->date_of_birth != null ? date('Y-m-d', strtotime(auth()->user()->customer->date_of_birth)) : '' }}"
                                    }'
                                    placeholder="{{ __('account_info.choose_date') }}" type="text" />
                                <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
                            </div>
                        </div>
                        {{-- <div class="col-sm-6">
                            <label class="form-label">{{ __('account_info.language') }}</label>
                            <select class="form-select"
                                data-select='{
                        "placeholderValue": "{{ __('account_info.select_language') }}",
                        "choices": [
                          {
                            "value": "",
                            "label": "{{ __('account_info.select_language') }}",
                            "placeholder": true
                          },
                          {
                            "value": "English",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/en-us.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"English\"&gt; {{ __('account_info.english') }}&lt;/div&gt;",
                            "selected": true
                          },
                          {
                            "value": "Français",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/fr.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Français\"&gt; {{ __('account_info.french') }}&lt;/div&gt;"
                          },
                          {
                            "value": "Deutsch",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/de.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Deutsch\"&gt; {{ __('account_info.german') }}&lt;/div&gt;"
                          },
                          {
                            "value": "Italiano",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/it.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Italiano\"&gt; {{ __('account_info.italian') }}&lt;/div&gt;"
                          }
                        ]
                      }'
                                data-select-template="true"></select>
                        </div> --}}
                        <div class="col-12">
                            <div class="d-flex gap-3 pt-2 pt-sm-0">
                                <button class="btn btn-primary" type="submit">{{ __('account_info.save_changes') }}</button>
                                <button aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="true"
                                    class="btn btn-secondary" data-bs-target=".basic-info" data-bs-toggle="collapse"
                                    type="button">{{ __('account_info.close') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Contact -->
            {{-- <div class="border-bottom py-4">
                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
                    <div class="d-flex align-items-center gap-3 me-4">
                        <h2 class="h6 mb-0">{{ __('account_info.contact') }}</h2>
                    </div>
                    <a aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="false"
                        class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
                        data-bs-toggle="collapse" href=".contact-info">{{ __('account_info.edit') }}</a>
                </div>
                <div class="collapse contact-info show" id="contactInfoPreview">
                    <ul class="list-unstyled fs-sm m-0">
                        <li class="mb-1">{{ auth()->user()->email }}</li>
                        <li>{{ auth()->user()->phone ?? __('account_info.not_set') }}<span class="text-success ms-1">{{ __('account_info.verified') }}</span></li>
                    </ul>
                </div>
                <div class="collapse contact-info" id="contactInfoEdit">
                    <form class="row g-3 g-sm-4 needs-validation" novalidate="">
                       
                        <div class="col-12">
                            <div class="d-flex gap-3 pt-2 pt-sm-0">
                                <button class="btn btn-primary" type="submit">{{ __('account_info.save_changes') }}</button>
                                <button aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="true"
                                    class="btn btn-secondary" data-bs-target=".contact-info" data-bs-toggle="collapse"
                                    type="button">{{ __('account_info.close') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div> --}}
            <!-- Password -->
            {{-- <div class="border-bottom py-4">
                <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
                    <div class="d-flex align-items-center gap-3 me-4">
                        <h2 class="h6 mb-0">{{ __('account_info.password') }}</h2>
                    </div>
                    <a aria-controls="passChangePreview passChangeEdit" aria-expanded="false"
                        class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
                        data-bs-toggle="collapse" href=".password-change">{{ __('account_info.edit') }}</a>
                </div>
                <div class="collapse password-change @if(session('error') || $errors->has('current_password') || $errors->has('password') || $errors->has('password_confirmation')) @else show @endif" id="passChangePreview">
                    <ul class="list-unstyled fs-sm m-0">
                        <li>**************</li>
                    </ul>
                </div>
                <div class="collapse password-change @if(session('error') || $errors->has('current_password') || $errors->has('password') || $errors->has('password_confirmation')) show @endif" id="passChangeEdit">
                    <form class="row g-3 g-sm-4 needs-validation" novalidate="" method="POST" action="{{ route('profile.password.update') }}">
                        @csrf
                        @method('PUT')
                        
                        @if(session('error'))
                            <div class="alert alert-danger" role="alert">
                                {{ session('error') }}
                            </div>
                        @endif
                        
                        @if(session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ session('success') }}
                            </div>
                        @endif
                        
                        <div class="col-sm-6">
                            <label class="form-label" for="current-password">{{ __('account_info.current_password') }}</label>
                            <div class="password-toggle">
                                <input class="form-control" id="current-password" name="current_password"
                                    placeholder="{{ __('account_info.enter_current_password') }}" required="" type="password" />
                                <label aria-label="Show/hide password" class="password-toggle-button">
                                    <input class="btn-check" type="checkbox" />
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label" for="new-password">{{ __('account_info.new_password') }}</label>
                            <div class="password-toggle">
                                <input class="form-control" id="new-password" name="password" placeholder="{{ __('account_info.create_new_password') }}"
                                    required="" type="password" />
                                <label aria-label="Show/hide password" class="password-toggle-button">
                                    <input class="btn-check" type="checkbox" />
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label" for="confirm-password">{{ __('account_info.confirm_password') }}</label>
                            <div class="password-toggle">
                                <input class="form-control" id="confirm-password" name="password_confirmation" placeholder="{{ __('account_info.confirm_new_password') }}"
                                    required="" type="password" />
                                <label aria-label="Show/hide password" class="password-toggle-button">
                                    <input class="btn-check" type="checkbox" />
                                </label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex gap-3 pt-2 pt-sm-0">
                                <button class="btn btn-primary" type="submit">{{ __('account_info.save_changes') }}</button>
                                <button aria-controls="passChangePreview passChangeEdit" aria-expanded="true"
                                    class="btn btn-secondary" data-bs-target=".password-change" data-bs-toggle="collapse"
                                    type="button">{{ __('account_info.close') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div> --}}
            <!-- Delete account -->
            {{-- <div class="pt-3 mt-2 mt-sm-3">
                <h2 class="h6">{{ __('account_info.delete_account') }}</h2>
                <p class="fs-sm">{{ __('account_info.delete_account_description') }}</p>
                <a class="text-danger fs-sm fw-medium" href="#!">{{ __('account_info.delete_account') }}</a>
            </div> --}}
        </div>
    </div>
@endsection

@section('scripts')
<script>
function previewAvatar(event) {
    const file = event.target.files[0];
    if (file) {
        // Check file size (2MB limit)
        if (file.size > 2 * 1024 * 1024) {
            alert('File size must be less than 2MB');
            event.target.value = '';
            return;
        }
        
        // Check file type
        if (!file.type.match('image.*')) {
            alert('Please select an image file');
            event.target.value = '';
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            const avatarImg = document.querySelector('.avatar-img');
            if (avatarImg) {
                avatarImg.src = e.target.result;
            }
        }
        reader.readAsDataURL(file);
    }
}
</script>
@endsection