@extends('page.user-dashboard.app')

@section('content_dash')
<div class="bg-white rounded-2xl shadow-md overflow-hidden border border-gray-200">
     <form action="{{ route('dashboard.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')
    <!-- Profile Photo Section -->
    <div class="flex flex-col items-center bg-gradient-to-r from-blue-50 to-indigo-100 p-4">
        <img id="preview-image" src="{{ $user->image ?? asset('assets/images/default-user.png') }}"
            alt="Profile Photo"
            class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-md mb-3">

        <label for="photo" class="cursor-pointer text-sm text-secondary hover:underline">
            {{__('auth.change_profile_photo')}}
        </label>
        <input id="photo" type="file" name="image" accept="image/*" class="hidden">
        @error('image')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
        
    </div>

    <!-- Form Section -->
    <div class="p-6">
        <h2 class="text-xl font-bold text-gray-800 text-center mb-2 bangla">{{ __('auth.update_profile') }}</h2>
        <p class="text-center text-gray-500 mb-6 bangla">{{ __('auth.update_info') }}</p>

       

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('auth.full_name') }}
                        <span class="text-red-500">*</span>
                    </label>
                    <input id="name" type="text" name="name" value="{{ $user->name }}"
                        class="" />
                    @error('name') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
                </div>

                <!-- Email -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ __('auth.email') }}
                        <span class="text-red-500">*</span>
                    </label>
                    <input id="email" type="email" name="email" value="{{ $user->email }}"
                        class="" />
                    @error('email') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
                </div>

                <!-- Phone -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">{{ __('auth.phone') }}
                        <span class="text-red-500">*</span>
                    </label>
                    <input id="phone" type="tel" name="phone" value="{{ $user->phone }}"
                        class="" />
                    @error('phone') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
                </div>

                <!-- Address -->
                <div>
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-1">{{ __('auth.address') }}</label>
                    <input id="address" type="text" name="address" value="{{ $user->address }}"
                        class="" />
                    @error('address') <p class="text-sm text-red-500">{{ $message }}</p> @enderror
                </div>
            </div>

            <!-- Submit -->
            <div class="pt-4">
                <button id="update-btn" type="submit"
                    class="btn-primary w-full opacity-50 " disabled>
                    {{ __('auth.update_password_button') }}
                </button>
            </div>
      
    </div>
      </form>
</div>

    
 <div class="mt-8 bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition"
    id="updatePassword">
    <h3 class="text-xl font-bold text-gray-800 mb-4">{{ __('auth.update_password') }}</h3>

    <form action="{{route('dashboard.profile.update-password')}}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Current Password -->
        <div class="relative">
            <label for="current_password"
                class="mb-1 block text-md font-medium text-gray-700">{{ __('auth.current_password') }}
                <span class="text-red-500">*</span></label>
            <input id="current_password" type="password" name="current_password"
                class="w-full border rounded px-3 py-2 pr-10" required />
            <button type="button" class="toggle-password absolute right-3 top-10 cursor-pointer text-gray-500"
                data-target="#current_password">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 eye-icon" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
            </button>
            @error('current_password')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- New Password -->
        <div class="relative">
            <label for="new_password"
                class="mb-1 block text-md font-medium text-gray-700">{{ __('auth.new_password') }}
                <span class="text-red-500">*</span></label>
            <input id="new_password" type="password" name="new_password"
                class="w-full border rounded px-3 py-2 pr-10" required />
            <button type="button" class="toggle-password absolute right-3 top-10 cursor-pointer text-gray-500"
                data-target="#new_password">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 eye-icon" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
            </button>
            @error('new_password')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <!-- Confirm Password -->
        <div class="relative">
            <label for="new_password_confirmation"
                class="mb-1 block text-md font-medium text-gray-700">{{ __('auth.confirm_password') }}
                <span class="text-red-500">*</span></label>
            <input id="new_password_confirmation" type="password" name="new_password_confirmation"
                class="w-full border rounded px-3 py-2 pr-10" required />
            <button type="button" class="toggle-password absolute right-3 top-10 cursor-pointer text-gray-500"
                data-target="#new_password_confirmation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 eye-icon" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
            </button>
        </div>

        <!-- Submit -->
        <div>
            <button type="submit" class="btn-primary w-full">
                {{ __('auth.update_password_button') }}
            </button>
        </div>
    </form>
</div>

<!-- jQuery toggle -->
<script>
$(document).ready(function(){
    $('.toggle-password').click(function(){
        var input = $($(this).data('target'));
        var svg = $(this).find('.eye-icon');

        if(input.attr('type') === 'password'){
            input.attr('type', 'text');
            // Eye-off icon
            svg.html(`
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a10.05 10.05 0 012.189-3.301M6.432 6.432A9.956 9.956 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.05 10.05 0 01-1.184 2.318M3 3l18 18" />
            `);
        } else {
            input.attr('type', 'password');
            // Eye icon
            svg.html(`
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            `);
        }
    });
});
</script>



    <script>
        // Original values
        const originalData = {
            name: "{{ $user->name }}",
            email: "{{ $user->email }}",
            phone: "{{ $user->phone }}",
            address: "{{ $user->address }}",
            photo: null
        };

        const btn = document.getElementById('update-btn');
        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        const phoneInput = document.getElementById('phone');
        const photoInput = document.getElementById('photo');
        const addressInput = document.getElementById('address');
        const previewImage = document.getElementById('preview-image');

        function checkChanges() {
            if (
                nameInput.value !== originalData.name ||
                emailInput.value !== originalData.email ||
                phoneInput.value !== originalData.phone ||
                addressInput.value !== originalData.address ||
                photoInput.files.length > 0
            ) {
                btn.disabled = false;
                btn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                btn.disabled = true;
                btn.classList.add('opacity-50', 'cursor-not-allowed');
            }
        }

        [nameInput, emailInput, phoneInput, addressInput].forEach(input => {
            input.addEventListener('input', checkChanges);
        });

        photoInput.addEventListener('change', function(e) {
            if (e.target.files.length > 0) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);
            }
            checkChanges();
        });
    </script>
@endsection