@extends('layouts.doctor')

@section('title', 'Edit Professional Profile')
@section('header', 'Edit Professional Profile')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    @include('partials.admin._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Professional Profile', 'url' => route('doctor.profile')],
            ['name' => 'Edit Profile', 'url' => '#']
        ]
    ])

    <form action="{{ route('doctor.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6" x-data="{ 
        photoPreview: '{{ $doctor->photo_path ? asset('storage/' . $doctor->photo_path) : '' }}',
        updatePreview(e) {
            const file = e.target.files[0];
            if (file) {
                this.photoPreview = URL.createObjectURL(file);
            }
        }
    }">
        @csrf

        <!-- Main Identity & Photo -->
        <div class="bg-white border border-slate-200 rounded-[2.5rem] shadow-sm overflow-hidden">
            <div class="p-8 border-b border-slate-50 bg-slate-50/30">
                <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs flex items-center gap-2">
                    <svg class="h-4 w-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    Profile Identity & Imagery
                </h3>
            </div>
            
            <div class="p-8 grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
                <!-- Photo Upload -->
                <div class="flex flex-col items-center gap-4">
                    <div class="relative group">
                        <template x-if="photoPreview">
                            <img :src="photoPreview" class="h-40 w-40 rounded-[2rem] object-cover border-4 border-white shadow-xl">
                        </template>
                        <template x-if="!photoPreview">
                            <div class="h-40 w-40 bg-slate-100 rounded-[2rem] flex items-center justify-center text-slate-300 border-4 border-white shadow-lg">
                                <svg class="h-20 w-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            </div>
                        </template>
                        <label for="photo" class="absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity rounded-[2rem] cursor-pointer">
                            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </label>
                    </div>
                    <input type="file" name="photo" id="photo" class="hidden" accept="image/*" @change="updatePreview">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Click photo to update</p>
                    @error('photo')
                        <p class="text-[10px] text-red-500 font-bold uppercase">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Contact Info -->
                <div class="md:col-span-2 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label for="email" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Email Address</label>
                            <input type="email" name="email" id="email" value="{{ old('email', $doctor->email) }}" required
                                   class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-xs font-black uppercase tracking-widest text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all">
                            @error('email')
                                <p class="text-[10px] text-red-500 font-bold uppercase">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-2">
                            <label for="phone" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Phone Number</label>
                            <input type="text" name="phone" id="phone" value="{{ old('phone', $doctor->phone) }}" required
                                   class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-xs font-black uppercase tracking-widest text-slate-700 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all">
                            @error('phone')
                                <p class="text-[10px] text-red-500 font-bold uppercase">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Biography & Specialities -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Biography -->
            <div class="lg:col-span-2 bg-white border border-slate-200 rounded-[2.5rem] shadow-sm overflow-hidden flex flex-col">
                <div class="p-8 border-b border-slate-50 bg-slate-50/30">
                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs flex items-center gap-2">
                        <svg class="h-4 w-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Clinical Biography
                    </h3>
                </div>
                <div class="p-8 flex-1">
                    <div class="prose-editor" wire:ignore>
                        <textarea name="details" id="editor" 
                                  class="w-full bg-slate-50 border border-slate-100 rounded-3xl px-8 py-6 text-sm font-medium text-slate-600 focus:ring-4 focus:ring-emerald-500/10 focus:border-emerald-500 transition-all resize-none leading-relaxed"
                                  placeholder="Describe your clinical journey, area of interest, and medical philosophy...">{{ old('details', $doctor->details) }}</textarea>
                    </div>
                    @error('details')
                        <p class="mt-2 text-[10px] text-red-500 font-bold uppercase">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Specialities -->
            <div class="bg-white border border-slate-200 rounded-[2.5rem] shadow-sm overflow-hidden flex flex-col">
                <div class="p-8 border-b border-slate-50 bg-slate-50/30">
                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs flex items-center gap-2">
                        <svg class="h-4 w-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                        Core Specialities
                    </h3>
                </div>
                <div class="p-8 flex-1 overflow-y-auto max-h-[600px] space-y-3 custom-scrollbar">
                    @foreach($specialities as $spec)
                        <label class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100 hover:bg-indigo-50 hover:border-indigo-100 transition-all cursor-pointer group">
                            <input type="checkbox" name="speciality_ids[]" value="{{ $spec->id }}" 
                                   {{ in_array($spec->id, old('speciality_ids', $doctor->specialities->pluck('id')->toArray())) ? 'checked' : '' }}
                                   class="h-5 w-5 rounded-lg border-slate-200 text-indigo-600 focus:ring-0 transition-all">
                            <span class="text-xs font-black uppercase tracking-widest text-slate-500 group-hover:text-indigo-600">{{ $spec->name }}</span>
                        </label>
                    @endforeach
                    @error('speciality_ids')
                        <p class="text-[10px] text-red-500 font-bold uppercase">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Footer Actions -->
        <div class="bg-slate-900 rounded-[2rem] p-4 flex items-center justify-between shadow-xl shadow-indigo-100/50">
            <a href="{{ route('doctor.profile') }}" class="px-8 py-4 text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] hover:text-white transition-colors">Discard</a>
            <button type="submit" class="px-12 py-4 bg-white text-slate-900 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-indigo-500 hover:text-white transition-all transform hover:scale-105 active:scale-95">
                Save Professional Profile
            </button>
        </div>
    </form>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'), {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
                ]
            }
        })
        .catch(error => {
            console.error(error);
        });
</script>

<style>
.ck-editor__editable {
    min-height: 300px;
    border-radius: 0 0 1.5rem 1.5rem !important;
    border: none !important;
    background-color: #f8fafc !important;
    padding: 2rem !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
}
.ck-toolbar {
    background-color: #cbd5e1 !important;
    border: none !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    padding: 0.5rem 1rem !important;
}
.ck.ck-editor__main>.ck-editor__editable:focus {
    box-shadow: none !important;
    background-color: white !important;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
</style>
@endsection