@extends('voyager::master')

@section('page_title', $pageTitle ?? 'Compulsory Buying Link Page')

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-link"></i>
        {{ $pageTitle ?? 'Compulsory Buying Link Page' }}
    </h1>
@stop

@section('content')
<div class="page-content container-fluid">
    <div class="col-12">
        <div class="panel panel-bordered">
            <div class="panel-body">
                <form id="buying_add_form" class="needs-validation" novalidate>
                    {{-- Form Link (readonly) --}}
                    <div class="form-group row mb-4">
                        <label class="col-sm-3 control-label">Form Link</label>
                        <div class="col-sm-9">
                            <input type="text"
                                    class="form-control"
                                    id="form_link"
                                    name="form_link"
                                    value="form/compulsory_buying_form_process"
                                    readonly>
                        </div>
                    </div>

                    {{-- Fund Agreed --}}
                    <div class="form-group row mb-4">
                        <label class="col-sm-3 control-label">Fund Agreed</label>
                        <div class="col-sm-9">
                            <input type="text"
                                    class="form-control"
                                    id="fund_agreed"
                                    name="fund_agreed"
                                    value=""
                                    oninput="validateInput(event)"
                                    placeholder="Enter amount (numbers only)">
                        </div>
                    </div>

                    {{-- Dynamic link & copy --}}
                    <div class="form-group row mb-3">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-9">
                            <div class="d-flex align-items-center" style="border:1px solid #e5e7eb; padding:8px; border-radius:6px;">
                                <input type="text"
                                        id="dynamicFormLink"
                                        class="form-control"
                                        readonly
                                        style="border:none; box-shadow:none; padding-left:0;">
                                <button type="button"
                                        id="copyBtn"
                                        class="btn btn-default"
                                        style="display:none;">
                                    <i class="voyager-documentation"></i>
                                </button>
                            </div>
                            <small id="copyMessage" style="display:none; color:green;">Copied!</small>
                            <p class="help-block" style="margin-top:8px;">
                                <strong>Note:</strong> Please fill <em>Fund Agreed</em> to generate the dynamic link for copy.
                            </p>
                        </div>
                    </div>

                    {{-- QR Code --}}
                    <div class="form-group row mb-4">
                        <label class="col-sm-3 control-label">QR Code</label>
                        <div class="col-sm-9">
                            {!! QrCode::format('svg')->size(120)->margin(1)->generate(url('form/compulsory_buying_form_process')) !!}

                            <br>
                            <a href="{{ route('qr.compulsory.pdf') }}" class="btn btn-primary mt-3">
                                Download QR Code as PDF
                            </a>
                        </div>
                    </div>
                </form>

            </div> {{-- panel-body --}}
        </div> {{-- panel --}}
    </div>
</div>
@stop

@section('javascript')
<script>
(function(){
    const baseDomain     = @json($domain);
    const formPath       = $('#form_link').val();
    const fundInput      = document.getElementById('fund_agreed');
    const linkInput      = document.getElementById('dynamicFormLink');
    const copyBtn        = document.getElementById('copyBtn');
    const copyMessageEl  = document.getElementById('copyMessage');

    function updateLink() {
        const v = (fundInput.value || '').trim();
        if (!v) {
            linkInput.value = '';
            copyBtn.style.display = 'none';
            return;
        }
        // Build full URL
        const full = baseDomain + formPath + '?compulsory_buying_price=' + encodeURIComponent(v);
        linkInput.value = full;
        copyBtn.style.display = 'inline-block';
    }

    // Numeric-only validator (integers). If you need decimals, replace regex.
    window.validateInput = function (event) {
        const el = event.target;
        el.value = el.value.replace(/[^\d]/g, '');
        updateLink();
    };

    copyBtn && copyBtn.addEventListener('click', async () => {
        const text = linkInput.value;
        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
            } else {
                // Fallback
                const ta = document.createElement('textarea');
                ta.value = text;
                ta.style.position = 'fixed';
                ta.style.left = '-9999px';
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
            }
            copyMessageEl.style.display = 'inline';
            setTimeout(()=> copyMessageEl.style.display = 'none', 1000);
        } catch(e) {
            alert('Copy failed. Please copy manually.');
        }
    });
})();
</script>
@stop