@php
    $settings = $merchantConfig?->settings ?? [];
    $defaults = [
        'BASE_MERCHANT_NAME'              => $customer->name ?? '',
        'BASE_TRACE_NO'                   => '000001',
        'BASE_MAX_REFUND_AMOUNT'          => '100',
        'BASE_CURRENCY_CODE'              => '784',
        'BASE_MAX_TRANS_COUNT'            => '500',
        'PINPAD_MASTER_KEY_INDEX'         => '1',
        'PINPAD_ALGORITHM_TYPE'           => '0',
        'PINPAD_TIMEOUT'                  => '30',
        'EXTERNAL_PINPAD_YSDK'            => '1',
        'EXTERNAL_PINPAD'                 => '0',
        'EXTERNAL_PINPAD_CONNECT_MODE'    => '',
        'PRINT_COUNT'                     => '2',
        'PRINT_EXTERNAL'                  => '0',
        'PRINT_EXTERNAL_CONNECT_MODE'     => '',
        'PRINT_EXTERNAL_SERIAL_BAUDRATE'  => '',
        'PRINT_REMARKS'                   => 'Thank You',
        'TRANS_SALE'                       => '1',
        'TRANS_VOID'                       => '1',
        'TRANS_REFUND'                     => '0',
        'TRANS_BALANCE'                    => '0',
        'TRANS_PREAUTH'                    => '0',
        'TRANS_MOBILE_PAY'                 => '0',
        'TRANS_INSTALLMENT'               => '0',
        'COMM_USE_SSL'                    => '0',
        'COMM_TIMEOUT'                    => '60',
        'COMM_SERVER_ADDRESS'             => 'pos.secure.shukria.ae',
        'COMM_PORT'                       => '9143',
        'COMM_TPDU'                       => '6000782000',
        'COMM_NII'                        => '782',
        'ELECSIGN_IS_SUPPORT'             => '0',
        'SCAN_PRIORITY_SCANNER'           => '0',
        'SCAN_EXTERN_CONNECT_MODE'        => '',
        'SCAN_EXTERN_USB_WAIT_TIME'       => '',
        'SCAN_EXTERN_SERIAL_BAUDRATE'     => '',
        'PASSWORD_ADMIN'                  => '888888',
        'PASSWORD_SYSTEM_ADMIN'           => '000000',
        'PASSWORD_SECURITY'               => '000000',
        'TOMS_FLY_PARAMETERS'             => '1',
        'TOMS_FLY_RECEIPT'                => '1',
        'NFC_RECEIPT'                     => '0',
        'CLOUD_RECEIPT_BUTTON_LABEL'      => 'Cloud',
        'OTHER_TIP_INPUT'                 => '0',
        'OTHER_THIRD_BILL_SHOW'           => '0',
        'OTHER_VOID_CARD'                 => '0',
        'OTHER_VOID_PIN'                  => '0',
        'CHIP_MSR_FALLBACK'               => '1',
        'CHIP_MSR_SCHEME_FALLBACK'        => '1',
        'CHIP_MSR_TECH_FALLBACK'          => '1',
        'PIN_FOR_MANUAL'                  => '1',
        'QR_SERVER_ADDRESS'               => 'posqr.secure.shukria.ae',
        'QR_SERVER_PORT'                  => '4043',
        'QR_API_ENDPOINT'                 => '/qrMf',
        'MQTT_BROKER_ADDRESS'             => 'mqtt.secure.shukria.ae',
        'MQTT_BROKER_PORT'                => '1883',
        'TTQ_CTLS'                        => '1',
    ];
    // Merge: saved settings take priority, defaults fill in the gaps
    $settings = array_merge($defaults, $settings);
