<?php
declare(strict_types=1);

require_once __DIR__ . '/../includes/layout.php';
require_once __DIR__ . '/../config/open_bill_helpers.php';

if (!can_access_open_bill($conn)) {
    redirect_with_flash(
        auth_page_path(auth_preferred_landing_page($conn)),
        'error',
        localized_flash_message(
            'คุณไม่มีสิทธิ์ใช้งานหน้านี้',
            'You do not have permission to access this page.'
        )
    );
}

ensure_customer_group_column($conn);
ensure_car_profile_columns($conn);

function open_bill_result_url(string $searchQuery, int $customerId, int $carId): string
{
    return 'open_bill.php?' . http_build_query(array(
        'search' => '1',
        'q' => $searchQuery,
        'customer_id' => $customerId,
        'car_id' => $carId,
    ));
}

$oldInput = pull_old_input();
$searchRequested = (string) ($_GET['search'] ?? '') === '1';
$newRequested = (string) ($_GET['new'] ?? '') === '1';
$searchQuery = trim((string) ($_GET['q'] ?? old_value($oldInput, 'lookup_query')));
$selectedCustomerId = (int) (filter_input(INPUT_GET, 'customer_id', FILTER_VALIDATE_INT) ?: 0);
$selectedCarId = (int) (filter_input(INPUT_GET, 'car_id', FILTER_VALIDATE_INT) ?: 0);
$searchMessage = '';
$searchState = '';
$matches = array();

if ($searchRequested) {
    if ($searchQuery === '') {
        $searchMessage = ui_text(
            'กรุณากรอกเบอร์โทรหรือทะเบียนรถเพื่อค้นหา',
            'Enter a phone number or plate number to search.'
        );
        $searchState = 'warning';
    } else {
        try {
            $matches = find_customer_matches($conn, $searchQuery, $searchQuery, 12);

            if (empty($matches)) {
                $searchMessage = ui_text(
                    'ไม่พบลูกค้าที่ตรงกับข้อมูลที่ค้นหา กรุณาลงทะเบียนลูกค้าใหม่เพื่อทำรายการต่อ',
                    'No matching customer was found. Register a new customer to continue.'
                );
                $searchState = 'warning';
                $newRequested = true;
            } elseif (count($matches) === 1 && ($selectedCustomerId <= 0 || $selectedCarId <= 0)) {
                $selectedCustomerId = (int) ($matches[0]['customerId'] ?? 0);
                $selectedCarId = (int) ($matches[0]['carId'] ?? 0);
                $searchMessage = ui_text('โหลดข้อมูลลูกค้าเรียบร้อยแล้ว', 'Customer data loaded.');
                $searchState = 'success';
            } elseif (count($matches) > 1) {
                $searchMessage = strtr(
                    ui_text(
                        'พบข้อมูล {count} รายการ กรุณาเลือกรายการที่ถูกต้อง',
                        'Found {count} matches. Choose the correct record.'
                    ),
                    array('{count}' => (string) count($matches))
                );
                $searchState = 'success';
            } else {
                $searchMessage = ui_text('โหลดข้อมูลลูกค้าเรียบร้อยแล้ว', 'Customer data loaded.');
                $searchState = 'success';
            }
        } catch (Throwable $exception) {
            $searchMessage = ui_text('ค้นหาลูกค้าไม่สำเร็จ', 'Customer lookup failed.');
            $searchState = 'error';
        }
    }
}

$selectedContext = null;
if ($selectedCustomerId > 0 && $selectedCarId > 0) {
    $selectedContext = open_bill_view_selected_context($conn, $selectedCustomerId, $selectedCarId);

    if (!$selectedContext) {
        $searchMessage = ui_text(
            'ไม่พบข้อมูลลูกค้าที่เลือก หรือคุณไม่มีสิทธิ์เข้าถึงข้อมูลนี้',
            'The selected customer record was not found or is not accessible.'
        );
        $searchState = 'error';
    } elseif ($searchMessage === '') {
        $searchMessage = ui_text(
            'ข้อมูลลูกค้าพร้อมใช้งาน',
            'Customer data is ready.'
        );
        $searchState = 'success';
    }
}

