@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 #1a5f7a;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }
    
    .voucher-header h2 {
        color: #1a5f7a;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    .voucher-header p {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 0;
    }
    
    .voucher-number {
        position: absolute;
        top: 30px;
        right: 30px;
        background: #1a5f7a;
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .voucher-number i {
        margin-right: 5px;
    }
    
    .form-section {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .form-section-title {
        color: #1a5f7a;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .form-section-title i {
        margin-right: 8px;
    }
    
    .amount-input-group {
        position: relative;
    }
    
    .amount-input-group .input-group-text {
        background: #1a5f7a;
        color: white;
        border: none;
    }
    
    .word-amount {
        font-size: 0.9rem;
        color: #1a5f7a;
        margin-top: 5px;
        padding: 5px 10px;
        background: #e8f4f8;
        border-radius: 5px;
    }
    
    .preview-table {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .preview-table th {
        background: #1a5f7a;
        color: white;
        font-weight: 600;
        padding: 12px;
    }
    
    .preview-table td {
        padding: 12px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .signature-area {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #dee2e6;
    }
    
    .signature-box {
        text-align: center;
    }
    
    .signature-line {
        margin-top: 40px;
        border-top: 1px solid #000;
        width: 150px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .form-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 30px;
    }
    
    .btn-voucher {
        padding: 12px 30px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .btn-voucher i {
        margin-right: 8px;
    }
    
    .btn-voucher-primary {
        background: #1a5f7a;
        color: white;
        border: none;
    }
    
    .btn-voucher-primary:hover {
        background: #154c63;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(26,95,122,0.3);
    }
    
    .btn-voucher-success {
        background: #57cc99;
        color: white;
        border: none;
    }
    
    .btn-voucher-success:hover {
        background: #45b584;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(87,204,153,0.3);
    }
    
    .btn-voucher-danger {
        background: #ff6b6b;
        color: white;
        border: none;
    }
    
    .btn-voucher-danger:hover {
        background: #ff5252;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255,107,107,0.3);
    }
    
    /* প্রিন্ট স্টাইল */
    @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 ?? 'INV-'.date('Ymd').'-001' }}
        </div>
        
        <!-- ভাউচার হেডার -->
        <div class="voucher-header">
            <h2>জমা ভাউচার</h2>
            <p>আমবাগান যুব কল্যাণ সমিতি</p>
            <p>ফাজিলপুর, মহাদেবপুর, নওগাঁ</p>
        </div>
        
        <form action="{{ route('incomes.store') }}" method="POST" id="incomeForm" onsubmit="return validateForm('incomeForm')">
            @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="income_type" class="form-select select2" required>
                            <option value="">-- নির্বাচন করুন --</option>
                            <option value="membership_fee">সদস্য ফি</option>
                            <option value="monthly_saving">মাসিক সঞ্চয়</option>
                            <option value="loan_interest">ঋণের সুদ</option>
                            <option value="loan_installment">ঋণের কিস্তি</option>
                            <option value="donation">দান</option>
                            <option value="event_fee">অনুষ্ঠান ফি</option>
                            <option value="late_fee">বিলম্ব ফি</option>
                            <option value="other">অন্যান্য</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">সদস্য (যদি প্রযোজ্য)</label>
                        <select name="member_id" class="form-select select2">
                            <option value="">-- সদস্য নির্বাচন করুন --</option>
                            @foreach($members ?? [] as $member)
                                <option value="{{ $member->id }}">{{ $member->name }} ({{ $member->member_id }})</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">মাস/বছর (সঞ্চয়ের জন্য)</label>
                        <input type="month" name="month_year" 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="received_from" class="form-control" value="{{ Auth::user()->name }}">
                    </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="description" class="form-control" rows="3" required></textarea>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">মন্তব্য</label>
                    <textarea name="remarks" class="form-control" rows="2"></textarea>
                </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 ?? 'INV-'.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="previewType">-</td>
                        </tr>
                        <tr>
                            <th>সদস্যের নাম</th>
                            <td colspan="3" id="previewMember">-</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="previewDescription">-</td>
                        </tr>
                        <tr>
                            <th>ট্রানজেকশন আইডি</th>
                            <td colspan="3" id="previewTransactionId">-</td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <!-- স্বাক্ষর এলাকা -->
            <div class="signature-area">
                <div class="row">
                    <div class="col-md-4 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">প্রস্তুতকারী</p>
                        <small>{{ Auth::user()->name }}</small>
                    </div>
                    <div class="col-md-4 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">যাচাইকারী</p>
                        <small>অফিসার</small>
                    </div>
                    <div class="col-md-4 signature-box">
                        <div class="signature-line"></div>
                        <p class="mb-0">অনুমোদনকারী</p>
                        <small>সভাপতি/সম্পাদক</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('incomes.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 ones = ['', 'এক', 'দুই', 'তিন', 'চার', 'পাঁচ', 'ছয়', 'সাত', 'আট', 'নয়', 'দশ', 
                     'এগারো', 'বারো', 'তেরো', 'চৌদ্দ', 'পনেরো', 'ষোল', 'সতেরো', 'আঠারো', 'উনিশ', 'বিশ'];
        const tens = ['', 'দশ', 'বিশ', 'ত্রিশ', 'চল্লিশ', 'পঞ্চাশ', 'ষাট', 'সত্তর', 'আশি', 'নব্বই'];
        const hundreds = 'শত';
        const thousands = 'হাজার';
        const lakhs = 'লাখ';
        const crores = 'কোটি';
        
        // এই ফাংশনটি আরও বিস্তারিত করতে হবে
        return num.toString();
    }
    
    // প্রিভিউ আপডেট
    function updatePreview() {
        // ভাউচার নং
        document.getElementById('previewVoucherNo').innerText = '{{ $voucherNumber ?? 'INV-'.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 typeSelect = document.querySelector('select[name="income_type"]');
        const typeText = typeSelect.options[typeSelect.selectedIndex]?.text || '-';
        document.getElementById('previewType').innerText = typeText;
        
        // সদস্যের নাম
        const memberSelect = document.querySelector('select[name="member_id"]');
        const memberText = memberSelect.options[memberSelect.selectedIndex]?.text || '-';
        document.getElementById('previewMember').innerText = memberText;
        
        // পরিমাণ
        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 description = document.querySelector('textarea[name="description"]').value;
        document.getElementById('previewDescription').innerText = description || '-';
        
        // ট্রানজেকশন আইডি
        const transactionId = document.querySelector('input[name="transaction_id"]').value;
        document.getElementById('previewTransactionId').innerText = transactionId || '-';
    }
    
    // ইভেন্ট লিসেনার
    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