@extends('layouts.branch')

@section('title', 'Add Doctor')
@section('header', 'Register New Medical Staff')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
    .ts-control { border-radius: 1rem !important; padding: 1rem 1.5rem !important; border-color: #f1f5f9 !important; background-color: #f8fafc !important; font-weight: 700 !important; }
    .ts-dropdown { border-radius: 1rem !important; padding: 0.5rem !important; border: 1px solid #f1f5f9 !important; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1) !important; }
    .ql-container { border-bottom-left-radius: 1.5rem !important; border-bottom-right-radius: 1.5rem !important; border-color: #f1f5f9 !important; background-color: #f8fafc !important; }
    .ql-toolbar { border-top-left-radius: 1.5rem !important; border-top-right-radius: 1.5rem !important; border-color: #f1f5f9 !important; background-color: #fff !important; }
</style>
@endpush

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Doctors', 'url' => route('branch.doctors.index')],
            ['name' => 'Create', 'url' => route('branch.doctors.create')]
        ]
    ])

    <div class="max-w-4xl mx-auto">
        <form action="{{ route('branch.doctors.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8" x-data="doctorForm()">
            @csrf
            
            <!-- Basic Information Card -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                    <h3 class="text-lg font-semibold text-slate-800">Basic Information</h3>
                    <p class="text-sm text-slate-500">Core details of the medical professional.</p>
                </div>
                
                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2 md:col-span-2">
                        <label class="block text-sm font-medium text-indigo-600 uppercase tracking-widest text-[10px]">Doctor ID (Auto-Generated)</label>
                        <div class="relative">
                            <input type="text" value="{{ $doctorCodePreview }}" readonly
                                class="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-lg text-indigo-700 font-black tracking-widest outline-none cursor-not-allowed uppercase"
                                placeholder="Pending Generation">
                            <div class="absolute right-3 top-2.5">
                                <span class="bg-indigo-600 text-white text-[8px] font-black px-2 py-0.5 rounded uppercase tracking-tighter">Preview</span>
                            </div>
                        </div>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">This ID will be finalized upon registration</p>
                    </div>

                    <div class="space-y-2 md:col-span-2">
                        <label for="name" class="block text-sm font-medium text-slate-700">Doctor Name*</label>
                        <input id="name" name="name" type="text" required value="{{ old('name') }}"
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium placeholder:text-slate-400"
                            placeholder="e.g. Dr. Sarah Jenkins">
                    </div>

                    <div class="space-y-2">
                        <label for="photo" class="block text-sm font-medium text-slate-700">Photo Profile</label>
                        <input id="photo" name="photo" type="file" accept="image/*"
                            class="w-full px-4 py-1.5 border border-slate-200 rounded-lg text-sm text-slate-500 file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all">
                    </div>

                    <div class="space-y-2">
                        <label for="department_id" class="block text-sm font-medium text-slate-700">Select Department*</label>
                        <select id="department_id" name="department_id" required
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                            <option value="">Choose Department</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label for="phone" class="block text-sm font-medium text-slate-700">Phone Number</label>
                        <input id="phone" name="phone" type="text" value="{{ old('phone') }}"
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium placeholder:text-slate-400">
                    </div>

                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-medium text-slate-700">Email Address</label>
                        <input id="email" name="email" type="email" value="{{ old('email') }}"
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium placeholder:text-slate-400">
                    </div>

                    <div class="space-y-2">
                        <label for="joining_date" class="block text-sm font-medium text-slate-700">Joining Date</label>
                        <input id="joining_date" name="joining_date" type="date" value="{{ old('joining_date', date('Y-m-d')) }}"
                            class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium">
                    </div>

                    <div class="space-y-2 md:col-span-2" x-data="{ showPassword: false, autogenerate: true }">
                        <div class="flex items-center justify-between mb-1">
                            <label for="password" class="block text-sm font-medium text-slate-700">Account Password</label>
                            <label class="flex items-center gap-2 cursor-pointer group">
                                <input type="checkbox" x-model="autogenerate" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest group-hover:text-indigo-600 transition-colors">Autogenerate from Doctor ID</span>
                            </label>
                        </div>
                        <div class="relative">
                            <input :type="showPassword ? 'text' : 'password'" id="password" name="password" 
                                :value="autogenerate ? '{{ $doctorCodePreview }}' : ''"
                                :readonly="autogenerate"
                                :class="autogenerate ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-white text-slate-700'"
                                class="w-full px-4 py-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-mono tracking-widest text-sm"
                                placeholder="Enter custom password">
                            <button type="button" @click="showPassword = !showPassword" class="absolute right-3 top-3 text-slate-400 hover:text-indigo-600 transition-colors">
                                <svg x-show="!showPassword" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                                <svg x-show="showPassword" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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-7 1.274-4.057 5.064-7 9.542-7 1.274 0 2.454.31 3.492.86M15 12a3 3 0 11-6 0 3 3 0 016 0zm-9 6l12.728-12.728"/></svg>
                            </button>
                        </div>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1" x-show="autogenerate">Defaults to Doctor ID if left blank</p>
                    </div>
                </div>
            </div>

            <!-- Professional Details Card -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                    <h3 class="text-lg font-semibold text-slate-800">Professional Details</h3>
                    <p class="text-sm text-slate-500">Academic qualifications and clinical specialities.</p>
                </div>
                
                <div class="p-6 space-y-6">
                    <div class="space-y-2">
                        <label for="qualification_ids" class="block text-sm font-medium text-slate-700">Qualifications* (Multiple & Add New)</label>
                        <select id="qualification_ids" name="qualification_ids[]" multiple required class="tom-select-tagging">
                            @foreach($qualifications as $qual)
                                <option value="{{ $qual->id }}">{{ $qual->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label for="speciality_ids" class="block text-sm font-medium text-slate-700">Select Specialities</label>
                            <select id="speciality_ids" name="speciality_ids[]" multiple class="tom-select">
                                @foreach($specialities as $spec)
                                    <option value="{{ $spec->id }}">{{ $spec->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label for="designation_id" class="block text-sm font-medium text-slate-700">Designation*</label>
                            <select id="designation_id" name="designation_id" required
                                class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                                <option value="">Choose Designation</option>
                                @foreach($designations as $desig)
                                    <option value="{{ $desig->id }}" {{ old('designation_id') == $desig->id ? 'selected' : '' }}>{{ $desig->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-2 md:col-span-2">
                            <label for="total_experience" class="block text-sm font-medium text-slate-700">Total Experience (Years)*</label>
                            <input id="total_experience" name="total_experience" type="text" required value="{{ old('total_experience') }}"
                                class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium shadow-sm transition-all"
                                placeholder="e.g. 12 Years">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Experience History Card -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50 flex justify-between items-center">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-800">Experience History</h3>
                        <p class="text-sm text-slate-500">Previous hospital tenures.</p>
                    </div>
                    <button type="button" @click="addExperience" class="px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-xs font-semibold hover:bg-indigo-100 transition-colors">
                        Add Record
                    </button>
                </div>
                
                <div class="p-6 space-y-4">
                    <template x-for="(exp, index) in experiences" :key="index">
                        <div class="p-4 bg-slate-50 rounded-lg border border-slate-200 relative group animate-in fade-in duration-300">
                            <button type="button" @click="removeExperience(index)" class="absolute top-2 right-2 p-1 text-slate-400 hover:text-red-600 transition-colors">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Hospital Name*</label>
                                    <input :name="'experiences['+index+'][hospital_name]'" type="text" required
                                        class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-md focus:border-indigo-500 outline-none text-sm font-medium">
                                </div>

                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Address</label>
                                    <input :name="'experiences['+index+'][address]'" type="text"
                                        class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-md focus:border-indigo-500 outline-none text-sm font-medium">
                                </div>

                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Period</label>
                                    <div class="flex items-center gap-2">
                                        <input :name="'experiences['+index+'][from_period]'" type="text" placeholder="From" class="w-1/2 px-3 py-1.5 bg-white border border-slate-200 rounded-md text-sm font-medium">
                                        <input :name="'experiences['+index+'][to_period]'" type="text" placeholder="To" class="w-1/2 px-3 py-1.5 bg-white border border-slate-200 rounded-md text-sm font-medium">
                                    </div>
                                </div>

                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Reason</label>
                                    <input :name="'experiences['+index+'][reason_for_leaving]'" type="text"
                                        class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-md text-sm font-medium">
                                </div>

                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Salary Proof</label>
                                    <input :name="'experiences['+index+'][salary_proof]'" type="file"
                                        class="w-full px-3 py-1 bg-white border border-slate-200 rounded-md text-xs font-medium">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Awards & Accreditations Card -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden" x-show="true">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50 flex justify-between items-center">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-800">Awards & Accreditations</h3>
                        <p class="text-sm text-slate-500">Recognition and clinical certificates.</p>
                    </div>
                    <button type="button" @click="addAward" class="px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-xs font-semibold hover:bg-indigo-100 transition-colors">
                        Add Award
                    </button>
                </div>
                
                <div class="p-6 space-y-4">
                    <template x-for="(award, index) in awards" :key="index">
                        <div class="p-4 bg-slate-50 rounded-lg border border-slate-200 relative group animate-in fade-in duration-300">
                            <button type="button" @click="removeAward(index)" class="absolute top-2 right-2 p-1 text-slate-400 hover:text-red-600 transition-colors">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Award Name*</label>
                                    <input :name="'awards['+index+'][name]'" type="text" required
                                        class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-md focus:border-indigo-500 outline-none text-sm font-medium">
                                </div>

                                <div class="space-y-1">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Year*</label>
                                    <input :name="'awards['+index+'][year]'" type="text" required
                                        class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-md focus:border-indigo-500 outline-none text-sm font-medium"
                                        placeholder="e.g. 2023">
                                </div>

                                <div class="space-y-1 md:col-span-2">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Description</label>
                                    <textarea :name="'awards['+index+'][description]'" rows="2"
                                        class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-md text-sm font-medium"></textarea>
                                </div>

                                <div class="space-y-1 md:col-span-2">
                                    <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Images (Drag & Drop or Multi-select)</label>
                                    <input :name="'awards['+index+'][images][]'" type="file" multiple accept="image/*"
                                        class="w-full px-3 py-1 bg-white border border-slate-200 rounded-md text-xs font-medium file:mr-4 file:py-1 file:px-2 file:rounded-md file:border-0 file:text-[10px] file:font-bold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Biography Card -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                    <h3 class="text-lg font-semibold text-slate-800">Biography & Details</h3>
                    <p class="text-sm text-slate-500">Extended clinical information.</p>
                </div>
                
                <div class="p-6" x-ignore>
                    <input type="hidden" name="details" id="details-input">
                    <div id="editor-container" class="h-64 mb-4"></div>
                </div>
            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-100">
                <a href="{{ route('branch.doctors.index') }}" class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
                    Cancel
                </a>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors shadow-sm shadow-indigo-200">
                    Save Doctor Profile
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // TomSelect for Specialities
        document.querySelectorAll('.tom-select').forEach((el) => {
            new TomSelect(el, {
                plugins: ['remove_button'],
                persist: false,
                create: false,
            });
        });

        // TomSelect with Tagging for Qualifications
        document.querySelectorAll('.tom-select-tagging').forEach((el) => {
            new TomSelect(el, {
                plugins: ['remove_button'],
                persist: false,
                create: true,
                createOnBlur: true,
                createFilter: function(input) { return input.length >= 2; }
            });
        });

        // Quill Editor
        var quill = new Quill('#editor-container', {
            theme: 'snow',
            placeholder: 'Write doctor biography and extra clinical details here...',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    ['link', 'blockquote'],
                    [{ list: 'ordered' }, { list: 'bullet' }]
                ]
            }
        });

        quill.on('text-change', function() {
            document.getElementById('details-input').value = quill.root.innerHTML;
        });
    });

    function doctorForm() {
        return {
            experiences: [],
            awards: [],
            addExperience() {
                this.experiences.push({
                    hospital_name: '',
                    address: '',
                    from_period: '',
                    to_period: '',
                    reason_for_leaving: ''
                });
            },
            removeExperience(index) {
                this.experiences.splice(index, 1);
            },
            addAward() {
                this.awards.push({
                    name: '',
                    year: '',
                    description: '',
                    images: []
                });
            },
            removeAward(index) {
                this.awards.splice(index, 1);
            }
        }
    }
</script>
@endpush