$showNewCustomerForm = $newRequested || !empty($oldInput);
$draftLookupQuery = old_value($oldInput, 'lookup_query', $searchQuery);
$draftCustomerName = old_value($oldInput, 'customer_name');
$draftPhone = old_value($oldInput, 'phone');
$draftPlateNumber = old_value($oldInput, 'plate_number');
$draftProvince = old_value($oldInput, 'province', 'Bangkok');
$draftBrand = old_value($oldInput, 'brand');
$draftModel = old_value($oldInput, 'model');
$draftColor = old_value($oldInput, 'color');

if ($showNewCustomerForm && $draftPhone === '' && $draftPlateNumber === '') {
    if (normalize_phone($draftLookupQuery) !== '') {
        $draftPhone = $draftLookupQuery;
    } elseif (normalize_plate($draftLookupQuery) !== '') {
        $draftPlateNumber = normalize_plate($draftLookupQuery);
    }
}

$provinceOptions = vehicle_province_options($draftProvince);
$pageTitle = ui_text('Open Bill', 'Open Bill');
$searchFieldLabel = ui_text('ค้นหาด้วยเบอร์โทรหรือทะเบียนรถ', 'Search by phone or plate');
$searchLabel = ui_text('ค้นหา', 'Search');
$newCustomerLabel = ui_text('ลงทะเบียนลูกค้าใหม่', 'New customer');
$resetLabel = ui_text('รีเซ็ต', 'Reset');
$dashboardLabel = ui_text('กลับแดชบอร์ด', 'Back to dashboard');

$openBillLiveSearchText = array(
    'saving' => ui_text('กำลังบันทึกลูกค้าและรถ...', 'Saving customer and vehicle...'),
    'emptyQuery' => ui_text('กรุณากรอกเบอร์โทรหรือทะเบียนรถเพื่อค้นหา', 'Enter a phone number or plate number to search.'),
    'searching' => ui_text('กำลังค้นหา...', 'Searching...'),
    'notFound' => ui_text(
        'ไม่พบลูกค้าที่ตรงกับข้อมูลที่ค้นหา คุณสามารถลงทะเบียนลูกค้าใหม่เพื่อทำรายการต่อได้เลย',
        'No matching customer was found. You can register a new customer to continue.'
    ),
    'foundTemplate' => ui_text(
        'พบข้อมูล {count} รายการ กรุณาเลือกรายการที่ถูกต้อง',
        'Found {count} matches. Choose the correct record.'
    ),
    'singleMatch' => ui_text('พบข้อมูล 1 รายการ กดเลือกเพื่อทำรายการต่อ', 'Found 1 match. Select it to continue.'),
    'lookupFailed' => ui_text('ค้นหาลูกค้าไม่สำเร็จ', 'Customer lookup failed.'),
    'unnamedCustomer' => ui_text('ยังไม่ได้ระบุชื่อลูกค้า', 'Unnamed customer'),
    'noPlate' => ui_text('ยังไม่มีทะเบียน', 'No plate'),
    'vehiclePending' => ui_text('ยังไม่มีรายละเอียดรถ', 'Vehicle details pending'),
    'saveFailed' => ui_text('บันทึกลูกค้าและรถไม่สำเร็จ', 'Customer and vehicle were not saved.'),
    'saveSuccessFallback' => ui_text('บันทึกลูกค้าและรถเรียบร้อยแล้ว', 'Customer and vehicle saved.'),
    'sessionExpiredRedirecting' => ui_text(
        'เซสชันหมดอายุ กำลังพาไปเข้าสู่ระบบอีกครั้ง...',
        'Your session expired. Redirecting to login...'
    ),
    'permissionRedirecting' => ui_text(
        'คุณไม่มีสิทธิ์ใช้งานหน้านี้แล้ว กำลังพากลับไปหน้าที่เข้าถึงได้...',
        'You no longer have permission to use this page. Redirecting...'
    ),
    'refreshingOpenBill' => ui_text(
        'ข้อมูลหน้านี้หมดอายุ กำลังโหลดหน้า Open Bill ใหม่...',
        'This page expired. Refreshing Open Bill...'
    ),
    'photoReady' => ui_text('พร้อมบันทึกรูปนี้เป็นโปรไฟล์รถแล้ว', 'This photo is ready to be saved as the vehicle profile image.'),
    'photoModalTitle' => ui_text('รูปโปรไฟล์รถ', 'Vehicle profile photo'),
    'photoZoomHint' => ui_text('คลิกที่รูปเพื่อดูขนาดใหญ่', 'Click photo to view a larger image'),
    'photoModalGestureHint' => ui_text('แตะสองครั้งเพื่อซูม หรือปัดลงเพื่อปิด', 'Double-tap to zoom or swipe down to close'),
    'photoClose' => ui_text('ปิด', 'Close'),
    'photoDefaultHint' => ui_text(
        'รูปพร้อมบันทึกเป็นโปรไฟล์รถ',
        'Photo is ready to save as profile image.'
    ),
    'customerNameRequired' => ui_text('กรุณาระบุชื่อลูกค้า', 'Customer name is required.'),
    'plateNumberRequired' => ui_text('กรุณาระบุทะเบียนรถ', 'Plate number is required.'),
    'requiredFieldsMessage' => ui_text('กรุณาระบุชื่อลูกค้าและทะเบียนรถให้ครบก่อนบันทึก', 'Customer name and plate number are required before saving.'),
);

