@extends('student.layouts.layout')
@section('title', 'Profile')
@section('content')

<style>
     .tutor-profile{
        object-fit: auto;
    }
</style>
    <div class="flex md:flex-nowrap flex-wrap gap-7">

        <form action="{{ route('student.update.profile') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="max-w-[480px] w-[480px] h-full p-4 px-8 border-2 rounded-[19px] my-1 border-[#EFEFEF]  bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('student/Sites/images/profile-bg.jpg') }}')">
                <div class="relative inline-block">
                    <img src="{{ asset(auth()->user()->studentDefaultImage) }}"
                        class="bg-cover w-[205px] h-[193px] my-2 rounded-[9px] tutor-profile object-cover" id="profilePreview" alt="Profile" />

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

                    <label for="profile-upload"
                        class="absolute -bottom-3 right-3 w-9 h-9 rounded-sm bg-[#FFFFFF]
           flex items-center justify-center  cursor-pointer
           hover:bg-[#FFFFFF] transition">
                        <i class="fa-solid fa-pencil"></i>
                    </label>
                </div>

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

                </div>
                <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-[#FFFFFF] text-[#FFFFFF] 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-[#133754] px-1 text-sm  Poppins text-[white]
           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 }}" placeholder=""
                        name="first_name"
                        class="peer w-full rounded-sm placeholder:text-[#FFFFFF] text-[#FFFFFF] 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-[#133754] px-1 text-sm  Poppins text-[white]
           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-[#FFFFFF]  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-[#133754] px-1 text-sm Poppins text-white
           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" placeholder="" id="password" name="password"
                        class="peer w-full rounded-sm text-[#FFFFFF] 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-[#133754] px-1 text-sm Poppins text-white
           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
                {{-- confirm password --}}
                <div class="relative mb-6 mt-9">
                    <input type="password" id="new_password" name="password_confirmation" placeholder=""
                        class="peer w-full rounded-sm text-[#FFFFFF] 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-[#133754] px-1 text-sm Poppins text-[#FFFFFF]
           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>




                <div class="mt-3 space-y-3 ">
                    <button
                        class="w-full rounded-md cursor-pointer border bg-[#F4C701] text-[#000000] Poppins-medium  text-[15px]  py-4  ">
                        Save Changes
                    </button>
                    <button type="button" onclick="window.location.href='{{ route('student.dashboard') }}'"
                        class="w-full rounded-[6px] cursor-pointer  border-[#FFFFFF] Poppins-medium  border-[1.5px] text-[#FFFFFF]   text-[15px]  py-4  "
                        onclick="window.location.href='{{ url('tutorProfile') }}'">
                        Cancel
                    </button>
                </div>
            </div>
        </form>
        <div>

        </div>
    </div>


    @push('scripts')
        <script>
            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
