@extends('layouts.app')

@section('title', 'খরচ ভাউচার')

@section('styles')
<style>
    .voucher-container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 30px;
        position: relative;
    }
    
    .voucher-header {
        text-align: center;
        border-bottom: 2px dashed #dc3545;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }
    
    .voucher-header h2 {
        color: #dc3545;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    .voucher-number {
        position: absolute;
        top: 30px;
        right: 30px;
        background: #dc3545;
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .form-section {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .form-section-title {
        color: #dc3545;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .amount-input-group .input-group-text {
        background: #dc3545;
        color: white;
        border: none;
    }
    
    .word-amount {
        font-size: 0.9rem;
        color: #dc3545;
        margin-top: 5px;
        padding: 5px 10px;
        background: #ffe6e6;
        border-radius: 5px;
    }
    
    .preview-table th {
        background: #dc3545;
        color: white;
    }
    
    .signature-line {
        border-top: 1px solid #dc3545;
    }
    
    .btn-voucher-primary {
        background: #dc3545;
        color: white;
    }
    
    .btn-voucher-primary:hover {
        background: #c82333;
    }
    
    /* খরচ ক্যাটাগরি আইকন */
    .category-icon {
        width: 40px;
        height: 40px;
        background: #dc3545;
        color: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    
    /* প্রিন্ট স্টাইল */
    @media print {
        .sidebar, .navbar, .footer, .form-actions, .no-print {
            display: none !important;
        }
        
        .main-content {
            margin-left: 0 !important;
            padding-top: 0 !important;
        }
        
        .voucher-container {
            box-shadow: none;
            padding: 15px;
        }
        
        .voucher-number {
            position: static;
            text-align: center;
            margin-bottom: 15px;
        }
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="voucher-container" id="voucherContent">
        <!-- ভাউচার নম্বর -->
        <div class="voucher-number">
            <i class="fas fa-hashtag"></i> {{ $voucherNumber ?? 'EXP-'.date('Ymd').'-001' }}
        </div>
        
        <!-- ভাউচার হেডার -->
        <div class="voucher-header">
            <h2>খরচ ভাউচার</h2>
            <p>আমবাগান যুব কল্যাণ সমিতি</p>
            <p>ফাজিলপুর, মহাদেবপুর, নওগাঁ</p>
        </div>
        
        <form action="{{ route('expenses.store') }}" method="POST" id="expenseForm" onsubmit="return validateForm('expenseForm')">
            @csrf
            
            <!-- মৌলিক তথ্য -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-info-circle"></i> মৌলিক তথ্য
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">ভাউচার তারিখ <span class="text-danger">*</span></label>
                        <input type="date" name="voucher_date" class="form-control" required value="{{ date('Y-m-d') }}">
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">খরচের ধরণ <span class="text-danger">*</span></label>
                        <select name="expense_category" class="form-select select2" required>
                            <option value="">-- নির্বাচন করুন --</option>
                            <option value="office_rent">অফিস ভাড়া</option>
                            <option value="salary">বেতন</option>
                            <option value="utility">ইউটিলিটি বিল</option>
                            <option value="stationery">স্টেশনারি</option>
                            <option value="meeting_expense">মিটিং খরচ</option>
                            <option value="event_expense">অনুষ্ঠান খরচ</option>
                            <option value="travel">ভ্রমণ খরচ</option>
                            <option value="maintenance">রক্ষণাবেক্ষণ</option>
                            <option value="other">অন্যান্য</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">প্রাপকের নাম <span class="text-danger">*</span></label>
                        <input type="text" name="payee_name" class="form-control" required>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">প্রাপকের মোবাইল</label>
                        <input type="text" name="payee_phone" class="form-control">
                    </div>
                </div>
            </div>
            
            <!-- টাকার পরিমাণ -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-money-bill-wave"></i> টাকার পরিমাণ
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">খরচের পরিমাণ <span class="text-danger">*</span></label>
                        <div class="input-group amount-input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="amount" class="form-control" required step="0.01" min="0" 
                                   onkeyup="convertToWords(this.value)" id="amountInput">
                        </div>
                        <div class="word-amount" id="wordAmount">শূন্য টাকা মাত্র</div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">পেমেন্ট মেথড <span class="text-danger">*</span></label>
                        <select name="payment_method" class="form-select" required>
                            <option value="cash">নগদ</option>
                            <option value="bank">ব্যাংক</option>
                            <option value="mobile_banking">মোবাইল ব্যাংকিং</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">ট্রানজেকশন আইডি</label>
                        <input type="text" name="transaction_id" class="form-control" placeholder="যদি থাকে">
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">বিল/রশিদ নম্বর</label>
                        <input type="text" name="bill_number" class="form-control">
                    </div>
                </div>
            </div>
            
            <!-- খরচের বিবরণ -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-file-alt"></i> খরচের বিবরণ
                </div>
                
                <div class="mb-3">
                    <label class="form-label">খরচের উদ্দেশ্য <span class="text-danger">*</span></label>
                    <textarea name="purpose" class="form-control" rows="3" required></textarea>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">বিস্তারিত বিবরণ</label>
                    <textarea name="description" class="form-control" rows="3"></textarea>
                </div>
            </div>
            
            <!-- অনুমোদন তথ্য -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-check-circle"></i> অনুমোদন তথ্য
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">অনুমোদনকারীর নাম</label>
                        <select name="approved_by" class="form-select">
                            <option value="">-- নির্বাচন করুন --</option>
                            @foreach($committeeMembers ?? [] as $member)
                                <option value="{{ $member->id }}">{{ $member->name }} ({{ $member->designation }})</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">অনুমোদনের তারিখ</label>
                        <input type="date" name="approval_date" class="form-control">
                    </div>
                </div>
            </div>
            
            <!-- এটাচমেন্ট -->
            <div class="form-section">
                <div class="form-section-title">
                    <i class="fas fa-paperclip"></i> এটাচমেন্ট
                </div>
                
                <div class="mb-3">
                    <label class="form-label">বিল/রশিদ সংযুক্তি</label>
                    <input type="file" name="attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                    <small class="text-muted">PDF, JPG, JPEG, PNG (সর্বোচ্চ 2MB)</small>
                </div>
            </div>
            
            <!-- প্রিভিউ সেকশন -->
            <div class="form-section preview-section">
                <div class="form-section-title">
                    <i class="fas fa-eye"></i> ভাউচার প্রিভিউ
                </div>
                
                <div class="preview-table">
                    <table class="table table-bordered mb-0">
                        <tr>
                            <th width="30%">ভাউচার নং</th>
                            <td colspan="3" id="previewVoucherNo">{{ $voucherNumber ?? 'EXP-'.date('Ymd').'-001' }}</td>
                        </tr>
                        <tr>
                            <th>তারিখ</th>
                            <td colspan="3" id="previewDate">{{ date('d/m/Y') }}</td>
                        </tr>
                        <tr>
                            <th>খরচের ধরণ</th>
                            <td colspan="3" id="previewCategory">-</td>
                        </tr>
                        <tr>
                            <th>প্রাপকের নাম</th>
                            <td colspan="3" id="previewPayee">-</td>
                        </tr>
                        <tr>
                            <th>পরিমাণ (টাকা)</th>
                            <td colspan="3" id="previewAmount">-</td>
                        </tr>
                        <tr>
                            <th>পেমেন্ট মেথড</th>
                            <td colspan="3" id="previewMethod">-</td>
                        </tr>
                        <tr>
                            <th>উদ্দেশ্য</th>
                            <td colspan="3" id="previewPurpose">-</td>
                        </tr>
                        <tr>
                            <th>বিল নম্বর</th>
                            <td colspan="3" id="previewBillNo">-</td>
                        </tr>
                        <tr>
                            <th>অনুমোদনকারী</th>
                            <td colspan="3" id="previewApprover">-</td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <!-- স্বাক্ষর এলাকা -->
            <div class="signature-area">
                <div class="row">
                    <div class="col-md-3 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">প্রস্তুতকারী</p>
                        <small>{{ Auth::user()->name }}</small>
                    </div>
                    <div class="col-md-3 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">প্রাপক</p>
                        <small id="signaturePayee">-</small>
                    </div>
                    <div class="col-md-3 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">যাচাইকারী</p>
                        <small>অফিসার</small>
                    </div>
                    <div class="col-md-3 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">অনুমোদনকারী</p>
                        <small id="signatureApprover">সভাপতি/সম্পাদক</small>
                    </div>
                </div>
            </div>
            
            <!-- ফর্ম অ্যাকশন বাটন -->
            <div class="form-actions no-print">
                <button type="button" class="btn btn-voucher btn-voucher-success" onclick="previewVoucher()">
                    <i class="fas fa-eye"></i> প্রিভিউ
                </button>
                <button type="button" class="btn btn-voucher btn-voucher-primary" onclick="printVoucher()">
                    <i class="fas fa-print"></i> প্রিন্ট
                </button>
                <button type="submit" class="btn btn-voucher btn-voucher-primary">
                    <i class="fas fa-save"></i> সংরক্ষণ করুন
                </button>
                <a href="{{ route('expenses.index') }}" class="btn btn-voucher btn-voucher-danger">
                    <i class="fas fa-times"></i> বাতিল
                </a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // সংখ্যা থেকে শব্দে রূপান্তর
    function convertToWords(amount) {
        const num = parseFloat(amount);
        if (isNaN(num) || num === 0) {
            document.getElementById('wordAmount').innerText = 'শূন্য টাকা মাত্র';
            return;
        }
        
        const taka = Math.floor(num);
        const paisa = Math.round((num - taka) * 100);
        
        const takaText = numberToBengaliWord(taka);
        const paisaText = paisa > 0 ? ' ও ' + numberToBengaliWord(paisa) + ' পয়সা' : '';
        
        document.getElementById('wordAmount').innerText = takaText + ' টাকা' + paisaText + ' মাত্র';
    }
    
    // বাংলা সংখ্যায় রূপান্তর (সিম্পলিফাইড ভার্সন)
    function numberToBengaliWord(num) {
        if (num === 0) return 'শূন্য';
        
        const bengaliDigits = ['', 'এক', 'দুই', 'তিন', 'চার', 'পাঁচ', 'ছয়', 'সাত', 'আট', 'নয়', 'দশ', 
                              'এগারো', 'বারো', 'তেরো', 'চৌদ্দ', 'পনেরো', 'ষোল', 'সতেরো', 'আঠারো', 'উনিশ', 'বিশ'];
        
        if (num <= 20) return bengaliDigits[num];
        return num.toString(); // আরও বিস্তারিত কনভার্শনের প্রয়োজন
    }
    
    // প্রিভিউ আপডেট
    function updatePreview() {
        document.getElementById('previewVoucherNo').innerText = '{{ $voucherNumber ?? 'EXP-'.date('Ymd').'-001' }}';
        
        const dateInput = document.querySelector('input[name="voucher_date"]');
        if (dateInput.value) {
            const date = new Date(dateInput.value);
            document.getElementById('previewDate').innerText = date.toLocaleDateString('bn-BD');
        }
        
        const categorySelect = document.querySelector('select[name="expense_category"]');
        const categoryText = categorySelect.options[categorySelect.selectedIndex]?.text || '-';
        document.getElementById('previewCategory').innerText = categoryText;
        
        const payeeName = document.querySelector('input[name="payee_name"]').value;
        document.getElementById('previewPayee').innerText = payeeName || '-';
        document.getElementById('signaturePayee').innerText = payeeName || '-';
        
        const amount = document.querySelector('input[name="amount"]').value;
        document.getElementById('previewAmount').innerText = amount ? '৳ ' + parseFloat(amount).toFixed(2) : '-';
        
        const methodSelect = document.querySelector('select[name="payment_method"]');
        const methodText = methodSelect.options[methodSelect.selectedIndex]?.text || '-';
        document.getElementById('previewMethod').innerText = methodText;
        
        const purpose = document.querySelector('textarea[name="purpose"]').value;
        document.getElementById('previewPurpose').innerText = purpose || '-';
        
        const billNo = document.querySelector('input[name="bill_number"]').value;
        document.getElementById('previewBillNo').innerText = billNo || '-';
        
        const approverSelect = document.querySelector('select[name="approved_by"]');
        const approverText = approverSelect.options[approverSelect.selectedIndex]?.text || '-';
        document.getElementById('previewApprover').innerText = approverText;
        document.getElementById('signatureApprover').innerText = approverText || 'সভাপতি/সম্পাদক';
    }
    
    // ইভেন্ট লিসেনার
    document.querySelectorAll('input, select, textarea').forEach(element => {
        element.addEventListener('change', updatePreview);
        element.addEventListener('keyup', updatePreview);
    });
    
    function previewVoucher() {
        updatePreview();
        document.querySelector('.preview-section').scrollIntoView({ behavior: 'smooth' });
    }
    
    function printVoucher() {
        window.printContent('voucherContent');
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        updatePreview();
    });
</script>
@endsection