$hasSelectedContext = is_array($selectedContext)
    && is_array($selectedContext['vehicle'] ?? null)
    && is_array($selectedContext['summary'] ?? null);

render_page_start($pageTitle, 'open_bill', array('translation_buffer' => false));
?>

<section class="page-hero open-bill-hero">
    <div class="open-bill-hero-copy">
        <h1><?= e($pageTitle) ?></h1>
        <a class="button button-ghost open-bill-hero-button" href="dashboard.php">
            <?= open_bill_view_icon_svg('dashboard') ?>
            <span><?= e($dashboardLabel) ?></span>
        </a>
    </div>
</section>

<section
    class="card booking-lookup-card open-bill-search-card"
    data-open-bill-root
    data-search-endpoint="../process/search_customer.php"
    data-base-url="open_bill.php"
    data-login-url="<?= e(auth_page_path('login.php')) ?>"
    data-landing-url="<?= e(auth_page_path(auth_preferred_landing_page($conn))) ?>"
    data-initial-query="<?= e($searchQuery) ?>"
    data-match-count="<?= (int) count($matches) ?>"
    data-has-selected-context="<?= $hasSelectedContext ? '1' : '0' ?>"
>
    <div class="open-bill-section-head">
        <div>
            <h2 class="section-title"><?= e(ui_text('ค้นหาลูกค้าหรือรถ', 'Find a customer or vehicle')) ?></h2>
        </div>
        <?php if ($hasSelectedContext): ?>
            <a class="button button-secondary open-bill-jump-button" href="#open-bill-next-step">
                <?= open_bill_view_icon_svg('arrow-right') ?>
                <span><?= e(ui_text('ดำเนินการต่อ', 'Continue')) ?></span>
            </a>
        <?php endif; ?>
    </div>

    <form method="GET" action="open_bill.php" role="search" data-open-bill-search-form>
        <div class="open-bill-search-layout">
            <div class="field open-bill-search-field">
                <label for="open_bill_q"><?= e($searchFieldLabel) ?></label>
                <input
                    id="open_bill_q"
                    data-open-bill-search-input
                    name="q"
                    type="text"
                    inputmode="text"
                    autocomplete="off"
                    value="<?= e($searchQuery) ?>"
                    placeholder="0971234567 / 1กข1234 / CXV8154"
                >
            </div>
        </div>
        <div class="actions open-bill-toolbar-actions">
            <button class="button app-action-button" data-open-bill-search-button type="submit" name="search" value="1">
                <?= open_bill_view_icon_svg('search') ?>
                <span><?= e($searchLabel) ?></span>
            </button>
            <a class="button button-accent app-action-button" data-open-bill-new-customer href="<?= e('open_bill.php?' . http_build_query(array_filter(array('new' => '1', 'q' => $searchQuery), static function ($value): bool { return $value !== ''; }))) ?>">
                <?= open_bill_view_icon_svg('plus') ?>
                <span><?= e($newCustomerLabel) ?></span>
            </a>
            <a class="button button-ghost app-action-button" href="open_bill.php">
                <?= open_bill_view_icon_svg('refresh') ?>
                <span><?= e($resetLabel) ?></span>
            </a>
        </div>
    </form>

    <div class="open-bill-feedback-row">
        <div class="lookup-feedback" data-open-bill-feedback data-state="<?= e($searchState) ?>"<?= $searchMessage === '' ? ' hidden' : '' ?> aria-live="polite"><?= e($searchMessage) ?></div>
    </div>

    <div class="open-bill-match-grid open-bill-live-results" data-open-bill-live-results hidden></div>
    <script type="application/json" data-open-bill-text><?= (string) json_encode($openBillLiveSearchText, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?></script>
</section>

<div data-open-bill-selected-context-root hidden></div>

<?php if ($hasSelectedContext): ?>
    <div data-open-bill-server-section id="open-bill-next-step" style="margin-top: 18px;">
        <?= open_bill_render_selected_context_html($conn, $selectedContext) ?>
    </div>
<?php endif; ?>

<?php if (count($matches) > 1): ?>
    <section class="table-card open-bill-results-shell" data-open-bill-server-section style="margin-top: 18px;">
        <div class="section-head open-bill-section-head" style="padding: 18px 18px 0;">
            <div>
                <h2 class="section-title"><?= e(ui_text('เลือกลูกค้าและรถ', 'Choose a customer and vehicle')) ?></h2>
            </div>
        </div>
        <div class="open-bill-match-grid">
            <?php foreach ($matches as $match): ?>
                <?php
                $matchCustomerId = (int) ($match['customerId'] ?? 0);
                $matchCarId = (int) ($match['carId'] ?? 0);
                $matchVehicleName = trim((string) (($match['brand'] ?? '') . ' ' . ($match['model'] ?? '')));
                $matchProfileImageUrl = trim((string) ($match['profileImageUrl'] ?? ''));
                $matchProfileImageName = trim((string) ($match['profileImageName'] ?? ''));
                $matchPhotoAlt = $matchProfileImageName !== '' ? $matchProfileImageName : ui_text('รูปรถ', 'Vehicle photo');
                $isSelected = $selectedCustomerId === $matchCustomerId && $selectedCarId === $matchCarId;
                ?>
                <a class="open-bill-match-card<?= $isSelected ? ' is-selected' : '' ?><?= $matchProfileImageUrl !== '' ? ' open-bill-match-card--with-photo' : '' ?>" href="<?= e(open_bill_result_url($searchQuery, $matchCustomerId, $matchCarId)) ?>">
                    <?php if ($matchProfileImageUrl !== ''): ?>
                        <img
                            class="open-bill-match-photo"
                            src="<?= e($matchProfileImageUrl) ?>"
                            alt="<?= e($matchPhotoAlt) ?>"
                            data-open-bill-photo-expand
                            data-photo-src="<?= e($matchProfileImageUrl) ?>"
                            data-photo-alt="<?= e($matchPhotoAlt) ?>"
                            data-photo-title="<?= e(ui_text('รูปโปรไฟล์รถ', 'Vehicle profile photo')) ?>"
                            tabindex="0"
                            role="button"
                            aria-label="<?= e(ui_text('คลิกที่รูปเพื่อดูขนาดใหญ่', 'Click photo to view a larger image')) ?>"
                        >
                    <?php endif; ?>
                    <div class="open-bill-match-head">
                        <strong><?= e((string) ($match['customerName'] ?? '-')) ?></strong>
                        <span class="badge badge-secondary"><?= e(customer_group_label((string) ($match['customerGroup'] ?? 'member'))) ?></span>
                    </div>
                    <div class="stack">
                        <span><?= e((string) ($match['phone'] ?? '-')) ?></span>
                        <span class="plate-card">
                            <span class="plate"><?= e((string) ($match['plateNumber'] ?? '-')) ?></span>
                            <?php if (trim((string) ($match['province'] ?? '')) !== ''): ?>
                                <span class="plate-province"><?= e((string) ($match['province'] ?? '')) ?></span>
                            <?php endif; ?>
                        </span>
                        <span class="muted"><?= e($matchVehicleName !== '' ? $matchVehicleName : ui_text('ยังไม่มีรายละเอียดรถ', 'Vehicle details pending')) ?></span>
                        <span class="muted"><?= e((string) ($match['color'] ?? '')) ?></span>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
    </section>
<?php endif; ?>

<section class="form-card open-bill-register-shell" data-open-bill-new-form<?= $showNewCustomerForm ? '' : ' hidden' ?> style="margin-top: 18px;">
    <div class="section-head open-bill-section-head">
        <div>
            <h2 class="section-title"><?= e(ui_text('ลงทะเบียนลูกค้าใหม่', 'Register new customer')) ?></h2>
        </div>
    </div>

    <form method="POST" action="<?= e(app_process_path('save_open_bill_customer.php')) ?>" enctype="multipart/form-data" data-open-bill-new-form-fields novalidate>
        <?= csrf_input('open_bill_customer_save') ?>
        <input type="hidden" name="lookup_query" value="<?= e($draftLookupQuery) ?>" data-open-bill-lookup-query>

        <div class="open-bill-form-columns">
            <div class="open-bill-form-panel">
                <div class="open-bill-panel-head">
                    <span class="open-bill-panel-icon"><?= open_bill_view_icon_svg('customer') ?></span>
                    <div class="open-bill-panel-copy">
                        <strong><?= e(ui_text('ข้อมูลลูกค้า', 'Customer details')) ?></strong>
                    </div>
                </div>
                <div class="form-grid open-bill-form-grid">
                    <div class="field">
                        <label for="open_bill_customer_name"><?= e(ui_text('ชื่อลูกค้า', 'Customer name')) ?></label>
                        <input id="open_bill_customer_name" name="customer_name" type="text" value="<?= e($draftCustomerName) ?>" placeholder="<?= e(ui_text('เช่น คุณสมชาย', 'For example John Doe')) ?>" data-open-bill-customer-name>
                    </div>
                    <div class="field">
                        <label for="open_bill_phone"><?= e(ui_text('เบอร์โทร', 'Phone')) ?></label>
                        <input id="open_bill_phone" name="phone" type="text" value="<?= e($draftPhone) ?>" placeholder="0812345678" data-open-bill-phone>
                    </div>
                </div>
            </div>

            <div class="open-bill-form-panel">
                <div class="open-bill-panel-head">
                    <span class="open-bill-panel-icon"><?= open_bill_view_icon_svg('vehicle') ?></span>
                    <div class="open-bill-panel-copy">
                        <strong><?= e(ui_text('ข้อมูลรถ', 'Vehicle details')) ?></strong>
                    </div>
                </div>
                <div class="form-grid open-bill-form-grid">
                    <div class="field">
                        <label for="open_bill_plate_number"><?= e(ui_text('ทะเบียนรถ', 'Plate number')) ?></label>
                        <input id="open_bill_plate_number" name="plate_number" type="text" value="<?= e($draftPlateNumber) ?>" placeholder="<?= e(ui_text('เช่น 1กข1234', 'For example 1AB1234')) ?>" data-open-bill-plate>
                    </div>
                    <div class="field">
                        <label for="open_bill_province"><?= e(ui_text('จังหวัด', 'Province')) ?></label>
                        <select id="open_bill_province" name="province" data-default-value="Bangkok">
                            <option value=""><?= e(ui_text('เลือกจังหวัด', 'Select province')) ?></option>
                            <?php foreach ($provinceOptions as $provinceOption): ?>
                                <option value="<?= e($provinceOption) ?>" <?= $draftProvince === $provinceOption ? 'selected' : '' ?>><?= e(translate_text($provinceOption)) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="field">
                        <label for="open_bill_brand"><?= e(ui_text('ยี่ห้อ', 'Brand')) ?></label>
                        <input id="open_bill_brand" name="brand" type="text" value="<?= e($draftBrand) ?>" placeholder="Mazda">
                    </div>
                    <div class="field">
                        <label for="open_bill_model"><?= e(ui_text('รุ่น', 'Model')) ?></label>
                        <input id="open_bill_model" name="model" type="text" value="<?= e($draftModel) ?>" placeholder="CX-30">
                    </div>
                    <div class="field">
                        <label for="open_bill_color"><?= e(ui_text('สีรถ', 'Color')) ?></label>
                        <input id="open_bill_color" name="color" type="text" value="<?= e($draftColor) ?>" placeholder="<?= e(ui_text('เช่น ขาว', 'For example White')) ?>">
                    </div>
                </div>
            </div>
        </div>

        <div class="open-bill-form-panel open-bill-photo-panel">
            <div class="open-bill-panel-head">
                <span class="open-bill-panel-icon"><?= open_bill_view_icon_svg('camera') ?></span>
                <div class="open-bill-panel-copy">
                    <strong><?= e(ui_text('รูปโปรไฟล์รถ', 'Vehicle profile photo')) ?></strong>
                </div>
            </div>
            <div class="open-bill-photo-field">
                <div class="field open-bill-file-field">
                    <label for="open_bill_car_photo"><?= e(ui_text('อัปโหลดหรือถ่ายรูปรถ', 'Upload or take vehicle photo')) ?></label>
                    <div class="vehicle-photo-picker" data-photo-picker>
                        <input
                            class="vehicle-photo-picker-input"
                            id="open_bill_car_photo"
                            name="car_photo"
                            type="file"
                            accept="<?= e(car_profile_upload_accept_attribute()) ?>"
                            data-photo-picker-input
                            data-open-bill-photo-input
                        >
                        <div class="vehicle-photo-picker-surface">
                            <span class="vehicle-photo-picker-icon"><?= open_bill_view_icon_svg('camera') ?></span>
                            <div class="vehicle-photo-picker-copy">
                                <strong data-photo-picker-file-name><?= e(ui_text('ยังไม่ได้เลือกรูป', 'No image selected')) ?></strong>
                                <span><?= e(ui_text('ถ่ายรูปจากกล้อง หรือเลือกรูปจากเครื่องในช่องเดียวกัน', 'Take a photo or choose an image from this single field.')) ?></span>
                            </div>
                            <div class="vehicle-photo-picker-actions">
                                <button class="button button-secondary vehicle-photo-picker-button" type="button" data-photo-picker-camera><?= e(ui_text('ถ่ายรูป', 'Take photo')) ?></button>
                                <button class="button button-ghost vehicle-photo-picker-button" type="button" data-photo-picker-select><?= e(ui_text('เลือกรูป', 'Choose image')) ?></button>
                                <button class="button button-ghost vehicle-photo-picker-button" type="button" data-photo-picker-clear hidden><?= e(ui_text('ล้างรูป', 'Clear')) ?></button>
                            </div>
                        </div>
                    </div>
                    <p class="helper" data-open-bill-photo-hint><?= e(ui_text('รูปพร้อมบันทึกเป็นโปรไฟล์รถ', 'Photo is ready to save as profile image.')) ?></p>
                </div>
                <div class="open-bill-photo-preview-card" data-open-bill-photo-preview>
                    <img src="" alt="<?= e(ui_text('ตัวอย่างรูปรถ', 'Vehicle preview')) ?>" data-open-bill-photo-image hidden>
                    <div class="open-bill-photo-preview-placeholder" data-open-bill-photo-placeholder>
                        <span class="open-bill-photo-placeholder-icon"><?= open_bill_view_icon_svg('camera') ?></span>
                        <strong><?= e(ui_text('ยังไม่ได้เลือกรูปรถ', 'No vehicle photo selected')) ?></strong>
                    </div>
                </div>
            </div>
        </div>

        <div class="actions open-bill-form-actions">
            <button class="button button-accent open-bill-save-button" data-open-bill-save-button type="submit" formnovalidate>
                <?= open_bill_view_icon_svg('plus') ?>
                <span><?= e(ui_text('บันทึกลูกค้าและรถ', 'Save customer and vehicle')) ?></span>
            </button>
            <a class="button button-ghost open-bill-reset-button" data-open-bill-reset-link href="open_bill.php">
                <?= open_bill_view_icon_svg('refresh') ?>
                <span><?= e($resetLabel) ?></span>
            </a>
        </div>
    </form>
</section>

<div class="open-bill-photo-modal" data-open-bill-photo-modal hidden aria-hidden="true">
    <button
        type="button"
        class="open-bill-photo-modal-backdrop"
        data-open-bill-photo-modal-close
        aria-label="<?= e(ui_text('ปิดตัวอย่างรูป', 'Close photo preview')) ?>"
    ></button>
    <section class="open-bill-photo-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="open-bill-photo-modal-title">
        <div class="open-bill-photo-modal-head">
            <div class="open-bill-photo-modal-title-wrap">
                <strong id="open-bill-photo-modal-title" data-open-bill-photo-modal-title><?= e(ui_text('รูปโปรไฟล์รถ', 'Vehicle profile photo')) ?></strong>
                <span class="open-bill-photo-modal-hint"><?= e(ui_text('แตะสองครั้งเพื่อซูม หรือปัดลงเพื่อปิด', 'Double-tap to zoom or swipe down to close')) ?></span>
            </div>
            <button
                type="button"
                class="button button-ghost open-bill-photo-modal-close"
                data-open-bill-photo-modal-close
                data-open-bill-photo-modal-close-button
            >
                <?= e(ui_text('ปิด', 'Close')) ?>
            </button>
        </div>
        <img class="open-bill-photo-modal-image" src="" alt="" data-open-bill-photo-modal-image>
    </section>
</div>

<?php
render_page_end();
