@extends('layouts.branch')

@section('title', 'Edit Profile')
@section('header', 'Medical Record Update')

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Registration Directory', 'url' => route('branch.patients.index')],
            ['name' => 'Update Profile', 'url' => route('branch.patients.edit', $patient->id)]
        ]
    ])

    <div class="max-w-5xl mx-auto">
        <form action="{{ route('branch.patients.update', $patient->id) }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden text-inherit">
            @csrf
            @method('PUT')
            <div class="p-10">
                <div class="flex items-center gap-5 mb-10 pb-10 border-b border-slate-50">
                    <div class="h-16 w-16 rounded-[24px] bg-slate-900 flex items-center justify-center text-white shadow-2xl shadow-slate-200">
                        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-black text-slate-800 tracking-tighter uppercase leading-none italic">Profile Management</h3>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">Modify existing clinical identity record</p>
                    </div>
                </div>

                <!-- Photo Booth Section -->
                <div class="mb-12 p-8 bg-slate-50 rounded-[32px] border border-slate-100" x-data="photoBooth()">
                    <div class="flex flex-col md:flex-row gap-8 items-center">
                        <div class="relative group">
                            <div class="h-48 w-48 rounded-[2rem] bg-indigo-100 overflow-hidden border-4 border-white shadow-2xl shadow-indigo-200/50 flex items-center justify-center">
                                <template x-if="!photoPreview && !initialPhoto">
                                    <svg class="h-20 w-20 text-indigo-300" 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>
                                </template>
                                <img x-show="photoPreview || initialPhoto" :src="photoPreview || initialPhoto" class="h-full w-full object-cover">
                                
                                <div x-show="streamActive" class="absolute inset-0 z-10">
                                    <video x-ref="video" autoplay playsinline class="h-full w-full object-cover"></video>
                                </div>
                            </div>
                            
                            <button type="button" @click="toggleCamera()" class="absolute -bottom-3 -right-3 h-12 w-12 bg-slate-900 border-4 border-white text-white rounded-2xl flex items-center justify-center hover:bg-indigo-600 transition-all shadow-xl group/btn">
                                <svg x-show="!streamActive" 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="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>
                                <svg x-show="streamActive" 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="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <div class="flex-1 space-y-4">
                            <div>
                                <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight">Identity Update</h4>
                                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Update profile photography for verification</p>
                            </div>
                            
                            <div class="flex flex-wrap gap-4">
                                <label class="cursor-pointer bg-white px-6 py-3 border border-slate-200 rounded-2xl text-[10px] font-black uppercase tracking-widest text-slate-600 hover:border-indigo-600 hover:text-indigo-600 transition-all shadow-sm">
                                    <span>Upload New Photo</span>
                                    <input type="file" name="photo" class="hidden" @change="handleFileUpload($event)">
                                </label>
                                
                                <button type="button" x-show="streamActive" @click="capturePhoto()" class="bg-indigo-600 text-white px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 transition-all shadow-xl shadow-indigo-100">
                                    Freeze Snapshot
                                </button>
                                
                                <button type="button" x-show="photoPreview" @click="resetPhoto()" class="text-[10px] font-black uppercase tracking-widest text-red-500 hover:text-red-700">
                                    Discard Change
                                </button>
                            </div>

                            <input type="hidden" name="captured_photo" :value="capturedPhoto">
                            <canvas x-ref="canvas" style="display:none;" width="640" height="480"></canvas>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                    <!-- Primary Identity -->
                    <div class="md:col-span-1 space-y-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Patient UHID <span class="text-rose-400">(Locked System ID)</span></label>
                            <input type="text" name="uhid" value="{{ old('uhid', $patient->uhid) }}" readonly
                                class="w-full px-6 py-4 bg-rose-50 border border-rose-200 rounded-2xl focus:ring-4 focus:ring-slate-500/10 focus:border-slate-300 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-rose-600 shadow-sm cursor-not-allowed">
                            @error('uhid') <p class="text-[10px] text-red-500 font-bold ml-1 mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Full Identity Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $patient->name) }}" required
                                class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">
                        </div>

                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">S/o or Spouse Name</label>
                            <input type="text" name="spouse_name" value="{{ old('spouse_name', $patient->spouse_name) }}"
                                class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">
                        </div>
                    </div>

                    <!-- Profile Details -->
                    <div class="md:col-span-2 grid grid-cols-2 gap-8">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Gender <span class="text-red-500">*</span></label>
                            <select name="gender" required class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all font-black text-[10px] uppercase tracking-widest text-slate-700 appearance-none shadow-sm">
                                <option value="Male" {{ old('gender', $patient->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender', $patient->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ old('gender', $patient->gender) == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Age</label>
                            <input type="text" name="age" value="{{ old('age', $patient->age) }}"
                                class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">
                        </div>

                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Contact Number</label>
                            <input type="text" name="contact_number" value="{{ old('contact_number', $patient->contact_number) }}"
                                class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">
                        </div>

                        <div class="space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">File Number</label>
                            <input type="text" name="file_number" value="{{ old('file_number', $patient->file_number) }}"
                                class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">
                        </div>

                        <div class="col-span-2 space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Full Residential Address</label>
                            <textarea name="address" rows="3" class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">{{ old('address', $patient->address) }}</textarea>
                        </div>

                        <div class="col-span-2 space-y-2">
                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 ml-1">Additional Details / History</label>
                            <textarea name="additional_details" rows="2" class="w-full px-6 py-4 bg-white border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700 shadow-sm">{{ old('additional_details', $patient->additional_details) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-10 bg-slate-50 flex items-center justify-end gap-6 italic">
                <a href="{{ route('branch.patients.index') }}" class="text-[10px] font-black text-slate-400 uppercase tracking-widest hover:text-slate-900 transition-colors">Discard Update</a>
                <button type="submit" class="px-12 py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-[11px] hover:bg-white hover:text-indigo-600 border border-indigo-600 shadow-2xl shadow-indigo-500/20 transition-all font-inherit">
                    Synchronize Profile
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function photoBooth() {
        return {
            streamActive: false,
            photoPreview: null,
            capturedPhoto: '',
            initialPhoto: '{{ $patient->photo_url }}',
            stream: null,

            async toggleCamera() {
                if (this.streamActive) {
                    this.stopCamera();
                } else {
                    try {
                        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
                        this.$refs.video.srcObject = this.stream;
                        this.streamActive = true;
                    } catch (err) {
                        alert('Could not access camera: ' + err.message);
                    }
                }
            },

            stopCamera() {
                if (this.stream) {
                    this.stream.getTracks().forEach(track => track.stop());
                }
                this.streamActive = false;
            },

            capturePhoto() {
                const video = this.$refs.video;
                const canvas = this.$refs.canvas;
                const context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                
                this.photoPreview = canvas.toDataURL('image/jpeg');
                this.capturedPhoto = this.photoPreview;
                this.stopCamera();
            },

            handleFileUpload(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.photoPreview = e.target.result;
                    this.capturedPhoto = '';
                };
                reader.readAsDataURL(file);
                if (this.streamActive) this.stopCamera();
            },

            resetPhoto() {
                this.photoPreview = null;
                this.capturedPhoto = '';
                if (this.streamActive) this.stopCamera();
            }
        }
    }
</script>
@endpush