@extends('layouts.branch')

@section('title', 'Add PRO')
@section('header', 'Register New Reference')

@section('content')
<div class="max-w-4xl mx-auto space-y-6 pb-20">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Branch Masters', 'url' => '#'],
            ['name' => 'PRO Master', 'url' => route('branch.pros.index')],
            ['name' => 'Add PRO', 'url' => route('branch.pros.create')]
        ]
    ])

    <form action="{{ route('branch.pros.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf

        <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden" x-data="photoBooth()">
            <div class="p-8 border-b border-slate-200 bg-slate-50/50">
                <div class="flex items-center gap-4">
                    <div class="h-12 w-12 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-indigo-100">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-slate-800 tracking-tight">Reference Identity</h2>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-0.5">Capture photo and basic contact details</p>
                    </div>
                </div>
            </div>

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

                    <div class="flex-1 space-y-4 text-center md:text-left">
                        <div class="flex flex-wrap gap-3 justify-center md:justify-start">
                            <label class="cursor-pointer bg-white px-5 py-2.5 border border-slate-200 rounded-xl text-[10px] font-black uppercase tracking-[0.1em] text-slate-600 hover:border-indigo-600 hover:text-indigo-600 transition-all shadow-sm">
                                <span>Upload File</span>
                                <input type="file" name="photo" class="hidden" @change="handleFileUpload($event)" accept="image/*">
                            </label>
                            <button type="button" x-show="streamActive" @click="capturePhoto()" class="bg-indigo-600 text-white px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-[0.1em] hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100">
                                Take Snapshot
                            </button>
                            <button type="button" x-show="photoPreview" @click="resetPhoto()" class="text-[10px] font-black uppercase tracking-[0.1em] text-rose-500 hover:text-rose-700 px-4">
                                Clear
                            </button>
                        </div>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Profile picture helps in quick identification</p>
                        <input type="hidden" name="captured_photo" :value="capturedPhoto">
                        <canvas x-ref="canvas" style="display:none;" width="640" height="480"></canvas>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label for="first_name" class="block text-xs font-black text-slate-500 uppercase tracking-widest ml-1">First Name <span class="text-rose-500">*</span></label>
                        <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}" required 
                            class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 focus:bg-white outline-none transition-all font-bold placeholder:text-slate-300" placeholder="Enter first name">
                        @error('first_name') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest ml-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="space-y-2">
                        <label for="last_name" class="block text-xs font-black text-slate-500 uppercase tracking-widest ml-1">Last Name</label>
                        <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}" 
                            class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 focus:bg-white outline-none transition-all font-bold placeholder:text-slate-300" placeholder="Enter last name">
                    </div>

                    <div class="space-y-2">
                        <label for="gender" class="block text-xs font-black text-slate-500 uppercase tracking-widest ml-1">Gender</label>
                        <select id="gender" name="gender" class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 focus:bg-white outline-none transition-all font-bold">
                            <option value="">Select Gender</option>
                            <option value="Male" {{ old('gender') === 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender') === 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender') === 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label for="mobile_number" class="block text-xs font-black text-slate-500 uppercase tracking-widest ml-1">Mobile Number <span class="text-rose-500">*</span></label>
                        <input type="text" id="mobile_number" name="mobile_number" value="{{ old('mobile_number') }}" required 
                            class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 focus:bg-white outline-none transition-all font-bold placeholder:text-slate-300 uppercase tracking-widest" placeholder="+91 00000 00000">
                        @error('mobile_number') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest ml-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="md:col-span-2 space-y-2">
                        <label for="address" class="block text-xs font-black text-slate-500 uppercase tracking-widest ml-1">Address Details</label>
                        <textarea id="address" name="address" rows="3" 
                            class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 focus:bg-white outline-none transition-all font-bold placeholder:text-slate-300" placeholder="Full address details...">{{ old('address') }}</textarea>
                    </div>

                    <div class="md:col-span-2 pt-6 border-t border-slate-50">
                        <label class="flex items-center gap-4 cursor-pointer group w-fit">
                            <div class="relative">
                                <input type="checkbox" name="status" value="1" checked class="peer sr-only">
                                <div class="w-14 h-7 bg-slate-200 rounded-full transition-all peer-checked:bg-indigo-600 after:absolute after:top-1 after:left-1 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-7 border-2 border-transparent"></div>
                            </div>
                            <div>
                                <p class="text-xs font-black text-slate-700 uppercase tracking-widest">Active Status</p>
                                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-0.5">Reference will be available for selection in the system</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <div class="p-8 bg-slate-50 border-t border-slate-200 flex items-center justify-end gap-4">
                <a href="{{ route('branch.pros.index') }}" class="px-8 py-4 text-xs font-black text-slate-400 uppercase tracking-widest hover:text-slate-600 transition-colors">Cancel</a>
                <button type="submit" class="px-10 py-4 bg-slate-900 text-white rounded-2xl text-xs font-black uppercase tracking-widest hover:bg-black transition-all shadow-xl shadow-slate-100">
                    Create PRO
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function photoBooth() {
        return {
            streamActive: false,
            photoPreview: null,
            capturedPhoto: '',
            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