@extends('tutor.layouts.layout')
@section('title', 'Profile')
@section('content')
    <style>
        .tutor-profile {
            object-fit: none;
        }
        .ql-container {
    position: relative;
    z-index: 10;
}

.ql-editor {
    pointer-events: auto;
}
    </style>


    <div class="flex md:flex-nowrap flex-wrap gap-7">
        @if (!request()->has('editprofile'))
            <div class="md:max-w-92.75 w-full h-full p-4 border-2 rounded-[10px] my-4 border-[#FFFFFF]  bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('tutor/images/profile-sidebar.png') }}')">
                <img src="{{ asset($tutor->userDefaultProfile) }}"
                    class=" bg-cover mx-auto max-w-81.75 w-81.75 h-76.5 my-2 rounded-[10px] object-cover" alt="Profile" />

                <div class="mt-4 text-center">
                    <h2 class="text-[20px] Poppins-medium text-[#f2f2f2]">{{ $tutor->name }}</h2>
                    <p class="text-[16px] text-[#f2f2f2] Poppins">{{ $tutor->email }}</p>
                </div>

                <p class="mt-4 text-sm text-[#f2f2f2] leading-6 Poppins text-center ">
                    {{ $tutor->headline }}
                </p>
                <hr class="text-[#bbb6b6] my-3">
                <div class="mt-4 text-center">
                    <p class="Poppins-medium text-[16px] text-[#f2f2f2]">Rating & Reviews</p>

                    <!-- Display the stars based on average rating -->
                    <div class="text-yellow-400 text-[28px]">
                        @for ($i = 1; $i <= 5; $i++)
                            <span
                                class="{{ $i <= $tutor->getTutorRating() ? 'text-yellow-400' : 'text-gray-400' }}">&starf;</span>
                        @endfor
                    </div>

                    <!-- Display the average rating and number of reviews -->
                    <p class="text-[15.43px] Poppins text-[#f2f2f2] mt-2">
                        {{ $tutor->getTutorRating() }} <!-- Rounded average rating -->
                        <span class="text-[13.22px]">({{ $tutor->getTutorReviewCount() }} reviews)</span>
                    </p>
                </div>

                <div class="mt-3 space-y-3 ">
                    <button onclick="window.location.href='{{ route('tutor.detail', encrypt($tutor->id)) }}#ratings'"
                        class="w-full cursor-pointer rounded-sm border text-[#F4C701] Poppins border-[#F4C701] text-sm  py-3  ">
                        View Reviews
                    </button>

                    <button
                        class="w-full cursor-pointer rounded-sm bg-[#F4C701] Poppins-medium text-[16px] py-3  text-black"
                        onclick="window.location.href='{{ route('tutor.tutorProfile') }}?editprofile=true'">
                        Edit Profile
                    </button>
                    @if (auth()->user()->tutorActiveSubscription)
                        <button type="button" command="show-modal" commandfor="cancel_sub"
                            class="w-full cursor-pointer rounded-sm Poppins-medium bg-[#AA0000] py-2  text-white">
                            Cancel Subscription
                        </button>
                    @endif
                </div>
            </div>
            <div class="md:w-[57%] w-full h-screen hide-scrollbar overflow-y-auto sm:p-6 pt-4">
                <form action="{{ route('tutor.information.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <h2 class="mb-4 text-2xl Poppins-medium text-[#133754]">
                        Account information
                    </h2>
                    <div class="relative mb-1 mt-6">
                        <input type="number" name="hourly_price" id="hourly_price" value="{{ $tutor->tutor_hourly_rate }}"
                            placeholder=""
                            class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-4.25  focus:outline-none" />

                        <label for="hourly_price"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm  Poppins text-[#49454F]
                peer-placeholder-shown:top-1/2
                peer-placeholder-shown:-translate-y-1/2
              peer-placeholder-shown:text-gray-400
                peer-focus:top-0">
                            Hourly Price
                        </label>
                   
                    </div>
     @error('hourly_price')
                            <span class="text-red-600">{{ $message }}</span>
                        @enderror



                    <div class="relative mb-6 mt-7">
                        <textarea id="headline" rows="2" placeholder="" name="headline"
                            class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-[16px] Poppins border border-[#DBDBDB] px-4 py-5 focus:outline-none resize-none">{{ $tutor->headline }}</textarea>

                        <label for="headline"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
               peer-placeholder-shown:top-1/2
               peer-placeholder-shown:-translate-y-1/2
               peer-placeholder-shown:text-gray-400
               peer-focus:top-0">
                            Headline
                        </label>
                        @error('headline')
                            <span class="text-red-600">{{ $message }}</span>
                        @enderror

                    </div>



                    <div class="relative mb-6 group">

    <div id="introduction-editor"
        class="w-full rounded-sm border border-[#DBDBDB]
               px-1 py-1 text-lg text-[#1D1B20] Poppins
               focus:outline-none">
        {!! $tutor->introduction !!}
    </div>

    <label class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm
               Poppins text-[#49454F]
               group-focus-within:top-0">
        Introduce Yourself
    </label>
                        @error('introduction')
                            <span class="text-red-600">{{ $message }}</span>
                        @enderror
                    </div>
                    <input type="hidden" name="introduction" id="introduction">




                  <div class="relative mb-6 group">

    <div id="qualification-editor"
        class="w-full rounded-sm border border-[#DBDBDB]
               px-1 py-1 text-lg text-[#1D1B20] Poppins
               focus:outline-none">
        {!! $tutor->qualification !!}
    </div>

    <label class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm
               Poppins text-[#49454F]
               group-focus-within:top-0">
        Qualification
    </label>


                        @error('qualification')
                            <span class="text-red-600">{{ $message }}</span>
                        @enderror
                    </div>
                    <input type="hidden" name="qualification" id="qualification">

                    <div class="w-full rounded-lg border border-gray-200 bg-white ">

                        <button type="button"
                            class="flex w-full items-center border rounded-[5px] border-[#DBDBDB] justify-between px-4 py-3 text-left"
                            onclick="toggleAccordion(this)">
                            <h3 class="text-lg Poppins-medium px-3 text-[#1D1B20]">
                                Subjects Taught
                            </h3>

                            <span id="accordionIcon"
                                class="accordionIcon flex h-11 w-11 items-center justify-center rounded-md bg-[#1CD8C4] text-xl font-bold">
                                <i class="fa-solid fa-minus"></i>
                            </span>
                        </button>

                        <div id="accordionBody" class="px-6 pb-6 mt-5 accordionBody">
                            <div
                                class=" space-y-2.5 grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1  justify-items-stretch gap-y-6 gap-x-6 text-[#222222] Poppins-medium text-[16px]">
                                @foreach ($subjects->chunk(3) as $chunk)
                                    <div class="flex flex-col space-y-6">
                                        @foreach ($chunk as $subject)
                                            <label class="flex Poppins items-center gap-4 cursor-pointer">
                                                <input type="checkbox"
                                                    {{ in_array($subject->id, $tutor->tutorSubjects()->pluck('subject_id')->toArray()) ? 'checked' : '' }}
                                                    class="hidden peer" name="subjects[]" value="{{ $subject->id }}"
                                                    id="{{ $subject->id }}" />
                                                <span
                                                    class="w-[25px] h-[25px] flex items-center justify-center rounded border border-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                                    <img src="{{ asset('tutor/images/tick-icon.png') }}" alt="tick" />
                                                </span>
                                                {{ ucFirst($subject->subject_name) }}
                                            </label>
                                        @endforeach
                                    </div>
                                @endforeach








                            </div>

                            <div>
                                @error('subjects')
                                    <span class="text-red-600">{{ $message }}</span>
                                @enderror
                            </div>

                        </div>
                    </div>
                    <div class="w-full rounded-lg border border-gray-200 bg-white mt-8">

                        <button type="button"
                            class="flex w-full items-center border rounded-[5px] border-[#DBDBDB] justify-between px-4 py-3 text-left"
                            onclick="toggleAccordion(this)">
                            <h3 class="text-lg Poppins-medium px-3 text-[#1D1B20]">
                                Level of Teaching
                            </h3>


                            <span id="accordionIcon"
                                class="accordionIcon flex h-11 w-11 items-center justify-center rounded-md bg-[#1CD8C4] text-xl font-bold">
                                <i class="fa-solid fa-minus"></i>
                            </span>
                        </button>

                        <div id="accordionBody" class=" accordionBody px-6 pb-6 mt-5">
                            <div
                                class=" space-y-2.5 grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 justify-items-stretch gap-y-6 gap-x-6 text-[#222222] Poppins-medium text-[16px]">
                                @foreach ($teachingLevels->chunk(3) as $chunk)
                                    <div class="flex flex-col space-y-6">
                                        @foreach ($chunk as $levels)
                                            <div class="flex flex-col space-y-6">
                                                <label class="flex Poppins items-center gap-4 cursor-pointer">
                                                    <input type="checkbox"
                                                        {{ in_array($levels->id, $tutor->level_ids) ? 'checked' : '' }}
                                                        class="hidden peer" name="teaching_levels[]"
                                                        value="{{ $levels->id }}" id="level_{{ $levels->id }}" />
                                                    <span
                                                        class="w-[25px] h-[25px] flex items-center justify-center rounded border border-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                                        <img src="{{ asset('tutor/images/tick-icon.png') }}"
                                                            alt="tick" />
                                                    </span>
                                                    {{ ucFirst($levels->level_name) }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach





                            </div>
                            <div>
                                @error('teaching_levels')
                                    <span class="text-red-600">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="w-full rounded-lg border border-gray-200 bg-white mt-8">

                        <button type="button"
                            class="flex w-full items-center border rounded-[5px] border-[#DBDBDB] justify-between px-4 py-3 text-left"
                            onclick="toggleAccordion(this)">
                            <h3 class="text-lg Poppins-medium px-3 text-[#1D1B20]">
                                Languages Spoken
                            </h3>

                            <span id="accordionIcon"
                                class="accordionIcon flex h-11 w-11 items-center justify-center rounded-md bg-[#1CD8C4] text-xl font-bold">
                                <i class="fa-solid fa-minus"></i>
                            </span>
                        </button>

                        <div id="accordionBody" class="accordionBody px-6 pb-6 mt-5">
                            <div
                                class=" space-y-2.5 grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 justify-items-stretch gap-y-6 gap-x-6 text-[#222222] Poppins-medium text-[16px]">

                                @foreach ($langs->chunk(3) as $chunk)
                                    <div class="flex flex-col space-y-6">
                                        @foreach ($chunk as $lang)
                                            <div class="flex flex-col space-y-6">
                                                <label class="flex Poppins items-center gap-4 cursor-pointer">
                                                    <input type="checkbox"
                                                        {{ in_array($lang->id, $tutor->language_ids) ? 'checked' : '' }}
                                                        class="hidden peer" name="languages[]"
                                                        value="{{ $lang->id }}" id="{{ $lang->id }}" />
                                                    <span
                                                        class="w-[25px] h-[25px] flex items-center justify-center rounded border border-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                                        <img src="{{ asset('tutor/images/tick-icon.png') }}"
                                                            alt="tick" />
                                                    </span>
                                                    {{ ucFirst($lang->language_name) }}
                                                </label>
                                            </div>
                                        @endforeach




                                    </div>
                                @endforeach





                            </div>
                            <div>
                                @error('languages')
                                    <span class="text-red-600">{{ $message }}</span>
                                @enderror
                            </div>



                        </div>
                    </div>
                    {{-- <div id="drop-zone"
                    class="border-dashed border-2 border-gray-300 mt-3 rounded-[11px] h-[159px] 
           flex items-center justify-center transition duration-200 bg-white">

                    <label for="file-upload"
                        class="flex flex-col items-center justify-center cursor-pointer text-center px-4">
                        <img src="{{ asset('tutor/images/file-uploader.png') }}" />

                        <span class="text-sm text-[#181D27] Poppins mt-2">
                            Click to <span class="text-blue-500">browse</span> or drag & drop here (Certificates PDF)
                        </span>

                        <span id="file-count" class="text-xs text-gray-500 mt-1"></span>

                        <input id="file-upload" type="file" class="hidden" name="certificates[]" multiple
                            accept="application/pdf" />
                    </label>
                </div>
                 --}}   
                        <h3 class="text-lg Poppins-medium mt-3 text-[#1D1B20]">
                                Upload Certificates
                            </h3>
                    <div id="drop-zone" class="mt-3"> <x-file-uploader name="certificates" :multiple="true"
                            :accept=".pdf" accept="image/*,application/pdf" :existingFiles="$tutor->tutorCertificates"
                            deleteInputName="deleted_attachments" />
                    </div>
                    @error('certificates')
                        <span class="text-red-600">{{ $message }}</span>
                    @enderror

                    <div class="mt-3">
                        <button
                            class="w-full rounded-[6px] cursor-pointer border bg-[#133754] text-[#FFFFFF] Poppins-medium  text-[15px]  py-4  ">
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        @else
            <div class="max-w-[480px] w-[480px] h-full p-4 px-8 border-2 rounded-[19px] my-1 border-[#EFEFEF]  ">
                <form action="{{ route('tutor.profile.update') }}" method="post" enctype="multipart/form-data">
                    <div class="relative inline-block">
                        <img src="{{ asset($tutor->userDefaultProfile) }}" id="profilePreview"
                            class="bg-cover w-[205px] h-[193px] my-2 rounded-[9px] object-cover " alt="Profile" />

                        <input type="file" id="profile-upload" name="profile" accept="image/*" class="hidden" />

                        <label for="profile-upload"
                            class="absolute -bottom-3 right-3 w-9 h-9 rounded-sm bg-[#F4C701]
                        flex items-center justify-center  cursor-pointer
                        hover:bg-yellow-500 transition">
                            <i class="fa-solid fa-pencil"></i>
                        </label>
                    </div>
                    @error('profile')
                        <span class="text-red-600">{{ $message }}</span>
                    @enderror

                    <div class="mt-4 ">
                        <h2 class="text-[23px] Poppins-medium text-[#133754]">Personal information</h2>

                    </div>
                    @csrf
                    <div class="relative mb-6 mt-6">
                        <input type="text" id="username" value="{{ auth()->user()->username }}" placeholder=""
                            disabled readonly
                            class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none" />

                        <label for="username"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm  Poppins text-[#49454F]
                    peer-placeholder-shown:top-1/2
                    peer-placeholder-shown:-translate-y-1/2
                    peer-placeholder-shown:text-gray-400
                    peer-focus:top-0">
                            Username
                        </label>
                    </div>
                    <div class="relative mb-6 mt-6">
                        <input type="text" id="first_name" value="{{ auth()->user()->first_name }}"
                            name="first_name" placeholder=""
                            class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none" />

                        <label for="first_name"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm  Poppins text-[#49454F]
                    peer-placeholder-shown:top-1/2
                    peer-placeholder-shown:-translate-y-1/2
                    peer-placeholder-shown:text-gray-400
                    peer-focus:top-0">
                            First Name
                        </label>
                    </div>
                    @error('first_name')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror
                    <div class="relative mb-6 mt-9">
                        <input type="text" id="last_name" value="{{ auth()->user()->last_name }}" placeholder=""
                            name="last_name"
                            class="peer w-full rounded-sm text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px] focus:outline-none" />

                        <label for="last_name"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
                            peer-placeholder-shown:top-1/2
                            peer-placeholder-shown:-translate-y-1/2
                            peer-placeholder-shown:text-gray-400
                            peer-focus:top-0">
                            Last Name
                        </label>
                    </div>
                    @error('last_name')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror
                    <div class="relative mb-6 mt-9">
                        <input type="password" value="" id="password" placeholder="" name="password"
                            class="peer w-full rounded-sm text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px] focus:outline-none" />

                        <label for="password"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
                                    peer-placeholder-shown:top-1/2
                                    peer-placeholder-shown:-translate-y-1/2
                                    peer-placeholder-shown:text-gray-400
                                    peer-focus:top-0">
                            New Password
                        </label>
                    </div>
                    @error('password')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror
                    <div class="relative mb-6 mt-9">
                        <input type="password" id="new_password" value="" placeholder=""
                            name="password_confirmation"
                            class="peer w-full rounded-sm text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px] focus:outline-none" />

                        <label for="new_password"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
                            peer-placeholder-shown:top-1/2
                            peer-placeholder-shown:-translate-y-1/2
                            peer-placeholder-shown:text-gray-400
                            peer-focus:top-0">
                            Confirm Password
                        </label>
                    </div>
                    @error('password_confirmation')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror




                    <div class="mt-3 space-y-3 ">
                        <button type="submit"
                            class="w-full rounded-[6px] cursor-pointer border bg-[#133754] text-[#FFFFFF] Poppins-medium  text-[15px]  py-4  ">
                            Save Changes
                        </button>

                        <button
                            class="w-full rounded-[6px] cursor-pointer  border-[#133754] Poppins-medium  border-[1.5px] text-[#133754]   text-[15px]  py-4  "
                            onclick="window.location.href='{{ route('tutor.tutorProfile') }}'">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        @endif
        <div>

        </div>
    </div>

    @include('components.cancelModal', ['id' => '_sub', 'route' => route('tutor.cancel.subscription')]);

    @push('scripts')
        <script src="{{ asset('uploader.js') }}"></script>
        <script>
            // document.addEventListener('DOMContentLoaded', function() {

            //     const form = document.querySelector('form');

            //     const toolbarOptions = [
            //         [{
            //             'font': []
            //         }],
            //         [{
            //             'header': [1, 2, 3, 4, 5, 6, false]
            //         }],
            //         ['bold', 'italic', 'underline', 'strike'],
            //         [{
            //             'color': []
            //         }, {
            //             'background': []
            //         }],
            //         [{
            //             'script': 'sub'
            //         }, {
            //             'script': 'super'
            //         }],
            //         [{
            //             'list': 'ordered'
            //         }, {
            //             'list': 'bullet'
            //         }],
            //         [{
            //             'align': []
            //         }],
            //         ['link', 'image'],
            //         ['clean']
            //     ];

            //     let qualificationEditor;
            //     let introductionEditor;

            //     if (!document.querySelector('#qualification-editor .ql-editor')) {
            //         qualificationEditor = new Quill('#qualification-editor', {
            //             theme: 'snow',
            //             modules: {
            //                 toolbar: toolbarOptions
            //             }
            //         });
            //     }

            //     if (!document.querySelector('#introduction-editor .ql-editor')) {
            //         introductionEditor = new Quill('#introduction-editor', {
            //             theme: 'snow',
            //             modules: {
            //                 toolbar: toolbarOptions
            //             }
            //         });
            //     }

            //     const qualificationField = document.getElementById('qualification');
            //     const introductionField = document.getElementById('introduction');

            //     form.addEventListener('submit', function() {
            //         if (qualificationEditor) {
            //             qualificationField.value = qualificationEditor.root.innerHTML;
            //         }
            //         if (introductionEditor) {
            //             introductionField.value = introductionEditor.root.innerHTML;
            //         }
            //     });

            // });
            
            document.addEventListener('DOMContentLoaded', function () {

    const toolbarOptions = [
        [{ font: [] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ color: [] }, { background: [] }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ align: [] }],
        ['link', 'image'],
        ['clean']
    ];

    const qualificationEditor = new Quill('#qualification-editor', {
        theme: 'snow',
        modules: {
            toolbar: toolbarOptions
        }
    });

    const introductionEditor = new Quill('#introduction-editor', {
        theme: 'snow',
        modules: {
            toolbar: toolbarOptions
        }
    });

    const form = document.querySelector('form');

    form.addEventListener('submit', function () {
        document.getElementById('qualification').value =
            qualificationEditor.root.innerHTML;

        document.getElementById('introduction').value =
            introductionEditor.root.innerHTML;
    });

});
            document.getElementById('profile-upload').addEventListener('change', function(e) {
                const file = e.target.files[0];

                if (!file) return;

                // ✅ check image type
                if (!file.type.startsWith('image/')) {
                    alert('Only image files are allowed!');
                    e.target.value = ''; // reset input
                    return;
                }

                const reader = new FileReader();

                reader.onload = function(event) {
                    document.getElementById('profilePreview').src = event.target.result;
                };

                reader.readAsDataURL(file);
            });
        </script>
    @endpush
@endsection
