@extends('layouts.master')
@section('title', 'Edit Profile - '. ucfirst($role_name))
@section('pagetitle', 'Edit Profile - '.  ucfirst($role_name))

@section('content')

    <div class="main">
        @include('layouts.partials.breadcrumbs', ['breadcrumbs' => [
             ['url' => route('dashboard'), 'title' => __('Home')],
             ['url' => route('profile.view'), 'title' => __('Profile')],
             ['url' => route('profile.edit'), 'title' => __('Edit')]
                ]])
        @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_avatar_gen(auth()->user()->email) : 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="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 id="cancelButton" class="cancel"><a href="{{ route('profile.view') }}">Cancel</a></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();
            });

            if (window.location.href.indexOf("#ParentGuardianExpander") !== -1) {
                // If the fragment identifier is found, remove the 'none' class from the 'ParentGuardian' div
                $("#ParentGuardian").removeClass("none");
            }

            if (window.location.href.indexOf("#GuardianCounselExpander") !== -1) {
                // If the fragment identifier is found, remove the 'none' class from the 'ParentGuardian' div
                $("#GuardianCounsel").removeClass("none");
            }

            $("#cancelButton").click(function(event) {
                // Prevent the default form submission behavior
                event.preventDefault();
                window.location.href = "{{ route('profile.view') }}";
            });
        });
    </script>
@endsection