@extends('layouts.master')
@section('title', 'Edit Profile - Mentor')
@section('pagetitle', 'Edit Profile - Mentor')

@section('content')
    @include('layouts.partials.breadcrumbs', ['breadcrumbs' => [
         ['url' => route('dashboard'), 'title' => __('Home')],
         ['url' => route('mentor.profile'), 'title' => __('Profile')],
         ['url' => route('mentor.profile.edit'), 'title' => __('Edit')]
            ]])
    <div class="main">
        @include('layouts.partials.messages')
        <h1 class="hd mb-30">Mentor Profile</h1>

        <div class="profilegrids">
            <div class="profilePicture">
                <h4>Profile Picture</h4>
                <p>Choose a new avatar to be used in Guildroom</p>
            </div>
            <div class="profileImg">

                <img id="profile-image"
                     src="{{ $initialImageSrc = $edit ? $user->present()->avatar : url('assets/img/profile.png') }}"
                     alt=""/>
                <div>
                    <button class="save" id="fileLink">Choose</button>
                    <button class="cancel" id="remove-image">Remove</button>
                </div>

            </div>
        </div>
        <form action="{{ route('profile.update') }}" method="POST" id="details-form"
              enctype="multipart/form-data">
            @method('PUT')
            @csrf
            <input type="text" name="type" value="{{\Guildroom\Enums\ProfileUpdateType::PERSONAL_INFO}}" hidden>
            <input type="file" name="avatar" id="fileInput" style="display: none;">
            <div class="profilegrids">
                <div class="profilePicture">
                    <h4 class="label">Full Name<span class="text-danger">*</span></h4>
                    <p>Customize your name on Guildroom</p>
                </div>
                <div class="profilename">
                    <div class="profile_names">
                        <input class="name_input" placeholder=" " type="text" name="first_name"
                               value="{{ $edit ? $user->first_name : '' }}"/>
                        <label class="name_label" for="name">@lang('First Name')</label>
                    </div>
                    <div class="profile_names">
                        <input class="name_input" placeholder=" " type="text" name="last_name"
                               value="{{ $edit ? $user->last_name : '' }}"/>
                        <label class="name_label" for="name">@lang('Last Name')</label>
                    </div>
                </div>
            </div>
            <div class="profilegrids">
                <div class="profilePicture">
                    <h4>Email</h4>
                    <p class="mb-10">What email you would like to be contacted</p>
                    <p>(Note: Your school administrator will be notified)</p>
                </div>
                <div class="profile_names">
                    <input disabled class="name_input" placeholder=" " type="email" name="email"
                           value="{{ $edit ? $user->email : '' }}"/>
                    <label class="name_label" for="name">Email</label>
                </div>
            </div>
            <div class="profilegrids">
                <div class="profilePicture">
                    <h4>Phone Number</h4>
                    <p class="mb-10">Your contact number</p>
                    <p>(Note: Your school administrator will be notified)</p>
                </div>
                <div class="profile_names">
                    <input class="name_input" placeholder=" " type="text" name="phone"
                           value="{{ $edit ? $user->phone : '' }}"/>
                    <label class="name_label" for="name">Phone number</label>
                </div>
            </div>
            <div class="profilegrids">
                <div class="profilePicture">
                    <h4>Gender<span class="text-danger">*</span></h4>
                    <p class="mb-10">How you would like to be identified</p>
                    <p>(Note: Your school administrator will be notified)</p>
                </div>
                <div class="profile_radio">
                    @foreach ($genders as $gender)
                        <div class="Pradio">
                            <input type="radio" value="{{ $gender->id }}"
                                   {{ $gender->id == $user->gender_id ? "checked" : "" }} name="gender_id"/>
                            <p>{{ $gender->name }}</p>
                        </div>
                    @endforeach

                </div>
            </div>
            <div class="profilegrids">
                <div class="profilePicture">
                    <h4>Date of Birth<span class="text-danger">*</span></h4>
                    <p>For your birthday</p>
                </div>
                <div class="profile_names">
                    <input class="name_input" value="{{ $edit && $user->birthday ? $user->present()->birthday : '' }}"
                           type="date" name="birthday"/>
                </div>
            </div>

            <div class="profilegrids">
                <div class="profilePicture">
                    <h4>Maximum Mentees<span class="text-danger">*</span></h4>
                    <p class="mb-10">By default, the highest number of mentees that can be assigned to you.</p>
                </div>
                <div class="profile_names">
                    <input class="name_input" placeholder=" " name="maximum_mentees" type="number"
                           value="{{  $edit && $user->maximum_mentees ? $user->maximum_mentees : sys_settings('maximum_mentee_per_mentor') }}">
                    <label class="name_label" for="name">{{ __('Maximum Mentees') }}</label>
                </div>
            </div>
            <div class="done mt-60">
                <button class="save" type="submit">Save changes</button>
                <button class="cancel">Cancel</button>
            </div>
        </form>

        <div id="addinput" class="profileBigs">
            <h1 class="pad-x">Education</h1>
            <span data-modal-target="#ParentGuardian" class="material-icons-sharp pad-x">add</span>
        </div>
        <div id="ParentGuardian" class="none">
            <div class="parentguard">
                <div class="parent-heading">
                    <h1>Education</h1>
                    <span class="material-icons-sharp close-modal">close</span>
                </div>
                <div id="parentGuardian" class="profilegrids mt-30">
                </div>
                <form action="{{ route('profile.update') }}" method="POST" id="details-form"
                      enctype="multipart/form-data">
                    @method('PUT')
                    @csrf
                    <input type="text" name="type" value="{{\Guildroom\Enums\ProfileUpdateType::EDUCATION_DETAILS}}"
                           hidden>
                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Department<span class="text-danger">*</span></h4>
                            <p class="mb-10">Name of the department you graduated from</p>
                        </div>
                        <div class="profile_names">
                            <input class="name_input" value="{{ $edit ? $user->data['department'] ?? '' : '' }}"
                                   name="department" placeholder="" type="text"/>
                            <label class="name_label" for="name">Department</label>
                        </div>
                    </div>

                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Degree<span class="text-danger">*</span></h4>
                            <p class="mb-10">The degree obtained</p>
                        </div>
                        <div class="profile_names">
                            <input class="name_input" value="{{ $edit ? $user->data['degree'] ?? '' : '' }}"
                                   name="degree" placeholder=" " type="text"/>
                            <label class="name_label" for="name">Degree</label>
                        </div>
                    </div>
                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Matriculation Year<span class="text-danger">*</span></h4>
                            <p class="mb-10">The year you were matriculated</p>
                        </div>
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->data['academic_year']['from'] ?? '' : '' }}"
                                   name="academic_year_from" placeholder=" " type="text"/>
                            <label class="name_label" for="name">Matriculation Year</label>
                        </div>
                    </div>

                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Graduation Year<span class="text-danger">*</span></h4>
                            <p class="mb-10">The year you graduated</p>
                        </div>
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->data['academic_year']['to'] ?? '' : '' }}"
                                   name="academic_year_to" placeholder=" " type="text"/>
                            <label class="name_label" for="name">Graduation Year</label>
                        </div>
                    </div>

                    <div class="done mt-60">
                        <button class="save" type="submit">Save changes</button>
                        <button class="cancel">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
        <div id="addinput" class="profileBigsAfter">
            <h1 class="pad-x">Work Information</h1>
            <span data-modal-target="#GuardianCounsel" class="material-icons-sharp pad-x">add</span>
        </div>
        <div id="GuardianCounsel" class="parentguardAfter none">
            <div class="parent-heading">
                <h1>Work Information</h1>
                <span class="material-icons-sharp close-modal">close</span>
            </div>
            <form action="{{ route('profile.update') }}" method="POST" id="details-form"
                  enctype="multipart/form-data">
                @method('PUT')
                @csrf
                <input type="text" name="type" value="{{\Guildroom\Enums\ProfileUpdateType::EMPLOYMENT_DETAILS}}"
                       hidden>
                <div class="profilegrids mt-30">
                    <div class="profilePicture">
                        <h4>Current Employer</h4>
                        <p>The place you currently work</p>
                    </div>
                    <div class="profilename">
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->data['employment_info']['current_employer'] ?? '' : '' }}"
                                   name="current_employer" placeholder=" " type="text"/>
                            <label class="name_label" for="name">Current Employer</label>
                        </div>
                    </div>
                </div>
                <div class="profilegrids">
                    <div class="profilePicture">
                        <h4>Work Experience</h4>
                        <p class="mb-10">Your work experience</p>
                    </div>
                    <div class="profile_names">
                        <input class="name_input"
                               value="{{ $edit ? $user->data['employment_info']['work_experience'] ?? '' : '' }}"
                               name="work_experience" placeholder=" " type="number"/>
                        <label class="name_label" for="name">Work Experience</label>
                    </div>
                </div>
                <div class="done mt-60">
                    <button class="save" type="submit">Save changes</button>
                    <button class="cancel">Cancel</button>
                </div>
            </form>
        </div>
        <div id="addinput" class="profileBigsAfter">
            <h1 class="pad-x">Password</h1>
            <span data-modal-target="#password" class="material-icons-sharp pad-x">add</span>
        </div>
        <div id="password" class="parentguardAfter none">
            <div class="parent-heading">
                <h1>Password</h1>
                <span class="material-icons-sharp close-modal">close</span>
            </div>

            <form action="{{ route('profile.update') }}" method="POST" id="details-form"
                  enctype="multipart/form-data">
                @method('PUT')
                @csrf
                <input type="text" name="type" value="{{\Guildroom\Enums\ProfileUpdateType::PASSWORD_CHANGE}}" hidden>
                <div class="profilegrids mt-30">
                    <div class="profilePicture">
                        <h4>Old Password<span class="text-danger">*</span></h4>
                    </div>
                    <div class="profile_names">
                        <input class="name_input" placeholder="" name="old_password" type="password"/>
                        <label class="name_label" for="name">Current password</label>
                    </div>
                </div>
                <div class="profilegrids">
                    <div class="profilePicture">
                        <h4>New Password<span class="text-danger">*</span></h4>
                    </div>
                    <div class="profile_names">
                        <input class="name_input" placeholder="" name="password" type="password"/>
                        <label class="name_label" for="name">New password</label>
                    </div>
                </div>
                <div class="done mt-60">
                    <button class="save" type="submit">Save changes</button>
                    <button class="cancel">Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            const $fileLink = $('#fileLink');
            const $fileInput = $('#fileInput');
            const $profileImage = $('#profile-image');
            const $removeImageBtn = $('#remove-image');
            const initialImageSrc = '{{ $initialImageSrc }}';

            $removeImageBtn.hide();

            $fileLink.on('click', function (event) {
                event.preventDefault();
                $fileInput.click();
            });

            $fileInput.on('change', function () {
                if ($fileInput[0].files.length > 0) {
                    const selectedFile = $fileInput[0].files[0];
                    const objectUrl = URL.createObjectURL(selectedFile);
                    $profileImage.attr('src', objectUrl);
                    $removeImageBtn.show();
                }
            });

            $removeImageBtn.on('click', function () {
                $profileImage.attr('src', initialImageSrc);
                $fileInput.val('');
                $removeImageBtn.hide();
            });
        });
    </script>
@endsection