@extends('layouts.app')

@section('content')
<div style="margin-top: 2rem; max-width: 850px; margin-left: auto; margin-right: auto;">
    <h1 style="margin-bottom: 2rem;">Create New Cheque</h1>

    <div style="display: flex; flex-direction: column; gap: 2rem; align-items: center;">
        <div class="card" id="preview-wrapper" style="width: 100%; max-width: 850px; background: #f3f4f6; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 450px; padding: 3rem 1.5rem;">
            <div style="margin-bottom: 2rem; border-bottom: 1px solid #e5e7eb; width: 100%; padding-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem;">
                <div style="background: #EEF2FF; padding: 0.5rem; border-radius: 50%; color: #4F46E5;">
                    <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                </div>
                <h3 style="margin:0;">Live Cheque Preview</h3>
            </div>
            <div id="no-bank-message" style="color: #6b7280; text-align: center;">
                <p style="font-size: 1.2rem; font-weight: bold;">Cheque Preview</p>
                <p>Select a bank to see how the cheque will look.</p>
            </div>

            <div id="cheque-preview" style="display: none; position: relative; width: 800px; height: 320px; border-radius: 8px; overflow: hidden; background: white; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; margin: 20px;">
                <img id="preview-template" src="" style="width: 100%; height: 100%; display: block; object-fit: fill;">
                
                <!-- Date -->
                <div id="preview-date" style="position: absolute; white-space: nowrap; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;"></div>

                <!-- Payee -->
                <div id="preview-payee" style="position: absolute; white-space: nowrap; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;"></div>

                <!-- Amount Words -->
                <div id="preview-words" style="position: absolute; white-space: normal; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; width: 600px; line-height: 2.2; text-align: left;"></div>

                <!-- Amount Figures -->
                <div id="preview-amount" style="position: absolute; white-space: nowrap; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;"></div>

                <!-- AC Payee -->
                <div id="preview-ac-payee" style="display: none; position: absolute; transform: rotate(-35deg); border-top: 2px solid black; border-bottom: 2px solid black; padding: 2px; font-family: Arial, sans-serif; font-weight: bold; font-size: 16px;">
                    A/C PAYEE ONLY
                </div>
            </div>
        </div>

        <div class="card" style="width: 100%; max-width: 800px;">
            <form action="{{ route('cheques.store') }}" method="POST">
                @csrf

                <div class="grid grid-cols-2" style="grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div style="margin-bottom: 1rem;">
                        <label for="company_id" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Issuing Company</label>
                        <select name="company_id" id="company_id" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                            <option value="">-- Select Company --</option>
                            @foreach($companies as $company)
                                <option value="{{ $company->id }}">{{ $company->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div style="margin-bottom: 1rem;">
                        <label for="cheque_number" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Cheque Number</label>
                        <input type="text" name="cheque_number" id="cheque_number" required placeholder="e.g. 123456" style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                    </div>
                </div>
                
                <div style="margin-bottom: 1rem;">
                    <label for="bank_id" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Select Bank</label>
                    <select name="bank_id" id="bank_id" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                        <option value="">-- Choose Bank --</option>
                        @foreach($banks as $bank)
                            <option value="{{ $bank->id }}">{{ $bank->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div style="margin-bottom: 1rem;">
                    <label for="payee_id" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Select Payee</label>
                    <select name="payee_id" id="payee_id" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                        <option value="">-- Choose Payee --</option>
                        @foreach($payees as $payee)
                            <option value="{{ $payee->id }}">{{ $payee->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div style="margin-bottom: 1rem;">
                    <label for="cheque_date" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Cheque Date</label>
                    <input type="date" name="cheque_date" id="cheque_date" value="{{ date('Y-m-d') }}" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                </div>

                <div style="margin-bottom: 1rem;">
                    <label for="amount" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Amount (AED)</label>
                    <input type="number" step="0.01" name="amount" id="amount" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                </div>

                <div style="margin-bottom: 1rem;">
                    <label for="memo" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Memo (Optional)</label>
                    <input type="text" name="memo" id="memo" placeholder="Invoice #, etc." style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                </div>

                <div style="margin-bottom: 1rem;">
                    <label for="status" style="display:block; font-weight:bold; margin-bottom:0.5rem;">Cheque Status</label>
                    <select name="status" id="status" required style="width: 100%; padding: 0.5rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;">
                        <option value="draft">Draft</option>
                        <option value="issued">Issued</option>
                        <option value="in_hand">In Hand</option>
                        <option value="released">Released</option>
                        <option value="cleared">Cleared</option>
                        <option value="bounced">Bounced</option>
                        <option value="cancelled">Cancelled</option>
                    </select>
                </div>

                <div style="margin-bottom: 1.5rem;">
                <label style="display: flex; align-items: center; cursor: pointer; font-weight: bold;">
                    <input type="checkbox" name="is_ac_payee" value="1" checked style="width: 20px; height: 20px; margin-right: 10px;">
                    A/C Payee Only (Crossing)
                </label>
            </div>

            <div style="margin-bottom: 1.5rem; background: #FEF3C7; padding: 1rem; border-radius: 0.5rem; border-left: 4px solid #F59S0B;">
                <label style="display: flex; align-items: center; cursor: pointer; font-weight: bold;">
                    <input type="checkbox" name="is_security_cheque" id="is_security_cheque" value="1" style="width: 20px; height: 20px; margin-right: 10px;">
                    Security/Guarantee Cheque
                </label>
                <p style="font-size: 0.75rem; color: #92400E; margin-top: 0.5rem; margin-bottom: 0;">Check this for guarantee cheques. Amount and date become optional.</p>
                </div>

            <button type="submit" class="btn" style="width: 100%; padding: 0.75rem;">Create Cheque</button>
            </form>
        </div>
    </div>
</div>

<script>
    const bankSelect = document.getElementById('bank_id');
    const payeeSelect = document.getElementById('payee_id');
    const amountInput = document.getElementById('amount');
    const dateInput = document.getElementById('cheque_date');
    const acPayeeCheckbox = document.querySelector('input[name="is_ac_payee"]');
    const isSecurityCheckbox = document.getElementById('is_security_cheque');

    const previewContainer = document.getElementById('cheque-preview');
    const noBankMsg = document.getElementById('no-bank-message');
    const templateImg = document.getElementById('preview-template');

    let currentCoords = {};

    function updatePreviewPositions() {
        const fields = {
            'date': document.getElementById('preview-date'),
            'payee': document.getElementById('preview-payee'),
            'amount_words': document.getElementById('preview-words'),
            'amount_figures': document.getElementById('preview-amount'),
            'ac_payee': document.getElementById('preview-ac-payee')
        };

        for (let key in fields) {
            if (currentCoords && currentCoords[key] && fields[key]) {
                fields[key].style.left = currentCoords[key].x + 'px';
                fields[key].style.top = currentCoords[key].y + 'px';
                fields[key].style.display = 'block';
            }
        }
        
        // AC Payee special handling
        if (acPayeeCheckbox && !acPayeeCheckbox.checked) {
            const acPayeeEl = document.getElementById('preview-ac-payee');
            if (acPayeeEl) acPayeeEl.style.display = 'none';
        }
    }

    if (bankSelect) {
        bankSelect.addEventListener('change', function() {
            const bankId = this.value;
            if (!bankId) {
                if (previewContainer) previewContainer.style.display = 'none';
                if (noBankMsg) noBankMsg.style.display = 'block';
                return;
            }

            fetch(`{{ route('api.bank-info') }}?bank_id=${bankId}`)
                .then(res => {
                    if (!res.ok) throw new Error('Network response was not ok');
                    return res.json();
                })
                .then(data => {
                    if (data.template_image) {
                        if (templateImg) templateImg.src = data.template_image;
                        currentCoords = data.coords || {};
                        if (previewContainer) previewContainer.style.display = 'block';
                        if (noBankMsg) noBankMsg.style.display = 'none';
                        updatePreviewPositions();
                        updateAllFields();
                    } else {
                        if (previewContainer) previewContainer.style.display = 'none';
                        if (noBankMsg) {
                            noBankMsg.style.display = 'block';
                            noBankMsg.innerHTML = '<p>No template configured for this bank.</p>';
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching bank info:', error);
                    if (noBankMsg) {
                        noBankMsg.style.display = 'block';
                        noBankMsg.innerHTML = '<p style="color:red;">Error loading bank template.</p>';
                    }
                });
        });
    }

    function updateAllFields() {
        // Payee
        if (payeeSelect && payeeSelect.selectedIndex >= 0) {
            const payeeName = payeeSelect.options[payeeSelect.selectedIndex]?.text || '';
            const previewPayee = document.getElementById('preview-payee');
            if (previewPayee) {
                previewPayee.textContent = (payeeName && payeeName !== '-- Choose Payee --') ? `*** ${payeeName} ***` : '';
            }
        }

        // Date
        const previewDate = document.getElementById('preview-date');
        if (dateInput && previewDate) {
            const dateVal = dateInput.value;
            if (dateVal) {
                const d = new Date(dateVal);
                previewDate.textContent = `${String(d.getDate()).padStart(2, '0')}-${String(d.getMonth() + 1).padStart(2, '0')}-${d.getFullYear()}`;
            } else {
                previewDate.textContent = '';
            }
        }

        // Amount Figures and Words
        const previewAmount = document.getElementById('preview-amount');
        const previewWords = document.getElementById('preview-words');
        
        if (amountInput) {
            const amount = amountInput.value;
            if (amount && parseFloat(amount) > 0) {
                if (previewAmount) {
                    previewAmount.textContent = `*** ${parseFloat(amount).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} ***`;
                }
                
                fetch(`{{ route('api.number-to-words') }}?amount=${amount}`)
                    .then(res => {
                        if (!res.ok) throw new Error('Network response was not ok');
                        return res.json();
                    })
                    .then(data => {
                        if (previewWords) previewWords.innerHTML = data.words || '';
                    })
                    .catch(error => {
                        console.error('Error fetching number to words:', error);
                        if (previewWords) previewWords.innerHTML = '<span style="color:red;">Error</span>';
                    });
            } else {
                if (previewAmount) previewAmount.textContent = '';
                if (previewWords) previewWords.innerHTML = '';
            }
        }

        // AC Payee
        const previewAcPayee = document.getElementById('preview-ac-payee');
        if (previewAcPayee && acPayeeCheckbox) {
            previewAcPayee.style.display = acPayeeCheckbox.checked ? 'block' : 'none';
        }
    }

    if (payeeSelect) payeeSelect.addEventListener('change', updateAllFields);
    if (dateInput) dateInput.addEventListener('change', updateAllFields);
    if (amountInput) amountInput.addEventListener('input', updateAllFields);
    if (acPayeeCheckbox) acPayeeCheckbox.addEventListener('change', updateAllFields);

    if (isSecurityCheckbox) {
        isSecurityCheckbox.addEventListener('change', function() {
            if (this.checked) {
                if (amountInput) amountInput.removeAttribute('required');
                if (dateInput) dateInput.removeAttribute('required');
            } else {
                if (amountInput) amountInput.setAttribute('required', 'required');
                if (dateInput) dateInput.setAttribute('required', 'required');
            }
        });
    }
</script>
@endsection