@endphp
<!-- Merchant Configuration Tab -->
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-cog"></i> {{ __('Merchant Configuration') }}
                </h5>
            </div>
            <div class="card-body">
                @if(session('mc_success'))
                    <div class="alert alert-success">{{ session('mc_success') }}</div>
                @endif

                <form id="merchantConfigForm" enctype="multipart/form-data">
                    @csrf

                    <!-- Logo Upload -->
                    <div class="form-group">
                        <label class="font-weight-bold">{{ __('Logo') }}</label>

                        @if($merchantConfig && !empty($merchantConfig->logo))
                            <div class="mb-2">
                                <img id="logoPreview" src="{{ asset($merchantConfig?->logo ?? '') }}" alt="Merchant Logo" class="img-thumbnail" style="max-height:120px;">
                            </div>
                        @else
                            <div class="mb-2" id="logoPreviewWrapper" style="display:none;">
                                <img id="logoPreview" src="" alt="Logo Preview" class="img-thumbnail" style="max-height:120px;">
                            </div>
                        @endif

                        <div class="d-flex gap-3 align-items-center justify-content-between">
                            <div class="d-flex gap-2 align-items-center">
                                <label class="btn btn-outline-primary mb-0">
                                    <i class="fas fa-folder-open"></i> {{ __('Choose File') }}
                                    <input type="file" name="logo" id="logoFileInput" accept="image/*" style="display:none;">
                                </label>
                                <button type="button" class="btn btn-outline-secondary mb-0" id="openCameraBtn">
                                    <i class="fas fa-camera"></i> {{ __('Capture Image') }}
                                </button>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <label for="showCardholderName" class="mb-0 font-weight-500" style="margin-right:14px;">{{ __('Show Cardholder Name') }}</label>
                                <div class="toggle-switch" style="margin-left:6px;">
                                    <input type="hidden" name="show_cardholder_name" value="0">
                                    <input class="toggle-checkbox" type="checkbox" id="showCardholderName" name="show_cardholder_name" value="1" {{ isset($merchantConfig) && (int)$merchantConfig->show_cardholder_name === 1 ? 'checked' : '' }}>
                                    <label class="toggle-label" for="showCardholderName"></label>
                                </div>
                            </div>
                        </div>
                        <!-- Camera modal (placed outside d-flex to avoid nesting issues) -->
                        <div class="modal fade" id="cameraModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">{{ __('Capture Image') }}</h5>
                                        <button type="button" class="close" id="closeCameraModal"><span>&times;</span></button>
                                    </div>
                                    <div class="modal-body text-center">
                                        <video id="cameraStream" autoplay playsinline style="width:100%;max-height:300px;background:#000;border-radius:4px;"></video>
                                        <canvas id="cameraCanvas" style="display:none;"></canvas>
                                        <div id="cameraError" class="text-danger mt-2" style="display:none;"></div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" id="capturePhotoBtn"><i class="fas fa-camera"></i> {{ __('Take Photo') }}</button>
                                        <button type="button" class="btn btn-secondary" id="cancelCameraBtn">{{ __('Cancel') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <small class="text-muted d-block mt-1">{{ __('Accepted formats: JPG, PNG, GIF. Max 2MB.') }}</small>
                        <div id="logoError" class="text-danger mt-1" style="display:none;"></div>
                    </div>

                    <!-- Description -->
                    <div class="form-group">
                        <label class="font-weight-bold">{{ __('Description') }}</label>
                        <textarea name="description" id="descriptionInput" class="form-control" rows="4" maxlength="1000" placeholder="{{ __('Enter merchant description') }}">{{ old('description', $merchantConfig?->description ?? '') }}</textarea>
                        <small class="text-muted"><span id="descCount">{{ strlen($merchantConfig?->description ?? '') }}</span>/1000 {{ __('characters') }}</small>
                        <div id="descError" class="text-danger mt-1" style="display:none;"></div>
                    </div>

                    <!-- Message -->
                    <div class="form-group">
                        <label class="font-weight-bold">{{ __('Message') }}</label>
                        <input type="text" name="message" id="messageInput" class="form-control" maxlength="50" placeholder="{{ __('Thank you message') }}" value="{{ old('message', $merchantConfig?->message ?? '') }}">
                        <small class="text-muted"><span id="msgCount">{{ strlen($merchantConfig?->message ?? '') }}</span>/50 {{ __('characters') }}</small>
                        <div id="msgError" class="text-danger mt-1" style="display:none;"></div>
                    </div>

                    <!-- Primary Colour -->
                    <div class="form-group">
                        <label class="font-weight-bold">{{ __('Primary Colour') }}</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="color" name="pri_colour" id="priColourInput" value="{{ old('pri_colour', $merchantConfig?->pri_colour ?? '#000000') }}" class="form-control" style="width: 80px; height: 40px; padding: 2px; cursor: pointer;">
                            <span id="priColourValue" class="font-weight-bold">{{ strtoupper(old('pri_colour', $merchantConfig?->pri_colour ?? '#000000')) }}</span>
                        </div>
                        <small class="text-muted d-block mt-1">{{ __('Click the color box to pick or type hex code') }}</small>
                    </div>

                    <!-- Secondary Colour -->
                    <div class="form-group">
                        <label class="font-weight-bold">{{ __('Secondary Colour') }}</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="color" name="sec_colour" id="secColourInput" value="{{ old('sec_colour', $merchantConfig?->sec_colour ?? '#000000') }}" class="form-control" style="width: 80px; height: 40px; padding: 2px; cursor: pointer;">
                            <span id="secColourValue" class="font-weight-bold">{{ strtoupper(old('sec_colour', $merchantConfig?->sec_colour ?? '#000000')) }}</span>
                        </div>
                        <small class="text-muted d-block mt-1">{{ __('Click the color box to pick or type hex code') }}</small>
                    </div>

                    <!-- Terminal Settings -->
                    <hr class="mt-4 mb-4">
                    <h6 class="font-weight-bold mb-3 text-primary"><i class="fas fa-terminal"></i> {{ __('Terminal Settings') }}</h6>

                    <!-- Basic Merchant Settings -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-store"></i> {{ __('Basic Merchant Settings') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>{{ __('Merchant Name') }}</label>
                                    <input type="text" name="BASE_MERCHANT_NAME" class="form-control" value="{{ $settings['BASE_MERCHANT_NAME'] ?? '' }}">
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>{{ __('Trace No') }}</label>
                                    <input type="text" name="BASE_TRACE_NO" class="form-control" value="{{ $settings['BASE_TRACE_NO'] ?? '' }}">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Max Refund Amount (Cent)') }}</label>
                                    <input type="number" name="BASE_MAX_REFUND_AMOUNT" class="form-control" value="{{ $settings['BASE_MAX_REFUND_AMOUNT'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Currency Code') }}</label>
                                    <input type="number" name="BASE_CURRENCY_CODE" class="form-control" value="{{ $settings['BASE_CURRENCY_CODE'] ?? '' }}" min="0">
                                    <small class="text-muted">840($), 156(¥), 978(€), 784(AED)</small>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Max Transaction Records') }}</label>
                                    <input type="number" name="BASE_MAX_TRANS_COUNT" class="form-control" value="{{ $settings['BASE_MAX_TRANS_COUNT'] ?? '' }}" min="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- PIN Pad Configuration -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-keyboard"></i> {{ __('PIN Pad Configuration') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Master Key Index') }}</label>
                                    <input type="number" name="PINPAD_MASTER_KEY_INDEX" class="form-control" value="{{ $settings['PINPAD_MASTER_KEY_INDEX'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Algorithm Type') }}</label>
                                    <select name="PINPAD_ALGORITHM_TYPE" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['PINPAD_ALGORITHM_TYPE'] ?? '') === '0' ? 'selected' : '' }}>DUKPT (0)</option>
                                        <option value="1" {{ (string)($settings['PINPAD_ALGORITHM_TYPE'] ?? '') === '1' ? 'selected' : '' }}>MKSK (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Entry PIN Timeout (s)') }}</label>
                                    <input type="number" name="PINPAD_TIMEOUT" class="form-control" value="{{ $settings['PINPAD_TIMEOUT'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('YSDK Enabled') }}</label>
                                    <select name="EXTERNAL_PINPAD_YSDK" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['EXTERNAL_PINPAD_YSDK'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['EXTERNAL_PINPAD_YSDK'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('External PIN Pad') }}</label>
                                    <select name="EXTERNAL_PINPAD" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['EXTERNAL_PINPAD'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['EXTERNAL_PINPAD'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('External PIN Pad Connect Mode') }}</label>
                                    <input type="number" name="EXTERNAL_PINPAD_CONNECT_MODE" class="form-control" value="{{ $settings['EXTERNAL_PINPAD_CONNECT_MODE'] ?? '' }}" min="0">
                                    <small class="text-muted">Serial(0), USB(1), Dock Serial(10), Dock USB(11/12)</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Printer Configuration -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-print"></i> {{ __('Printer Configuration') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Print Count') }}</label>
                                    <input type="number" name="PRINT_COUNT" class="form-control" value="{{ $settings['PRINT_COUNT'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('External Printer') }}</label>
                                    <select name="PRINT_EXTERNAL" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['PRINT_EXTERNAL'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['PRINT_EXTERNAL'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Ext. Printer Connect Mode') }}</label>
                                    <input type="number" name="PRINT_EXTERNAL_CONNECT_MODE" class="form-control" value="{{ $settings['PRINT_EXTERNAL_CONNECT_MODE'] ?? '' }}" min="0">
                                    <small class="text-muted">Serial(0), USB(1), BT(2)</small>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Ext. Printer Baud Rate') }}</label>
                                    <input type="number" name="PRINT_EXTERNAL_SERIAL_BAUDRATE" class="form-control" value="{{ $settings['PRINT_EXTERNAL_SERIAL_BAUDRATE'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-12 form-group">
                                    <label>{{ __('Print Remarks') }}</label>
                                    <input type="text" name="PRINT_REMARKS" class="form-control" value="{{ $settings['PRINT_REMARKS'] ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Transaction Support -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-exchange-alt"></i> {{ __('Transaction Support') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Sale') }}</label>
                                    <select name="TRANS_SALE" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_SALE'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_SALE'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Void') }}</label>
                                    <select name="TRANS_VOID" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_VOID'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_VOID'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Refund') }}</label>
                                    <select name="TRANS_REFUND" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_REFUND'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_REFUND'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Query Balance') }}</label>
                                    <select name="TRANS_BALANCE" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_BALANCE'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_BALANCE'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Pre-Auth') }}</label>
                                    <select name="TRANS_PREAUTH" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_PREAUTH'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_PREAUTH'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Mobile Pay') }}</label>
                                    <select name="TRANS_MOBILE_PAY" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_MOBILE_PAY'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_MOBILE_PAY'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Installment Pay') }}</label>
                                    <select name="TRANS_INSTALLMENT" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TRANS_INSTALLMENT'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TRANS_INSTALLMENT'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Communication Settings -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-network-wired"></i> {{ __('Communication Settings') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Use SSL') }}</label>
                                    <select name="COMM_USE_SSL" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['COMM_USE_SSL'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['COMM_USE_SSL'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Timeout (s)') }}</label>
                                    <input type="number" name="COMM_TIMEOUT" class="form-control" value="{{ $settings['COMM_TIMEOUT'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Server Address') }}</label>
                                    <input type="text" name="COMM_SERVER_ADDRESS" class="form-control" value="{{ $settings['COMM_SERVER_ADDRESS'] ?? '' }}">
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Server Port') }}</label>
                                    <input type="number" name="COMM_PORT" class="form-control" value="{{ $settings['COMM_PORT'] ?? '' }}" min="0" max="65535">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('TPDU') }}</label>
                                    <input type="text" name="COMM_TPDU" class="form-control" value="{{ $settings['COMM_TPDU'] ?? '' }}">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('NII') }}</label>
                                    <input type="number" name="COMM_NII" class="form-control" value="{{ $settings['COMM_NII'] ?? '' }}" min="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Electronic Signature & Scanner -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-signature"></i> {{ __('Electronic Signature & Scanner') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>{{ __('Support Electronic Signature') }}</label>
                                    <select name="ELECSIGN_IS_SUPPORT" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['ELECSIGN_IS_SUPPORT'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['ELECSIGN_IS_SUPPORT'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>{{ __('Priority Scanner') }}</label>
                                    <select name="SCAN_PRIORITY_SCANNER" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['SCAN_PRIORITY_SCANNER'] ?? '') === '0' ? 'selected' : '' }}>Front (0)</option>
                                        <option value="1" {{ (string)($settings['SCAN_PRIORITY_SCANNER'] ?? '') === '1' ? 'selected' : '' }}>Back (1)</option>
                                        <option value="2" {{ (string)($settings['SCAN_PRIORITY_SCANNER'] ?? '') === '2' ? 'selected' : '' }}>External (2)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Ext. Scanner Connect Mode') }}</label>
                                    <input type="number" name="SCAN_EXTERN_CONNECT_MODE" class="form-control" value="{{ $settings['SCAN_EXTERN_CONNECT_MODE'] ?? '' }}" min="0">
                                    <small class="text-muted">Serial(0), USB(1), Dock Serial(10), Dock USB(11/12)</small>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('USB Scan Wait Time (ms)') }}</label>
                                    <input type="number" name="SCAN_EXTERN_USB_WAIT_TIME" class="form-control" value="{{ $settings['SCAN_EXTERN_USB_WAIT_TIME'] ?? '' }}" min="0">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Ext. Scanner Baud Rate') }}</label>
                                    <input type="number" name="SCAN_EXTERN_SERIAL_BAUDRATE" class="form-control" value="{{ $settings['SCAN_EXTERN_SERIAL_BAUDRATE'] ?? '' }}" min="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Passwords -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-lock"></i> {{ __('Passwords') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Admin Password') }}</label>
                                    <input type="password" name="PASSWORD_ADMIN" class="form-control" autocomplete="new-password">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('System Admin Password') }}</label>
                                    <input type="password" name="PASSWORD_SYSTEM_ADMIN" class="form-control" autocomplete="new-password">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('Security Password') }}</label>
                                    <input type="password" name="PASSWORD_SECURITY" class="form-control" autocomplete="new-password">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Features & TOMS -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-sliders-h"></i> {{ __('Features & TOMS') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>{{ __('TOMS Fly Parameters') }} <small class="text-muted">(Update notification)</small></label>
                                    <select name="TOMS_FLY_PARAMETERS" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TOMS_FLY_PARAMETERS'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TOMS_FLY_PARAMETERS'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('TOMS Fly Receipt') }} <small class="text-muted">(Electric receipt)</small></label>
                                    <select name="TOMS_FLY_RECEIPT" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['TOMS_FLY_RECEIPT'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['TOMS_FLY_RECEIPT'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('NFC / Digi Receipt') }}</label>
                                    <select name="NFC_RECEIPT" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['NFC_RECEIPT'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['NFC_RECEIPT'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>{{ __('Cloud Receipt Button Label') }}</label>
                                    <input type="text" name="CLOUD_RECEIPT_BUTTON_LABEL" class="form-control" value="{{ $settings['CLOUD_RECEIPT_BUTTON_LABEL'] ?? '' }}">
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Support Tips Amount') }}</label>
                                    <select name="OTHER_TIP_INPUT" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['OTHER_TIP_INPUT'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['OTHER_TIP_INPUT'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Third App Show Result') }}</label>
                                    <select name="OTHER_THIRD_BILL_SHOW" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['OTHER_THIRD_BILL_SHOW'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['OTHER_THIRD_BILL_SHOW'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Void Needs Card') }}</label>
                                    <select name="OTHER_VOID_CARD" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['OTHER_VOID_CARD'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['OTHER_VOID_CARD'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Void Needs PIN') }}</label>
                                    <select name="OTHER_VOID_PIN" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['OTHER_VOID_PIN'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['OTHER_VOID_PIN'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- CHIP/MSR Settings -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-credit-card"></i> {{ __('CHIP/MSR Settings') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label>{{ __('MSR Fallback') }}</label>
                                    <select name="CHIP_MSR_FALLBACK" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['CHIP_MSR_FALLBACK'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['CHIP_MSR_FALLBACK'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Scheme Fallback') }}</label>
                                    <select name="CHIP_MSR_SCHEME_FALLBACK" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['CHIP_MSR_SCHEME_FALLBACK'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['CHIP_MSR_SCHEME_FALLBACK'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('Tech Fallback') }}</label>
                                    <select name="CHIP_MSR_TECH_FALLBACK" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['CHIP_MSR_TECH_FALLBACK'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['CHIP_MSR_TECH_FALLBACK'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label>{{ __('PIN for Manual Entry') }}</label>
                                    <select name="PIN_FOR_MANUAL" class="form-control">
                                        <option value="">-- Select --</option>
                                        <option value="0" {{ (string)($settings['PIN_FOR_MANUAL'] ?? '') === '0' ? 'selected' : '' }}>No (0)</option>
                                        <option value="1" {{ (string)($settings['PIN_FOR_MANUAL'] ?? '') === '1' ? 'selected' : '' }}>Yes (1)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- QR & MQTT Configuration -->
                    <div class="card border mb-3">
                        <div class="card-header bg-light py-2">
                            <strong class="text-secondary"><i class="fas fa-qrcode"></i> {{ __('QR & MQTT Configuration') }}</strong>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>{{ __('QR Server Address') }}</label>
                                    <input type="text" name="QR_SERVER_ADDRESS" class="form-control" value="{{ $settings['QR_SERVER_ADDRESS'] ?? '' }}">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('QR Server Port') }}</label>
                                    <input type="number" name="QR_SERVER_PORT" class="form-control" value="{{ $settings['QR_SERVER_PORT'] ?? '' }}" min="0" max="65535">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('QR API Endpoint') }}</label>
                                    <input type="text" name="QR_API_ENDPOINT" class="form-control" value="{{ $settings['QR_API_ENDPOINT'] ?? '' }}">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('MQTT Broker Address') }}</label>
                                    <input type="text" name="MQTT_BROKER_ADDRESS" class="form-control" value="{{ $settings['MQTT_BROKER_ADDRESS'] ?? '' }}">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('MQTT Broker Port') }}</label>
                                    <input type="number" name="MQTT_BROKER_PORT" class="form-control" value="{{ $settings['MQTT_BROKER_PORT'] ?? '' }}" min="0" max="65535">
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>{{ __('TTQ CTLS') }}</label>
                                    <input type="text" name="TTQ_CTLS" class="form-control" value="{{ $settings['TTQ_CTLS'] ?? '' }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary" id="saveMerchantConfig">
                            <i class="fas fa-save"></i> {{ __('Save Configuration') }}
                        </button>
                        <button type="reset" class="btn btn-secondary ml-2" id="resetMerchantConfig">
                            <i class="fas fa-undo"></i> {{ __('Reset') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const form        = document.getElementById('merchantConfigForm');
    const descInput   = document.getElementById('descriptionInput');
    const msgInput    = document.getElementById('messageInput');
    const descCount   = document.getElementById('descCount');
    const msgCount    = document.getElementById('msgCount');
    const saveUrl     = '{{ route("admin.customers.merchant-configuration.save", $customer->id) }}';
    let capturedBlob  = null; // holds the blob from camera capture

    // Character counters
    descInput.addEventListener('input', function () {
        descCount.textContent = this.value.length;
    });
    msgInput.addEventListener('input', function () {
        msgCount.textContent = this.value.length;
    });

    // Logo preview helper
    function showPreview(src) {
        var preview = document.getElementById('logoPreview');
        var wrapper = document.getElementById('logoPreviewWrapper');
        preview.src = src;
        if (wrapper) wrapper.style.display = 'block';
        preview.style.display = 'block';
    }

    // File input change → show preview, clear captured blob
    document.getElementById('logoFileInput').addEventListener('change', function () {
        if (this.files && this.files[0]) {
            capturedBlob = null; // file input takes priority
            var reader = new FileReader();
            reader.onload = function (e) { showPreview(e.target.result); };
            reader.readAsDataURL(this.files[0]);
        }
    });

    // ── Camera logic ──────────────────────────────────────────────────────────
    const cameraModal     = document.getElementById('cameraModal');
    const videoEl         = document.getElementById('cameraStream');
    const canvasEl        = document.getElementById('cameraCanvas');
    const cameraErrorEl   = document.getElementById('cameraError');
    const captureBtn      = document.getElementById('capturePhotoBtn');
    const openCameraBtn   = document.getElementById('openCameraBtn');
    const closeCameraBtn  = document.getElementById('closeCameraModal');
    const cancelCameraBtn = document.getElementById('cancelCameraBtn');
    let cameraStream      = null;

    function openCameraModal() {
        cameraErrorEl.style.display = 'none';
        cameraErrorEl.textContent   = '';
        cameraModal.style.display   = 'block';
        cameraModal.classList.add('show');
        document.body.classList.add('modal-open');

        // Start camera stream
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
                .then(function (stream) {
                    cameraStream = stream;
                    videoEl.srcObject = stream;
                })
                .catch(function (err) {
                    cameraErrorEl.textContent = 'Could not access camera: ' + err.message;
                    cameraErrorEl.style.display = 'block';
                });
        } else {
            cameraErrorEl.textContent = 'Camera not supported in this browser.';
            cameraErrorEl.style.display = 'block';
        }
    }

    function closeCameraModal() {
        // Stop stream
        if (cameraStream) {
            cameraStream.getTracks().forEach(function (t) { t.stop(); });
            cameraStream = null;
        }
        videoEl.srcObject = null;
        cameraModal.style.display = 'none';
        cameraModal.classList.remove('show');
        document.body.classList.remove('modal-open');
    }

    openCameraBtn.addEventListener('click', openCameraModal);
    closeCameraBtn.addEventListener('click', closeCameraModal);
    cancelCameraBtn.addEventListener('click', closeCameraModal);

    // Take photo
    captureBtn.addEventListener('click', function () {
        if (!cameraStream) return;
        var w = videoEl.videoWidth  || 640;
        var h = videoEl.videoHeight || 480;
        canvasEl.width  = w;
        canvasEl.height = h;
        canvasEl.getContext('2d').drawImage(videoEl, 0, 0, w, h);
        canvasEl.toBlob(function (blob) {
            capturedBlob = blob;
            // Clear file input so captured blob is used
            document.getElementById('logoFileInput').value = '';
            showPreview(canvasEl.toDataURL('image/jpeg'));
            closeCameraModal();
        }, 'image/jpeg', 0.9);
    });

    // Color preview functionality
    const priColourInput = document.getElementById('priColourInput');
    const secColourInput = document.getElementById('secColourInput');
    const priColourValue = document.getElementById('priColourValue');
    const secColourValue = document.getElementById('secColourValue');

    // Update hex code display when color changes
    priColourInput.addEventListener('change', function () {
        priColourValue.textContent = this.value.toUpperCase();
    });

    secColourInput.addEventListener('change', function () {
        secColourValue.textContent = this.value.toUpperCase();
    });

    // Form submit via AJAX
    form.addEventListener('submit', function (e) {
        e.preventDefault();

        var desc = descInput.value;
        var msg  = msgInput.value;

        // Client-side validation
        document.getElementById('descError').style.display = 'none';
        document.getElementById('msgError').style.display  = 'none';
        document.getElementById('logoError').style.display = 'none';

        if (desc.length > 1000) {
            document.getElementById('descError').textContent = 'Description cannot exceed 1000 characters.';
            document.getElementById('descError').style.display = 'block';
            return;
        }
        if (msg.length > 50) {
            document.getElementById('msgError').textContent = 'Message cannot exceed 50 characters.';
            document.getElementById('msgError').style.display = 'block';
            return;
        }

        // Build FormData from the entire form (captures all settings fields automatically)
        const formData = new FormData(form);

        // Handle toggle switch - ensure correct value is sent
        const toggleCheckbox = document.getElementById('showCardholderName');
        formData.set('show_cardholder_name', toggleCheckbox.checked ? '1' : '0');

        // Override logo with camera-captured blob if available
        if (capturedBlob) {
            formData.set('logo', capturedBlob, 'camera_capture.jpg');
        }

        const btn = document.getElementById('saveMerchantConfig');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';

        fetch(saveUrl, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: formData
        })
        .then(function (response) {
            if (!response.ok) {
                throw new Error('HTTP error! Status: ' + response.status);
            }
            return response.json();
        })
        .then(function (data) {
            if (data.success) {
                toastr.success(data.message || 'Configuration saved successfully.');
            } else {
                toastr.error(data.message || 'Something went wrong.');
            }
        })
        .catch(function (error) {
            console.error('Fetch error:', error);
            toastr.error(error.message || 'An error occurred. Please try again.');
        })
        .finally(function () {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-save"></i> Save Configuration';
        });
    });
})();
</script>

<style>
/* Toggle Switch Styling */
.toggle-switch {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 30px;
    margin: 0;
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 20px;
    background: #f0f0f0;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.toggle-label:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.toggle-checkbox:checked + .toggle-label:before {
    left: 32px;
    background: #fff;
}

.toggle-label:active:before {
    width: 28px;
}

/* Hover effect */
.toggle-label:hover {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.toggle-checkbox:checked + .toggle-label:hover {
    box-shadow: inset 0 0 5px rgba(76, 175, 80, 0.2);
}
</style>