@extends('layouts.branch')

@section('title', 'Print & Paper Settings')
@section('header', 'Print & Paper Settings')

@section('content')
<div class="space-y-6" x-data="{ 
    printerType: '{{ $settings->printer_type }}',
    paperSize: '{{ $settings->paper_size }}',
    showHeader: {{ $settings->show_header ? 'true' : 'false' }},
    showFooter: {{ $settings->show_footer ? 'true' : 'false' }}
}">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Operational Settings', 'url' => route('branch.settings.clinical')],
            ['name' => 'Print & Paper Layout', 'url' => '#']
        ]
    ])

    @if(session('status'))
        <div class="bg-emerald-50 border border-emerald-100 text-emerald-600 px-6 py-4 rounded-3xl font-black uppercase tracking-widest text-[10px] flex items-center gap-3 italic">
            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ session('status') }}
        </div>
    @endif

    <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden italic">
        <div class="p-10 border-b border-slate-50 flex items-center justify-between bg-slate-50/30">
            <div class="flex items-center gap-4">
                <div class="h-12 w-12 bg-slate-900 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-slate-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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                </div>
                <div>
                    <h3 class="text-xl font-black text-slate-800 uppercase tracking-tighter leading-none">Hardware Configuration</h3>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-1">Adjust receipt layouts for Thermal or Laser printers</p>
                </div>
            </div>
        </div>

        <form action="{{ route('branch.settings.print.update') }}" method="POST" class="p-10 space-y-10">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Left: Hardware Selection -->
                <div class="space-y-8">
                    <div class="space-y-4">
                        <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest px-1">Printer Technology</label>
                        <div class="grid grid-cols-3 gap-4">
                            <button type="button" @click="printerType = 'standard'; paperSize = 'a5'" 
                                    :class="printerType === 'standard' ? 'border-indigo-600 bg-indigo-50 text-indigo-700 ring-4 ring-indigo-50' : 'border-slate-100 bg-white text-slate-400 opacity-60 hover:opacity-100'"
                                    class="p-6 border-2 rounded-3xl text-center transition-all group">
                                <svg class="h-8 w-8 mx-auto mb-3" 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>
                                <span class="text-[10px] font-black uppercase tracking-widest">Laser / Inkjet</span>
                                <input type="radio" name="printer_type" value="standard" x-model="printerType" class="hidden">
                            </button>

                            <button type="button" @click="printerType = 'thermal'; paperSize = 'roll80'" 
                                    :class="printerType === 'thermal' ? 'border-indigo-600 bg-indigo-50 text-indigo-700 ring-4 ring-indigo-50' : 'border-slate-100 bg-white text-slate-400 opacity-60 hover:opacity-100'"
                                    class="p-6 border-2 rounded-3xl text-center transition-all group">
                                <svg class="h-8 w-8 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
                                <span class="text-[10px] font-black uppercase tracking-widest">POS Thermal</span>
                                <input type="radio" name="printer_type" value="thermal" x-model="printerType" class="hidden">
                            </button>

                            <button type="button" @click="printerType = 'custom'" 
                                    :class="printerType === 'custom' ? 'border-amber-600 bg-amber-50 text-amber-700 ring-4 ring-amber-50' : 'border-slate-100 bg-white text-slate-400 opacity-60 hover:opacity-100'"
                                    class="p-6 border-2 rounded-3xl text-center transition-all group">
                                <svg class="h-8 w-8 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>
                                <span class="text-[10px] font-black uppercase tracking-widest">Custom Size</span>
                                <input type="radio" name="printer_type" value="custom" x-model="printerType" class="hidden">
                            </button>
                        </div>
                    </div>

                    <!-- Paper Size for Standard -->
                    <div x-show="printerType === 'standard'" x-transition class="space-y-4">
                        <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest px-1">Paper Dimensions</label>
                        <select x-model="paperSize" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-black focus:ring-2 focus:ring-indigo-500 outline-none uppercase tracking-widest">
                            <option value="a4">A4 (Standard Office)</option>
                            <option value="a5">A5 (Hospital Prescription / Half A4)</option>
                        </select>
                    </div>

                    <!-- Thermal Options -->
                    <div x-show="printerType === 'thermal'" x-transition class="space-y-4">
                        <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest px-1">Roll Width</label>
                        <div class="flex gap-4">
                            <label class="flex-1 cursor-pointer">
                                <input type="radio" value="roll80" x-model="paperSize" class="hidden">
                                <div :class="paperSize === 'roll80' ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-50 text-slate-400'" class="py-4 text-center rounded-2xl font-black uppercase tracking-widest text-[10px] transition-all">80mm (Standard POS)</div>
                            </label>
                            <label class="flex-1 cursor-pointer">
                                <input type="radio" value="roll58" x-model="paperSize" class="hidden">
                                <div :class="paperSize === 'roll58' ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-50 text-slate-400'" class="py-4 text-center rounded-2xl font-black uppercase tracking-widest text-[10px] transition-all">58mm (Small Thermal)</div>
                            </label>
                        </div>
                    </div>

                    <!-- Single Hidden Source of Truth for Paper Size -->
                    <input type="hidden" name="paper_size" :value="paperSize">

                    <!-- Custom Dimensions -->
                    <div x-show="printerType === 'custom'" x-transition class="grid grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest px-1">Width (mm)</label>
                            <input type="number" name="custom_width" value="{{ $settings->custom_width }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-black focus:ring-2 focus:ring-indigo-500 outline-none">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest px-1">Height (mm)</label>
                            <input type="number" name="custom_height" value="{{ $settings->custom_height }}" class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-black focus:ring-2 focus:ring-indigo-500 outline-none">
                        </div>
                    </div>

                    <hr class="border-slate-50">

                    <!-- Content Layout Controls -->
                    <div class="space-y-6">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="h-8 w-8 bg-indigo-50 text-indigo-600 rounded-lg flex items-center justify-center">
                                <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="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
                            </div>
                            <h4 class="text-[11px] font-black text-slate-800 uppercase tracking-widest">Content Toggles</h4>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <label class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100 cursor-pointer transition-all hover:bg-slate-100">
                                <span class="text-[10px] font-black text-slate-600 uppercase italic">Official Header</span>
                                <div class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="show_header" value="1" x-model="showHeader" class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </div>
                            </label>

                            <label class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100 cursor-pointer transition-all hover:bg-slate-100">
                                <span class="text-[10px] font-black text-slate-600 uppercase italic">Official Footer</span>
                                <div class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="show_footer" value="1" x-model="showFooter" class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </div>
                            </label>
                        </div>
                    </div>

                    <hr class="border-slate-50">

                    <!-- Validity Settings -->
                    <div class="space-y-4">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="h-8 w-8 bg-rose-50 text-rose-600 rounded-lg flex items-center justify-center">
                                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            </div>
                            <h4 class="text-[11px] font-black text-slate-800 uppercase tracking-widest">Clinical Policy</h4>
                        </div>
                        <div class="space-y-2">
                            <label class="text-[11px] font-black text-slate-400 uppercase tracking-widest px-1">OPD Slip Validity (Days)</label>
                            <div class="relative">
                                <input type="number" name="opd_validity_days" value="{{ $settings->opd_validity_days }}" 
                                       class="w-full pl-6 pr-24 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-black focus:ring-2 focus:ring-indigo-500 outline-none">
                                <div class="absolute right-4 top-4 text-[10px] font-black text-slate-300 uppercase tracking-widest">Days</div>
                            </div>
                            <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-2">Days the consultation slip remains valid for a free revisit</p>
                        </div>
                    </div>
                </div>

                <!-- Right: Visual Preview -->
                <div class="bg-slate-50 rounded-[3rem] p-10 flex flex-col items-center justify-center space-y-8 relative overflow-hidden min-h-[500px]">
                    <div class="absolute inset-0 opacity-[0.03] select-none pointer-events-none flex items-center justify-center">
                        <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
                    </div>

                    <p class="text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] mb-4">Paper Profile Preview</p>
                    
                    <!-- Paper Mockup -->
                    <div :class="{
                        'w-[180px] h-[254px]': paperSize === 'a4' && printerType === 'standard',
                        'w-[254px] h-[180px]': paperSize === 'a5' && printerType === 'standard',
                        'w-[120px] h-[300px] rounded-t-lg': paperSize === 'roll80' && printerType === 'thermal',
                        'w-[87px] h-[300px] rounded-t-lg': paperSize === 'roll58' && printerType === 'thermal',
                        'w-[200px] h-[200px]': printerType === 'custom'
                    }" class="bg-white shadow-2xl transition-all duration-500 border border-slate-200 relative flex flex-col items-center p-4">
                        <div class="w-1/2 h-2 bg-slate-100 rounded-full mb-4"></div>
                        <div class="w-full bg-slate-50 p-2 space-y-2 mt-4">
                            <div class="w-3/4 h-1 bg-slate-200 rounded"></div>
                            <div class="w-full h-1 bg-slate-200 rounded"></div>
                            <div class="w-1/2 h-1 bg-slate-200 rounded"></div>
                        </div>
                        <div x-show="printerType === 'thermal'" class="absolute -bottom-4 left-0 right-0 h-4 bg-gradient-to-t from-slate-50 to-white" 
                             style="background-image: radial-gradient(circle at 10px 0px, transparent 10px, white 10px); background-size: 20px 20px;"></div>
                        
                        <div class="absolute -top-12 left-0 right-0 text-center">
                             <span class="text-[8px] font-bold text-slate-400 italic uppercase" x-text="paperSize.toUpperCase() + (printerType === 'thermal' ? ' ROLL' : '')"></span>
                        </div>
                    </div>

                    <div class="mt-8 text-center space-y-1">
                        <p class="text-[10px] font-black text-slate-800 uppercase" x-text="printerType === 'thermal' ? 'Continuous Roll' : 'Fixed Sheet'"></p>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest italic" x-text="paperSize === 'a5' ? 'Landscape Optimization Included' : 'Portrait Stacking Mode'"></p>
                    </div>
                </div>
            </div>

            <div class="pt-10 border-t border-slate-50 flex justify-end gap-4 items-center">
                <div class="flex flex-col text-right mr-4 opacity-60 italic">
                    <span class="text-[9px] font-black uppercase text-indigo-600 tracking-widest">Global Sync Active</span>
                    <span class="text-[8px] font-bold text-slate-400 uppercase">Updates documentation across all hubs</span>
                </div>
                <a href="{{ route('branch.settings.clinical') }}" class="px-8 py-4 text-slate-400 font-black uppercase tracking-widest text-[10px] hover:text-slate-600 transition-colors">Discard</a>
                <button type="submit" class="px-10 py-4 bg-slate-900 text-white rounded-3xl font-black uppercase tracking-widest text-[10px] hover:bg-indigo-600 transition-all shadow-xl shadow-slate-200">Set as Official Default</button>
            </div>
        </form>
    </div>
</div>
@endsection