@extends('examples.modern-layout-v2')
@section('title', __('messages.printer_settings.printer_preview'))
@section('printer-settings', 'bg-blue-50 text-blue-700')

@section('content')
<div>
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.printer_settings.printer_preview')}}</h2>
                <p class="text-gray-600">{{__('messages.printer_settings.printer_preview')}}</p>
            </div>
            <div class="flex items-center gap-4">
                <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('printer.settings') }}" class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 font-semibold rounded-xl hover:bg-gray-200 transition-all duration-300">
                    <span class="material-icons mr-2">arrow_back</span>
                    {{__('messages.printer_settings.back_to_settings')}}
                </a>
                <button onclick="window.print()" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl">
                    <span class="material-icons mr-2">print</span>
                    {{__('messages.printer_settings.test_print')}}
                </button>
            </div>
        </div>
    </div>

    <!-- Preview Container -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 p-8">
        <div class="flex justify-center">
            <div id="printarea" style="width: 3inch; max-width: 288px; margin: 0 auto; padding: 20px; background: white; border: 2px dashed #e5e7eb;">
                @php
                    $settings = \App\Models\Setting::first();
                    $titleFontSize = $settings->printer_title_font_size ?? 16;
                    $subtitleFontSize = $settings->printer_subtitle_font_size ?? 16;
                    $tokenFontSize = $settings->printer_token_font_size ?? 32;
                    $serviceFontSize = $settings->printer_service_font_size ?? 16;
                    $locationFontSize = $settings->printer_location_font_size ?? 16;
                    $dateFontSize = $settings->printer_date_font_size ?? 18;
                    $waitMessageFontSize = $settings->printer_wait_message_font_size ?? 16;
                    $websiteFontSize = $settings->printer_website_font_size ?? 12;
                    $footerFontSize = $settings->printer_footer_font_size ?? 10;
                    
                    $subtitle = $settings->printer_subtitle ?? '';
                    $waitMessageAr = $settings->printer_wait_message_ar ?? __('messages.issue_token.please wait for your turn');
                    $waitMessageKu = $settings->printer_wait_message_ku ?? __('messages.issue_token.please wait for your turn');
                    $websiteUrl = $settings->printer_website_url ?? '';
                    $poweredBy = $settings->printer_powered_by_text ?? 'Powered by';
                    $qrCodeImage = $settings->printer_qr_code_image ?? 'qr-code.png';
                @endphp

                <!-- Title -->
                <p style="font-size: {{$titleFontSize}}px; font-weight: bold; margin: 5px 0; text-align: center;">{{ $settings->name ?? 'Company Name' }}</p>
                
                <!-- Subtitle -->
                @if($subtitle)
                <p style="font-size: {{$subtitleFontSize}}px; font-weight: bold; margin: 5px 0; text-align: center;">{{ $subtitle }}</p>
                @endif
                
                <br>
                
                <!-- Service Name -->
                <p style="font-size: {{$serviceFontSize}}px; margin: 5px 0; text-align: center;">Sample Service</p>
                
                <br>
                
                <!-- Token Number -->
                <h3 style="font-size: {{$tokenFontSize}}px; font-weight: bold; margin: 10px 0; text-align: center;">A - 001</h3>
                
                <!-- Location (if available) -->
                <p style="font-size: {{$locationFontSize}}px; margin: 5px 0; text-align: center; direction: ltr;">Sample Location - موقع تجريبي</p>
                
                <br>
                
                <!-- Date -->
                <p style="font-size: {{$dateFontSize}}px; margin: 5px 0; text-align: center; direction: ltr;">{{ now()->format('Y-m-d H:i') }}</p>
                
                <br>
                
                <!-- Wait Messages -->
                <p style="font-size: {{$waitMessageFontSize}}px; margin: 5px 0; padding-top: 20px; text-align: center;">{{ $waitMessageAr }}</p>
                <br>
                @if($waitMessageKu)
                <p style="font-size: {{$waitMessageFontSize}}px; margin-top: 10px; text-align: center;">{{ $waitMessageKu }}</p>
                <br>
                @endif
                
                <!-- Website URL -->
                @if($websiteUrl)
                <p style="font-size: {{$websiteFontSize}}px; margin: 3px 0; text-align: center;">{{ $websiteUrl }}</p>
                <br>
                @endif
                
                <!-- Powered By and QR Code -->
                <div style="display: flex; align-items: center; justify-content: center; gap: 10px; margin: 5px 0; direction: ltr; text-align: left;">
                    <span style="font-size: {{$footerFontSize}}px;">{{ $poweredBy }}</span>
                    @if(file_exists(public_path($qrCodeImage)))
                    <img src="{{ asset($qrCodeImage) }}" alt="QR Code" style="width: 50px; height: 50px; max-width: 50px; max-height: 50px;">
                    @else
                    <div style="width: 50px; height: 50px; background: #f3f4f6; border: 1px dashed #d1d5db; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #9ca3af;">QR</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    header, aside, footer, .no-print, #success-notification, #error-notification, #modal1, main, nav, button, a {
        display: none !important;
    }
    * {
        margin: 0 !important;
        padding: 0 !important;
    }
    #printarea {
        width: 3inch !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: white !important;
    }
    body, html {
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    #printarea * {
        page-break-inside: avoid !important;
    }
    #printarea {
        padding-bottom: 150px !important;
    }
    #printarea br {
        display: block !important;
        margin: 3px 0 !important;
        line-height: 1.2 !important;
    }
    @page {
        margin: 0;
        size: auto;
    }
    #cut-marker {
        display: block !important;
        height: 300px;
        border-bottom: 2px dashed #000;
        page-break-after: always;
    }
    #cut-command {
        display: block !important;
        height: 0;
        overflow: hidden;
    }
}
</style>
@endsection