@extends('layouts.app')

@section('content')
    <div class="row mb-4">
        <div class="col-md-6 mx-auto">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-5 text-center">
                    <div class="mb-3">
                        <img src="{{ $admin->profilePhotoPath ?? asset('media/demo-img.png') }}" alt="{{ $admin->name }}"
                            style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #e9ecef;">
                    </div>
                    <h5 class="mb-1 fw-semibold">{{ $admin->name }}</h5>
                    <span class="badge bg-secondary">{{ $admin->email }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <h5 class="mb-4 fw-semibold text-primary">
                        <i class="fas fa-user-circle me-2"></i>
                        {{ __('Profile Details') }}
                    </h5>
                    <form id="profile-form" action="{{ route('admin.profile.update', $admin->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('Name') }}</label>
                                <input type="text" class="form-control form-control-sm" name="name"
                                    value="{{ old('name', $admin->name) }}" placeholder="{{ __('Enter your name') }}">
                                @error('name')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('Email Address') }}</label>
                                <input type="email" class="form-control form-control-sm" name="email"
                                    value="{{ old('email', $admin->email) }}" placeholder="{{ __('Enter your email') }}">
                                @error('email')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('Phone Number') }}</label>
                                <input type="text" class="form-control form-control-sm" name="phone_no"
                                    value="{{ old('phone_no', $admin->phone_no) }}"
                                    placeholder="{{ __('Enter your phone number') }}">
                                @error('phone_no')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-4">
                                <label class="form-label fw-medium small">
                                    {{ __('Profile Photo') }}
                                </label>

                                <div class="d-flex flex-column gap-3">
                                    {{-- Clickable Image --}}
                                    <div>
                                        <img id="imagePreview"
                                            src="{{ $admin->profilePhotoPath ?? 'https://placehold.co/600x400' }}"
                                            alt="preview" class="rounded-3"
                                            style="width:90%; height:280px; object-fit:cover; cursor:pointer; border:2px dashed #ccc;"
                                            onclick="document.getElementById('imageInput').click()">
                                    </div>

                                    {{-- Hidden Input --}}
                                    <input type="file" name="profile_photo" id="imageInput" accept="image/*"
                                        class="d-none">

                                    <small class="text-muted">
                                        <strong>Click on image to upload (JPG, PNG, JPEG – Max 2MB)</strong>
                                    </small>

                                    @error('profile_photo')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <h5 class="mb-4 fw-semibold text-primary">
                        <i class="fas fa-key me-2"></i>
                        {{ __('Change Password') }}
                    </h5>
                    <form id="password-form" action="{{ route('admin.profile.update-password') }}" method="POST">
                        @csrf

                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-medium small">{{ __('Current Password') }}</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-sm pe-5 togglePassword"
                                        name="current_password" placeholder="********">
                                    <i class="fas fa-eye-slash position-absolute top-50 end-0 translate-middle-y me-3 text-muted togglePassword"
                                        style="cursor: pointer;"></i>
                                </div>
                                @error('current_password')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('New Password') }}</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-sm pe-5 togglePassword"
                                        name="password" placeholder="********">
                                    <i class="fas fa-eye-slash position-absolute top-50 end-0 translate-middle-y me-3 text-muted togglePassword"
                                        style="cursor: pointer;"></i>
                                </div>
                                @error('password')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('Confirm Password') }}</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-sm pe-5 togglePassword"
                                        name="password_confirmation" placeholder="********">
                                    <i class="fas fa-eye-slash position-absolute top-50 end-0 translate-middle-y me-3 text-muted togglePassword"
                                        style="cursor: pointer;"></i>
                                </div>
                                @error('password_confirmation')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4 text-end">
        <button type="button" id="single-update-btn" class="btn btn-primary px-4">
            <i class="fas fa-save me-2"></i>{{ __('Update') }}
        </button>
    </div>
    <script>
        document.getElementById('single-update-btn').addEventListener('click', function() {
            var profileForm = document.getElementById('profile-form');
            var passwordForm = document.getElementById('password-form');
            
            var hasPasswordData = passwordForm.querySelector('[name="current_password"]').value ||
                                  passwordForm.querySelector('[name="password"]').value ||
                                  passwordForm.querySelector('[name="password_confirmation"]').value;
            
            if (hasPasswordData) {
                passwordForm.submit();
            } else {
                profileForm.submit();
            }
        });

        document.getElementById('imageInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            const preview = document.getElementById('imagePreview');

            if (!file) {
                preview.src = 'https://placehold.co/600x400';
                return;
            }

            const reader = new FileReader();
            reader.onload = () => preview.src = reader.result;
            reader.readAsDataURL(file);
        });

        document.querySelectorAll('.position-relative').forEach(wrapper => {
            const input = wrapper.querySelector('input');
            const icon = wrapper.querySelector('i');

            icon.addEventListener('click', () => {
                if (input.type === 'password') {
                    input.type = 'text';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                } else {
                    input.type = 'password';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                }
            });
        });
    </script>
@endsection