@php
    $qrcode = $qrcode ?? null;
@endphp

<div class="mb-3">
    <label class="form-label">Title</label>
    <input type="text"
           name="title"
           class="form-control"
           value="{{ old('title',$qrcode->title ?? '') }}">
    @error('title') <small class="text-danger">{{ $message }}</small> @enderror
</div>

<div class="row">
    <div class="col-md-5 mb-3">
        <label class="form-label">Page URL</label>
        <select name="url" id="page_url" class="form-select">
            <option value="">- Select -</option>
            <option value="/" {{ old('url',$qrcode->url ?? '')=='/'?'selected':'' }}>
                Home
            </option>
        </select>
    </div>

    <div class="col-md-2 d-flex align-items-center justify-content-center">
        <strong>OR</strong>
    </div>

    <div class="col-md-5 mb-3">
        <label class="form-label">Custom URL</label>
        <input type="text"
               name="custom_url"
               id="custom_url"
               class="form-control"
               value="{{ old('custom_url',$qrcode->custom_url ?? '') }}">
    </div>
</div>

@if(!empty($qrcode?->qr_code_img))
<div class="mb-3">
    <label class="form-label">QR Code</label><br>
    <a href="{{ asset('uploads/qrcodes/'.$qrcode->qr_code_img) }}" target="_blank">
        <img src="{{ asset('uploads/qrcodes/'.$qrcode->qr_code_img) }}"
             width="150" height="150">
    </a>
</div>
@endif

<script>
document.addEventListener('DOMContentLoaded', function () {

    document.getElementById('page_url')?.addEventListener('change', function () {
        if (this.value !== '') {
            document.getElementById('custom_url').value = '';
        }
    });

    document.getElementById('custom_url')?.addEventListener('keyup', function () {
        if (this.value.trim() !== '') {
            document.getElementById('page_url').value = '';
        }
    });

});
</script>