@extends('user::layouts.master')
@section('breadcrumb_title', 'My Profile')

@section('content')

    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-semibold">Update Profile</h2>
    </div>

    <div class="card">
        <form action="{{ route('user.profile.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PATCH')

            <div class="tpd-setting-box profile">
                <!-- Profile Banner -->
                <div class="tp-dashboard-banner-bg relative mb-8 h-44 bg-lightGray rounded-lg bg-cover bg-center bg-no-repeat overflow-hidden"
                    data-background="{{ $user->getFirstMediaUrl('cover_photo') ? asset($user->getFirstMediaUrl('cover_photo')) : '' }}">

                    <!-- Content Container -->
                    <div class="relative h-full flex justify-between items-start p-6">

                        <!-- Profile Avatar Section -->
                        <div class="flex items-start">
                            <div class="relative">
                                <!-- Avatar Container -->
                                <div class="avatar relative">
                                    <img src="{{ $user->getFirstMediaUrl('avatar') ? asset($user->getFirstMediaUrl('avatar')) : '' }}"
                                        class="w-28 h-28 rounded-full border-4 border-white shadow-lg object-cover">
                                </div>

                                <!-- Avatar Upload Button -->
                                <button
                                    class="avater_upload absolute -bottom-2 -right-2 bg-white rounded-full p-1 shadow-lg hover:shadow-xl transition-all duration-300 group">
                                    <svg width="38" height="38" viewBox="0 0 38 38" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="19" cy="19" r="18" fill="white" stroke="#E6E8F0" />
                                        <path
                                            d="M23.352 13.5172L23.272 13.3463C23.056 12.9034 22.808 12.3907 22.656 12.0954C22.288 11.3962 21.656 11.0078 20.88 11H17.112C16.336 11.0078 15.712 11.3962 15.344 12.0954C15.184 12.4062 14.912 12.9656 14.688 13.424L14.64 13.5172C14.616 13.5794 14.552 13.6104 14.488 13.6104C12.56 13.6104 11 15.1332 11 16.9978V21.6127C11 23.4772 12.56 25 14.488 25H23.512C25.432 25 27 23.4772 27 21.6127V16.9978C27 15.1332 25.432 13.6104 23.512 13.6104C23.44 13.6104 23.384 13.5716 23.352 13.5172Z"
                                            fill="#303651" />
                                        <path
                                            d="M19.0035 15.9806C19.8435 15.9806 20.6355 16.2992 21.2275 16.8741C21.8195 17.4568 22.1475 18.2259 22.1475 19.0339C22.1395 19.8808 21.7875 20.6421 21.2195 21.1937C20.6515 21.7454 19.8675 22.0872 19.0035 22.0872C18.1635 22.0872 17.3795 21.7687 16.7795 21.1937C16.1875 20.6111 15.8595 19.8497 15.8595 19.0339C15.8515 18.2259 16.1795 17.4646 16.7715 16.8819C17.3715 16.2992 18.1635 15.9806 19.0035 15.9806ZM19.0035 17.146C18.4835 17.146 17.9955 17.3402 17.6195 17.7054C17.2515 18.0628 17.0515 18.5367 17.0595 19.0262V19.0339C17.0595 19.5389 17.2595 20.0128 17.6275 20.3702C17.9955 20.7276 18.4835 20.9218 19.0035 20.9218C20.0755 20.9218 20.9395 20.075 20.9475 19.0339C20.9475 18.5289 20.7475 18.055 20.3795 17.6976C20.0115 17.3402 19.5235 17.146 19.0035 17.146ZM23.4915 15.7942C23.8915 15.7942 24.2195 16.1127 24.2195 16.5012C24.2195 16.8896 23.8915 17.2004 23.4915 17.2004C23.0915 17.2004 22.7715 16.8896 22.7715 16.5012C22.7715 16.1127 23.0915 15.7942 23.4915 15.7942Z"
                                            fill="white" />
                                    </svg>
                                </button>

                                <!-- Hidden File Input for Avatar -->
                                <input type="file" id="avatar" name="avatar" accept="image/*" class="hidden">
                            </div>
                        </div>

                        <!-- Edit Cover Photo Button -->
                        <div class="flex">
                            <button
                                class="profile_cover_photo_upload bg-white bg-opacity-90 hover:bg-opacity-100 text-gray-800 px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all duration-300 shadow-md hover:shadow-lg">
                                <svg width="18" height="16" viewBox="0 0 18 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M13.624 2.8768L13.539 2.68146C13.3095 2.17536 13.046 1.58935 12.8845 1.25194C12.4935 0.45283 11.822 0.00887902 10.9975 0H6.994C6.1695 0.00887902 5.5065 0.45283 5.1155 1.25194C4.9455 1.6071 4.6565 2.24639 4.4185 2.77026L4.3675 2.8768C4.342 2.94784 4.274 2.98335 4.206 2.98335C2.1575 2.98335 0.5 4.72364 0.5 6.85461V12.1287C0.5 14.2597 2.1575 16 4.206 16H13.794C15.834 16 17.5 14.2597 17.5 12.1287V6.85461C17.5 4.72364 15.834 2.98335 13.794 2.98335C13.7175 2.98335 13.658 2.93896 13.624 2.8768Z"
                                        fill="currentColor" />
                                    <path
                                        d="M9.00471 5.69173C9.89721 5.69173 10.7387 6.05577 11.3677 6.71282C11.9967 7.37875 12.3452 8.25777 12.3452 9.18119C12.3367 10.149 11.9627 11.0191 11.3592 11.6496C10.7557 12.28 9.92271 12.6706 9.00471 12.6706C8.11221 12.6706 7.27921 12.3066 6.64171 11.6496C6.01271 10.9836 5.66421 10.1135 5.66421 9.18119C5.65571 8.25777 6.00421 7.38763 6.63321 6.7217C7.27071 6.05577 8.11221 5.69173 9.00471 5.69173ZM9.00471 7.02359C8.45221 7.02359 7.93371 7.24556 7.53421 7.66288C7.14321 8.07131 6.93071 8.61293 6.93921 9.17231V9.18119C6.93921 9.75833 7.15171 10.2999 7.54271 10.7084C7.93371 11.1168 8.45221 11.3388 9.00471 11.3388C10.1437 11.3388 11.0617 10.371 11.0702 9.18119C11.0702 8.60405 10.8577 8.06243 10.4667 7.654C10.0757 7.24556 9.55721 7.02359 9.00471 7.02359ZM13.7732 5.47864C14.1982 5.47864 14.5467 5.84268 14.5467 6.28663C14.5467 6.73058 14.1982 7.08574 13.7732 7.08574C13.3482 7.08574 13.0082 6.73058 13.0082 6.28663C13.0082 5.84268 13.3482 5.47864 13.7732 5.47864Z"
                                        fill="white" />
                                </svg>
                                <span>Edit Cover Photo</span>
                            </button>

                            <!-- Hidden File Input for Cover Photo -->
                            <input type="file" id="cover_photo" name="cover_photo" accept="image/*" class="hidden">
                        </div>
                    </div>
                </div>

                <div
                    class="w-full grid grid-cols-2 lg:grid-cols-1 gap-8 lg:divide-x divide-border border-b border-border pb-10">
                    <div class="col-span-2">
                        <div class="mb-10">

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div class="input-with-label">
                                    <label>Full Name <span class="text-red-500">*</span></label>
                                    <input type="text" name="name" value="{{ $user->name }}"
                                        class="@error('name') border-red-500 @enderror" required>
                                    @error('name')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="input-with-label">
                                    <label>Username</label>
                                    <input type="text" name="username" value="{{ $user->username }}"
                                        class="@error('username') border-red-500 @enderror">
                                    @error('username')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="input-with-label">
                                    <label>Phone</label>
                                    <input type="text" name="phone" value="{{ $user->getMeta('phone') }}"
                                        class="@error('phone') border-red-500 @enderror">
                                    @error('phone')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="input-with-label">
                                    <label>Designation</label>
                                    <input type="text" name="designation" value="{{ $user->getMeta('designation') }}"
                                        class="@error('designation') border-red-500 @enderror">
                                    @error('designation')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-4 input-with-label">
                                <label>Skill</label>
                                <input type="text" name="skill" value="{{ $user->getMeta('skill') }}"
                                    class="@error('skill') border-red-500 @enderror">
                                @error('skill')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4 input-with-label">
                                <label>Biography</label>
                                <textarea name="bio" rows="10" class="rich-editor @error('bio') border-red-500 @enderror">{{ $user->getMeta('bio') }}</textarea>
                                @error('bio')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <h5 class="text-lg font-medium mb-4">Social Links</h5>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="mb-4 input-with-label">
                                    <label>Facebook Link</label>
                                    <input type="url" name="facebook_link"
                                        value="{{ $user->getMeta('facebook_link') }}"
                                        class="@error('facebook_link') border-red-500 @enderror"
                                        placeholder="Facebook link">
                                    @error('facebook_link')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-4 input-with-label">
                                    <label>X Link</label>
                                    <input type="url" name="x_link" value="{{ $user->getMeta('x_link') }}"
                                        class="@error('x_link') border-red-500 @enderror" placeholder="X link">
                                    @error('x_link')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-4 input-with-label">
                                    <label>LinkedIn Link</label>
                                    <input type="url" name="linkedin_link"
                                        value="{{ $user->getMeta('linkedin_link') }}"
                                        class="@error('linkedin_link') border-red-500 @enderror"
                                        placeholder="LinkedIn link">
                                    @error('linkedin_link')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-4 input-with-label">
                                    <label>Instagram Link</label>
                                    <input type="url" name="instagram_link"
                                        value="{{ $user->getMeta('instagram_link') }}"
                                        class="@error('instagram_link') border-red-500 @enderror"
                                        placeholder="Instagram link">
                                    @error('instagram_link')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-4 input-with-label">
                                    <label>YouTube Link</label>
                                    <input type="url" name="youtube_link"
                                        value="{{ $user->getMeta('instagram_link') }}"
                                        class="@error('youtube_link') border-red-500 @enderror"
                                        placeholder="YouTube link">
                                    @error('youtube_link')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="mb-4 input-with-label">
                                    <label>Pinterest Link</label>
                                    <input type="url" name="pinterest_link"
                                        value="{{ $user->getMeta('pinterest_link') }}"
                                        class="@error('pinterest_link') border-red-500 @enderror"
                                        placeholder="Pinterest link">
                                    @error('pinterest_link')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

            // data background image
            var img = $('.tp-dashboard-banner-bg').data('background');
            $('.tp-dashboard-banner-bg').css('background-image', 'url(' + img + ')');


            $('.avater_upload').on('click', function(e) {
                e.preventDefault();
                $('#avatar').click();
            });

            $('#avatar').on('change', function() {
                const file = $(this)[0].files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('.avatar').html(`<img class="w-28 h-28 rounded-full border-4 border-white shadow-lg object-cover" src="${e.target.result}">`);
                }
                reader.readAsDataURL(file);
            });

            $('.profile_cover_photo_upload').on('click', function(e) {
                e.preventDefault();
                $('#cover_photo').click();
            });

            $('#cover_photo').on('change', function() {
                const file = $(this)[0].files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('.tp-dashboard-banner-bg').css('background-image', `url(${e.target.result})`);
                }
                reader.readAsDataURL(file);
            });
        });
    </script>
@endpush