@extends('layouts.master')
@section('title', 'Profile')

@section('content')
    @include('layouts.partials.breadcrumbs', ['breadcrumbs' => [
         ['url' => route('user.dashboard'), 'title' => __('Home')],
         ['url' => route('user.profile'), 'title' => __('Profile')],
         ['url' => route('user.profile.edit'), 'title' => __('Edit')]
            ]])
    <div class="main">
        @include('layouts.partials.messages')
        <h1 class="hd mb-30">Edit 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="file" name="avatar" id="fileInput" style="display: none;">
            <div class="profilegrids">
                <div class="profilePicture">
                    <h4 class="label">Full Name</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</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</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 id="addinput" class="profileBigs">
                <h1 class="pad-x">Parent/Guardian</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>Parent/Guardian</h1>
                        <span class="material-icons-sharp close-modal">close</span>
                    </div>
                    <div id="parentGuardian" class="profilegrids mt-30">
                        <div class="profilePicture">
                            <h4>Full Name</h4>
                            <p>Full name of parent/guardian</p>
                        </div>
                        <div class="profilename">
                            <div class="profile_names">
                                <input class="name_input"
                                       value="{{ $edit ? ($user->guardian_details['guardian_first_name'] ?? '') : '' }}"
                                       name="guardian_first_name" placeholder=" " type="text"/>
                                <label class="name_label" for="name">First name</label>
                            </div>
                            <div class="profile_names">
                                <input class="name_input"
                                       value="{{ $edit ? $user->guardian_details['guardian_last_name'] ?? '' : '' }}"
                                       name="guardian_last_name" placeholder=" " type="text"/>
                                <label class="name_label" for="name">Last name</label>
                            </div>
                        </div>
                    </div>
                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Email</h4>
                            <p class="mb-10">Email address of parent/guardian</p>
                        </div>
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->guardian_details['guardian_email'] ?? '' : '' }}"
                                   name="guardian_email" placeholder=" " type="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">Phone number of parent/guardian</p>
                        </div>
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->guardian_details['guardian_phone'] ?? '' : '' }}"
                                   name="guardian_phone" placeholder=" " type="tel"/>
                            <label class="name_label" for="name">Phone number</label>
                        </div>
                    </div>

                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Gender</h4>
                            <p class="mb-10">Gender of parent/guardian</p>
                        </div>
                        <div class="profile_radio">
                            @foreach ($genders as $gender)
                                <div class="Pradio">
                                    <input type="radio" value="{{ $gender->id }}"
                                           {{ $gender->id == ($user->guardian_details['guardian_gender_id'] ?? '') ? "checked" : "" }} name="guardian_gender_id"/>
                                    <p>{{ $gender->name }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="profilegrids">
                        <div class="profilePicture">
                            <h4>Relationship</h4>
                            <p>How you are related</p>
                        </div>
                        <div class="profile_names">
                            <select name="guardian_relationship" id="">
                                <option
                                    {{ "father" == ($user->guardian_details['guardian_relationship'] ?? '') ? "selected" : "" }} value="father">
                                    Father
                                </option>
                                <option
                                    {{ "mother" == ($user->guardian_details['guardian_relationship'] ?? '') ? "selected" : "" }} value="mother">
                                    Mother
                                </option>
                                <option
                                    {{ "sibling" == ($user->guardian_details['guardian_relationship'] ?? '') ? "selected" : "" }} value="sibling">
                                    Siblings
                                </option>
                                <option
                                    {{ "others" == ($user->guardian_details['guardian_relationship'] ?? '') ? "selected" : "" }} value="others">
                                    Others
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div id="addinput" class="profileBigsAfter">
                <h1 class="pad-x">Guidance Counsellor</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>Guidance Counsellor</h1>
                    <span class="material-icons-sharp close-modal">close</span>
                </div>
                <div class="profilegrids mt-30">
                    <div class="profilePicture">
                        <h4>Full Name</h4>
                        <p>Full name of next of kin</p>
                    </div>
                    <div class="profilename">
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->counsellor_details['counsellor_first_name'] ?? '' : '' }}"
                                   name="counsellor_first_name" placeholder=" " type="text"/>
                            <label class="name_label" for="name">First name</label>
                        </div>
                        <div class="profile_names">
                            <input class="name_input"
                                   value="{{ $edit ? $user->counsellor_details['counsellor_last_name'] ?? '' : '' }}"
                                   name="counsellor_last_name" placeholder=" " type="text"/>
                            <label class="name_label" for="name">Last name</label>
                        </div>
                    </div>
                </div>
                <div class="profilegrids">
                    <div class="profilePicture">
                        <h4>Email</h4>
                        <p class="mb-10">Email address of next of kin</p>
                    </div>
                    <div class="profile_names">
                        <input class="name_input"
                               value="{{ $edit ? $user->counsellor_details['counsellor_email'] ?? '' : '' }}"
                               name="counsellor_email" placeholder=" " type="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">Phone number of next of kin</p>
                    </div>
                    <div class="profile_names">
                        <input class="name_input"
                               value="{{ $edit ? $user->counsellor_details['counsellor_phone'] ?? '' : '' }}"
                               name="counsellor_phone" placeholder=" " type="tel"/>
                        <label class="name_label" for="name">Phone number</label>
                    </div>
                </div>

                <div class="profilegrids">
                    <div class="profilePicture">
                        <h4>Gender</h4>
                        <p class="mb-10">Gender of next of kin</p>
                    </div>
                    <div class="profile_radio">
                        @foreach ($genders as $gender)
                            <div class="Pradio">
                                <input type="radio" value="{{ $gender->id }}"
                                       {{ $gender->id == ($user->counsellor_details['counsellor_gender_id'] ?? '') ? "checked" : "" }} name="counsellor_gender_id"/>
                                <p>{{ $gender->name }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>

            </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>

                <div class="profilegrids mt-30">
                    <div class="profilePicture">
                        <h4>Old Password</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</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>

            <div class="done">
                <button class="save" type="submit">Save changes</button>
                <button class="cancel">Cancel</button>
            </div>

        </form>
    </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