@extends('eventmie::o_dashboard.index')
@php 
    $laser = Route::currentRouteName() == 'eventmie.scan_ticket_laser' ? true : false;
    $manual = request()->get('manual', false);
@endphp
{{-- Page title --}}
@section('title')
@if(!$manual)   
    {{ $laser ? __('eventmie-pro::em.auto_laser_ticket_scan') : __('eventmie-pro::em.auto_ticket_scan') }}
@else
    {{ $laser ? __('eventmie-pro::em.laser_ticket_scan') : __('eventmie-pro::em.ticket_scan') }}
@endif
@endsection
@section('o_dashboard')
<section>
    <div class="bg-light ticket-scanner-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 p-0">
                    <!-- Professional Header -->
                    <div class="bg-white shadow-sm border-bottom py-2 px-3 py-lg-3 px-lg-4 mt-0">
                        <div class="d-flex justify-content-between align-items-start align-items-md-center">
                            <!-- Left side - Brand and Title -->
                            <div class="d-flex align-items-center w-auto">
                                <a class="d-flex align-items-center text-decoration-none me-1 me-md-1" href="{{ route('eventmie.o_dashboard') }}">
                                    <img src="{{ getStorageImage(setting('site.logo')) }}" 
                                         class="me-2 me-md-3" 
                                         alt="{{ setting('site.site_name') }}" 
                                         style="height: 35px; width: auto; max-width: 80px;">
                                </a>
                                <div class="border-start ps-3 ps-md-4 flex-grow-1">
                                    <h5 class="fw-bold text-dark mb-1 fs-6">
                                        @if(!$manual)  
                                            {{ __('eventmie-pro::em.auto_ticket_scanner') }}
                                        @else
                                            {{ __('eventmie-pro::em.manual_ticket_scanner') }}
                                        @endif
                                    </h5>
                                    <p class="text-muted mb-0 small">
                                        <i class="fas fa-qrcode me-1"></i>
                                        {{ $laser ? __('eventmie-pro::em.laser_mode') : __('eventmie-pro::em.camera_mode') }}
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Right side - Toggle and Actions -->
                            <div class="d-flex align-items-center justify-content-end">
                                <!-- Manual Mode Toggle -->
                                <div class="form-check form-switch p-0">
                                    <label class="form-check-label fw-medium small d-block m-0" for="manualModeToggle">
                                        <i class="fas fa-hand-paper"></i>
                                        <span class="d-inline">{{ __('eventmie-pro::em.manual') }}</span>
                                    </label>
                                    <input class="form-check-input float-end" type="checkbox" id="manualModeToggle" {{ $manual ? 'checked' : '' }} onchange="toggleMode(this)">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Scanner Component -->
                    <div>
                        <ticket-scanner
                            :is_laser="{{ json_encode($laser, JSON_HEX_APOS) }}"
                            :is_manual="{{ json_encode($manual, JSON_HEX_APOS) }}"
                            :refresh_timer="{{ json_encode($extra['refresh_timer'], JSON_HEX_APOS) }}"
                            ref="scan"
                        ></ticket-scanner>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
</section>

<script>
function toggleMode(checkbox) {
    const currentUrl = new URL(window.location);
    if (checkbox.checked) {
        currentUrl.searchParams.set('manual', '1');
    } else {
        currentUrl.searchParams.delete('manual');
    }
    window.location.href = currentUrl.toString();
}
</script>
@endsection

@section('javascript')
@vite(['resources/js/vendor/eventmie-pro/ticket_scanner/index.js'])
@stop