@extends('layouts.branch')

@section('title', 'Stationary Hub')
@section('header', 'Stationary Hub')

@section('content')
<div class="space-y-8" 
     x-data="{ 
        paper_size: '{{ $printSettings->paper_size ?? 'a4' }}',
        show_header: {{ ($printSettings->show_header ?? true) ? 'true' : 'false' }},
        show_footer: {{ ($printSettings->show_footer ?? true) ? 'true' : 'false' }},
        getBaseUrl(route) {
            let url = new URL(route);
            url.searchParams.set('paper_size', this.paper_size);
            url.searchParams.set('show_header', this.show_header ? '1' : '0');
            url.searchParams.set('show_footer', this.show_footer ? '1' : '0');
            return url.toString();
        }
     }">
    
    <!-- Top Configuration Bar -->
    <div class="bg-white border border-slate-100 rounded-[3rem] p-6 shadow-xl shadow-slate-200/50 flex flex-wrap items-center justify-between gap-6 italic">
        <div class="flex items-center gap-6">
            <div class="h-14 w-14 bg-slate-900 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-slate-200">
                <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
            </div>
            <div>
                <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Session Print Config</h4>
                <p class="text-[12px] font-black text-slate-800 uppercase italic">Configure your current document format</p>
            </div>
        </div>

        <div class="flex items-center gap-4 flex-wrap">
            <!-- Paper Size Selection -->
            <div class="flex bg-slate-50 p-1.5 rounded-2xl border border-slate-100">
                @foreach(['a4' => 'A4 Sheet', 'a5' => 'A5 Half', 'roll80' => '80mm Roll', 'roll58' => '58mm Roll'] as $value => $label)
                    <button type="button" 
                            @click="paper_size = '{{ $value }}'"
                            :class="paper_size === '{{ $value }}' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-400 opacity-60 hover:opacity-100'"
                            class="px-5 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            <!-- Header/Footer Toggles -->
            <div class="flex gap-4">
                <button type="button" 
                        @click="show_header = !show_header"
                        :class="show_header ? 'bg-indigo-50 text-indigo-700 border-indigo-100' : 'bg-slate-50 text-slate-400 border-slate-100'"
                        class="px-6 py-4 border rounded-2xl flex items-center gap-3 transition-all group">
                    <div :class="show_header ? 'bg-indigo-600' : 'bg-slate-300'" class="h-2 w-2 rounded-full shadow-sm animate-pulse"></div>
                    <span class="text-[10px] font-black uppercase tracking-widest">Show Header</span>
                </button>

                <button type="button" 
                        @click="show_footer = !show_footer"
                        :class="show_footer ? 'bg-indigo-50 text-indigo-700 border-indigo-100' : 'bg-slate-50 text-slate-400 border-slate-100'"
                        class="px-6 py-4 border rounded-2xl flex items-center gap-3 transition-all group">
                    <div :class="show_footer ? 'bg-indigo-600' : 'bg-slate-300'" class="h-2 w-2 rounded-full shadow-sm animate-pulse"></div>
                    <span class="text-[10px] font-black uppercase tracking-widest">Show Footer</span>
                </button>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        @php
            $items = [
                [
                    'id' => 'letter-head',
                    'title' => 'Letter Head',
                    'desc' => 'Blank branded header for official hospital correspondence',
                    'icon' => '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',
                    'url' => route('branch.stationary.letter-head'),
                    'tag' => 'Official'
                ],
                [
                    'id' => 'opd-slip',
                    'title' => 'Blank OPD Slip',
                    'desc' => 'Medical format with vitals grid for manual consultations',
                    'icon' => 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z',
                    'url' => route('branch.stationary.opd-slip'),
                    'tag' => 'Clinical'
                ],
                [
                    'id' => 'no-dues',
                    'title' => 'No Dues Slip',
                    'desc' => 'Departmental clearance format for patient discharge',
                    'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4',
                    'url' => route('branch.stationary.no-dues'),
                    'tag' => 'Administrative'
                ]
            ];
        @endphp

        @foreach($items as $item)
            <div class="group bg-white border border-slate-100 rounded-[3rem] p-10 hover:shadow-2xl hover:shadow-indigo-100 transition-all duration-500 overflow-hidden relative">
                <div class="relative z-10 flex flex-col h-full">
                    <div class="mb-8 flex items-center justify-between font-black uppercase tracking-widest text-[9px]">
                        <div class="h-16 w-16 {{ $loop->index % 3 == 0 ? 'bg-indigo-50 text-indigo-600' : ($loop->index % 3 == 1 ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600') }} rounded-[2rem] flex items-center justify-center transition-transform group-hover:scale-110 group-hover:rotate-3">
                            <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="{{ $item['icon'] }}"/></svg>
                        </div>
                        <span class="px-4 py-1.5 rounded-full bg-slate-900 text-white italic transition-all group-hover:bg-indigo-600">{{ $item['tag'] }}</span>
                    </div>

                    <h3 class="text-xl font-black text-slate-800 uppercase tracking-tighter italic mb-4">{{ $item['title'] }}</h3>
                    <p class="text-[11px] text-slate-400 font-bold uppercase tracking-widest leading-relaxed italic mb-10">{{ $item['desc'] }}</p>

                    <div class="mt-auto">
                        <a :href="getBaseUrl('{{ $item['url'] }}')" target="_blank" class="w-full inline-flex items-center justify-center gap-3 px-8 py-5 bg-slate-50 border border-slate-100 text-slate-600 rounded-3xl font-black uppercase tracking-widest text-[10px] italic hover:bg-slate-900 hover:text-white hover:border-slate-900 transition-all active:scale-95 duration-200">
                            Launch Dynamic Print
                            <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.5" 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>
                        </a>
                    </div>
                </div>

                <!-- Decoration -->
                <div class="absolute -bottom-10 -right-10 opacity-0 group-hover:opacity-[0.03] transition-opacity duration-1000 rotate-12">
                    <svg class="h-64 w-64" fill="currentColor" viewBox="0 0 24 24"><path d="{{ $item['icon'] }}"/></svg>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection