@extends('layouts.admin')
@section('title', 'Edit Admin Profile')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css">
@endpush

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">

        @php
            $completion = 0;
            if (!empty($admin->name)) $completion += 34;
            if (!empty($admin->email)) $completion += 33;
            if (!empty($admin->photo)) $completion += 33;

            $photoUrl = !empty($admin->photo) ? asset($admin->photo) : null;
        @endphp

        {{-- Header --}}
        <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800 md:text-3xl">Edit Profile</h1>
                <p class="mt-1 text-sm text-slate-500">
                    আপনার অ্যাডমিন প্রোফাইল, ছবি এবং পাসওয়ার্ড আপডেট করুন।
                </p>
            </div>

            <a href="{{ route('admin.profile') }}"
               class="inline-flex items-center rounded-2xl bg-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-300">
                Back
            </a>
        </div>

        {{-- Completion Card --}}
        <div class="mb-6 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                    <h2 class="text-lg font-bold text-slate-800">Profile Completion</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        নাম, ইমেইল এবং প্রোফাইল ফটো পূরণ করলে প্রোফাইল সম্পূর্ণ হবে।
                    </p>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-extrabold text-indigo-600">{{ $completion }}%</div>
                    <div class="text-xs text-slate-500">Completed</div>
                </div>
            </div>

            <div class="mt-4 h-3 w-full overflow-hidden rounded-full bg-slate-200">
                <div class="h-full rounded-full bg-indigo-600 transition-all duration-500"
                     style="width: {{ $completion }}%"></div>
            </div>

            <div class="mt-4 grid gap-3 sm:grid-cols-3">
                <div class="rounded-2xl border px-4 py-3 {{ !empty($admin->name) ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 bg-slate-50 text-slate-500' }}">
                    Name {{ !empty($admin->name) ? '✓' : '•' }}
                </div>
                <div class="rounded-2xl border px-4 py-3 {{ !empty($admin->email) ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 bg-slate-50 text-slate-500' }}">
                    Email {{ !empty($admin->email) ? '✓' : '•' }}
                </div>
                <div class="rounded-2xl border px-4 py-3 {{ !empty($admin->photo) ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 bg-slate-50 text-slate-500' }}">
                    Photo {{ !empty($admin->photo) ? '✓' : '•' }}
                </div>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-3">
            {{-- Left Preview Card --}}
            <div class="lg:col-span-1">
                <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                    <h2 class="text-lg font-bold text-slate-800">Profile Preview</h2>

                    <div class="mt-6 flex flex-col items-center text-center">
                        <img id="liveProfilePreview"
                             src="{{ $photoUrl }}"
                             alt="Profile Photo"
                             class="{{ $photoUrl ? '' : 'hidden' }} h-32 w-32 rounded-full border-4 border-white object-cover shadow-lg">

                        <div id="liveProfileFallback"
                             class="{{ $photoUrl ? 'hidden' : 'flex' }} h-32 w-32 items-center justify-center rounded-full bg-slate-100 text-4xl font-bold text-slate-500 shadow-lg">
                            {{ strtoupper(substr($admin->name ?? 'A', 0, 1)) }}
                        </div>

                        <div class="mt-4">
                            <div class="text-xl font-bold text-slate-800" id="liveNamePreview">
                                {{ $admin->name }}
                            </div>
                            <div class="mt-1 text-sm text-slate-500 break-all" id="liveEmailPreview">
                                {{ $admin->email }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right Forms --}}
            <div class="space-y-6 lg:col-span-2">

                {{-- SweetAlert --}}
                @if(session('success') || session('error'))
                <script>
                    Swal.fire({
                        icon: '{{ session("success") ? "success" : "error" }}',
                        title: '{{ session("success") ? "Success!" : "Oops!" }}',
                        text: @json(session('success') ?? session('error')),
                        toast: true,
                        position: 'top-end',
                        timer: 2500,
                        showConfirmButton: false
                    });
                </script>
                @endif

                {{-- Validation --}}
                @if ($errors->any())
                    <div class="rounded-3xl border border-rose-200 bg-rose-50 p-5 shadow-sm">
                        <div class="mb-2 font-semibold text-rose-700">Please fix the following errors:</div>
                        <ul class="list-disc space-y-1 pl-5 text-sm text-rose-600">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- Profile Info Form --}}
                <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                    <h2 class="text-lg font-bold text-slate-800">Profile Information</h2>
                    <p class="mt-1 text-sm text-slate-500">নাম, ইমেইল এবং প্রোফাইল ফটো আপডেট করুন।</p>

                    <form method="POST"
                          action="{{ route('admin.profile.update') }}"
                          enctype="multipart/form-data"
                          class="mt-6 space-y-6"
                          id="profileForm">
                        @csrf

                        <div class="grid gap-6 md:grid-cols-2">
                            <div>
                                <label class="text-sm font-semibold text-slate-700">Name</label>
                                <input type="text"
                                       name="name"
                                       id="nameInput"
                                       value="{{ old('name', $admin->name) }}"
                                       class="mt-2 w-full rounded-2xl border border-slate-300 px-4 py-3 outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100">
                            </div>

                            <div>
                                <label class="text-sm font-semibold text-slate-700">Email</label>
                                <input type="email"
                                       name="email"
                                       id="emailInput"
                                       value="{{ old('email', $admin->email) }}"
                                       class="mt-2 w-full rounded-2xl border border-slate-300 px-4 py-3 outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100">
                            </div>
                        </div>

                        {{-- Drag & Drop Upload --}}
                        <div>
                            <label class="text-sm font-semibold text-slate-700">Profile Photo</label>
                            <input type="file" name="photo" id="photoInput" accept="image/png,image/jpeg,image/jpg,image/webp" class="hidden">
                            <input type="hidden" name="cropped_photo" id="croppedPhotoInput">

                            <div id="dropZone"
                                 class="mt-2 rounded-3xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-indigo-400 hover:bg-indigo-50">
                                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-2xl shadow-sm">
                                    📷
                                </div>
                                <p class="mt-4 font-semibold text-slate-700">Drag & drop photo here</p>
                                <p class="mt-1 text-sm text-slate-500">or click to browse image</p>
                                <p class="mt-2 text-xs text-slate-400">JPG, PNG, WEBP • max 2MB</p>
                            </div>

                            <div class="mt-4 flex flex-wrap gap-3">
                                <button type="button"
                                        id="choosePhotoBtn"
                                        class="rounded-2xl bg-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-300">
                                    Choose Photo
                                </button>

                                <button type="button"
                                        id="cropPhotoBtn"
                                        class="hidden rounded-2xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700">
                                    Crop & Use Photo
                                </button>
                            </div>

                            {{-- Crop Area --}}
                            <div id="cropContainer" class="mt-6 hidden">
                                <div class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-100 p-4">
                                    <img id="cropImage" src="" alt="Crop Image" class="max-h-[420px] w-full">
                                </div>
                            </div>
                        </div>

                        <button type="submit"
                                class="rounded-2xl bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                            Update Profile
                        </button>
                    </form>
                </div>

                {{-- Password Form --}}
                <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                    <h2 class="text-lg font-bold text-slate-800">Change Password</h2>
                    <p class="mt-1 text-sm text-slate-500">সিকিউর পাসওয়ার্ড ব্যবহার করুন।</p>

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

                        <div class="grid gap-6 md:grid-cols-2">
                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold text-slate-700">Current Password</label>
                                <div class="relative mt-2">
                                    <input type="password"
                                           name="current_password"
                                           id="currentPassword"
                                           class="w-full rounded-2xl border border-slate-300 px-4 py-3 pr-12 outline-none transition focus:border-green-500 focus:ring-4 focus:ring-green-100">
                                    <button type="button"
                                            class="toggle-password absolute right-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-slate-500"
                                            data-target="currentPassword">
                                        Show
                                    </button>
                                </div>
                            </div>

                            <div>
                                <label class="text-sm font-semibold text-slate-700">New Password</label>
                                <div class="relative mt-2">
                                    <input type="password"
                                           name="password"
                                           id="newPassword"
                                           class="w-full rounded-2xl border border-slate-300 px-4 py-3 pr-12 outline-none transition focus:border-green-500 focus:ring-4 focus:ring-green-100">
                                    <button type="button"
                                            class="toggle-password absolute right-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-slate-500"
                                            data-target="newPassword">
                                        Show
                                    </button>
                                </div>

                                <div class="mt-3">
                                    <div class="mb-2 flex items-center justify-between">
                                        <span class="text-xs font-medium text-slate-500">Password Strength</span>
                                        <span id="passwordStrengthText" class="text-xs font-semibold text-slate-500">Weak</span>
                                    </div>
                                    <div class="h-2 w-full overflow-hidden rounded-full bg-slate-200">
                                        <div id="passwordStrengthBar" class="h-full w-0 rounded-full transition-all duration-300"></div>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label class="text-sm font-semibold text-slate-700">Confirm Password</label>
                                <div class="relative mt-2">
                                    <input type="password"
                                           name="password_confirmation"
                                           id="confirmPassword"
                                           class="w-full rounded-2xl border border-slate-300 px-4 py-3 pr-12 outline-none transition focus:border-green-500 focus:ring-4 focus:ring-green-100">
                                    <button type="button"
                                            class="toggle-password absolute right-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-slate-500"
                                            data-target="confirmPassword">
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        <button type="submit"
                                class="rounded-2xl bg-green-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700">
                            Update Password
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const nameInput = document.getElementById('nameInput');
    const emailInput = document.getElementById('emailInput');
    const liveNamePreview = document.getElementById('liveNamePreview');
    const liveEmailPreview = document.getElementById('liveEmailPreview');
    const liveProfilePreview = document.getElementById('liveProfilePreview');
    const liveProfileFallback = document.getElementById('liveProfileFallback');

    if (nameInput) {
        nameInput.addEventListener('input', function () {
            liveNamePreview.textContent = this.value || 'Admin Name';

            if (liveProfileFallback && liveProfileFallback.classList.contains('hidden') === false) {
                liveProfileFallback.textContent = (this.value || 'A').trim().charAt(0).toUpperCase();
            }
        });
    }

    if (emailInput) {
        emailInput.addEventListener('input', function () {
            liveEmailPreview.textContent = this.value || 'admin@email.com';
        });
    }

    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function () {
            const input = document.getElementById(this.dataset.target);
            if (!input) return;

            if (input.type === 'password') {
                input.type = 'text';
                this.textContent = 'Hide';
            } else {
                input.type = 'password';
                this.textContent = 'Show';
            }
        });
    });

    const newPassword = document.getElementById('newPassword');
    const strengthBar = document.getElementById('passwordStrengthBar');
    const strengthText = document.getElementById('passwordStrengthText');

    function calculateStrength(password) {
        let score = 0;
        if (password.length >= 8) score++;
        if (/[A-Z]/.test(password)) score++;
        if (/[a-z]/.test(password)) score++;
        if (/[0-9]/.test(password)) score++;
        if (/[^A-Za-z0-9]/.test(password)) score++;
        return score;
    }

    function updateStrengthMeter(password) {
        const score = calculateStrength(password);

        let width = '0%';
        let color = '';
        let text = 'Weak';

        if (password.length === 0) {
            width = '0%';
            color = '';
            text = 'Weak';
        } else if (score <= 2) {
            width = '25%';
            color = 'bg-rose-500';
            text = 'Weak';
        } else if (score === 3) {
            width = '50%';
            color = 'bg-amber-500';
            text = 'Medium';
        } else if (score === 4) {
            width = '75%';
            color = 'bg-blue-500';
            text = 'Strong';
        } else {
            width = '100%';
            color = 'bg-emerald-500';
            text = 'Very Strong';
        }

        strengthBar.className = `h-full rounded-full transition-all duration-300 ${color}`;
        strengthBar.style.width = width;
        strengthText.textContent = text;
        strengthText.className = 'text-xs font-semibold text-slate-600';
    }

    if (newPassword) {
        newPassword.addEventListener('input', function () {
            updateStrengthMeter(this.value);
        });
    }

    const dropZone = document.getElementById('dropZone');
    const choosePhotoBtn = document.getElementById('choosePhotoBtn');
    const cropPhotoBtn = document.getElementById('cropPhotoBtn');
    const photoInput = document.getElementById('photoInput');
    const cropContainer = document.getElementById('cropContainer');
    const cropImage = document.getElementById('cropImage');
    const croppedPhotoInput = document.getElementById('croppedPhotoInput');

    let cropper = null;

    function resetCropper() {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
    }

    function validateFile(file) {
        if (!file) return false;

        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
        const maxSize = 2 * 1024 * 1024;

        if (!allowedTypes.includes(file.type)) {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: 'Only JPG, PNG, WEBP allowed',
                showConfirmButton: false,
                timer: 2200
            });
            return false;
        }

        if (file.size > maxSize) {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                title: 'Image must be under 2MB',
                showConfirmButton: false,
                timer: 2200
            });
            return false;
        }

        return true;
    }

    function loadImageToCropper(file) {
        if (!validateFile(file)) return;

        const reader = new FileReader();
        reader.onload = function (e) {
            cropImage.src = e.target.result;
            cropContainer.classList.remove('hidden');
            cropPhotoBtn.classList.remove('hidden');
            croppedPhotoInput.value = '';

            resetCropper();

            cropper = new Cropper(cropImage, {
                aspectRatio: 1,
                viewMode: 1,
                dragMode: 'move',
                autoCropArea: 1,
                responsive: true,
                background: false,
            });
        };
        reader.readAsDataURL(file);
    }

    if (choosePhotoBtn) {
        choosePhotoBtn.addEventListener('click', () => photoInput.click());
    }

    if (dropZone) {
        dropZone.addEventListener('click', () => photoInput.click());

        dropZone.addEventListener('dragover', function (e) {
            e.preventDefault();
            dropZone.classList.add('border-indigo-500', 'bg-indigo-50');
        });

        dropZone.addEventListener('dragleave', function () {
            dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');
        });

        dropZone.addEventListener('drop', function (e) {
            e.preventDefault();
            dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');

            const file = e.dataTransfer.files[0];
            if (!file) return;

            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            photoInput.files = dataTransfer.files;

            loadImageToCropper(file);
        });
    }

    if (photoInput) {
        photoInput.addEventListener('change', function () {
            const file = this.files[0];
            loadImageToCropper(file);
        });
    }

    if (cropPhotoBtn) {
        cropPhotoBtn.addEventListener('click', function () {
            if (!cropper) return;

            const canvas = cropper.getCroppedCanvas({
                width: 500,
                height: 500,
                imageSmoothingQuality: 'high'
            });

            const croppedDataUrl = canvas.toDataURL('image/png');
            croppedPhotoInput.value = croppedDataUrl;

            if (liveProfilePreview) {
                liveProfilePreview.src = croppedDataUrl;
                liveProfilePreview.classList.remove('hidden');
            }

            if (liveProfileFallback) {
                liveProfileFallback.classList.add('hidden');
            }

            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Photo cropped successfully',
                showConfirmButton: false,
                timer: 1800
            });
        });
    }
});
</script>
@endpush