@extends('layouts.app')

@section('title', 'সঞ্চয় সংগ্রহ - আমবাগান যুব কল্যাণ সমিতি')

@section('styles')
<style>
    .member-info-card {
        border-left: 5px solid var(--primary-color);
        background: linear-gradient(to right, #f8f9fa, #ffffff);
    }
    
    .form-section {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .section-title {
        color: var(--primary-color);
        border-bottom: 2px solid var(--accent-color);
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-weight: 600;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    
    .info-box {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .info-label {
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 5px;
    }
    
    .info-value {
        color: var(--primary-color);
        font-size: 1.1em;
    }
</style>
@endsection

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-light">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">ড্যাশবোর্ড</a></li>
        <li class="breadcrumb-item"><a href="{{ route('savings.index') }}">সঞ্চয় ব্যবস্থাপনা</a></li>
        <li class="breadcrumb-item active">সঞ্চয় সংগ্রহ</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="form-section">
                <h4 class="section-title">
                    <i class="fas fa-money-bill-wave me-2"></i>মাসিক সঞ্চয় সংগ্রহ ফর্ম
                </h4>
                
                @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
                
                <form action="{{ route('savings.store') }}" method="POST" id="savingsForm">
                    @csrf
                    
                    <!-- সদস্য নির্বাচন -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="info-box">
                                <h6 class="info-label">
                                    <i class="fas fa-user me-2"></i>সদস্য নির্বাচন করুন
                                </h6>
                                <select name="member_id" id="member_id" class="form-select select2 @error('member_id') is-invalid @enderror" required data-placeholder="সদস্য নির্বাচন করুন">
                                    <option value=""></option>
                                    @foreach($members as $member)
                                        <option value="{{ $member->member_id }}" 
                                            {{ old('member_id', $selectedMember?->member_id) == $member->member_id ? 'selected' : '' }}>
                                            {{ $member->member_id }} - {{ $member->name }} - {{ $member->phone }}
                                            @if($member->monthly_saving)
                                                (সঞ্চয়: {{ $member->monthly_saving }} টাকা)
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('member_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted mt-2 d-block">সদস্য আইডি, নাম বা মোবাইল নম্বর দিয়ে খুঁজুন</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- নির্বাচিত সদস্যের তথ্য -->
                    <div class="row mb-4" id="memberInfo" style="display: none;">
                        <div class="col-md-12">
                            <div class="card member-info-card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <p class="mb-2"><strong>নাম:</strong> <span id="memberName">-</span></p>
                                            <p class="mb-2"><strong>পিতা/স্বামী:</strong> <span id="memberFather">-</span></p>
                                            <p class="mb-2"><strong>ঠিকানা:</strong> <span id="memberAddress">-</span></p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-2"><strong>মোবাইল:</strong> <span id="memberPhone">-</span></p>
                                            <p class="mb-2"><strong>ইমেইল:</strong> <span id="memberEmail">-</span></p>
                                            <p class="mb-2"><strong>পেশা:</strong> <span id="memberProfession">-</span></p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-2"><strong>মাসিক সঞ্চয়:</strong> <span id="memberMonthlySaving">600</span> টাকা</p>
                                            <p class="mb-2"><strong>সর্বশেষ সঞ্চয়:</strong> <span id="lastSaving">-</span></p>
                                            <p class="mb-2"><strong>মোট সঞ্চয়:</strong> <span id="totalSaving">-</span> টাকা</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- সঞ্চয়ের বিবরণ -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="month_year" class="form-label required-field">মাস-বছর</label>
                            <input type="month" name="month_year" id="month_year" 
                                class="form-control @error('month_year') is-invalid @enderror" 
                                value="{{ old('month_year', $currentMonthYear) }}" 
                                min="2024-01" max="{{ date('Y-m') }}" required>
                            @error('month_year')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">যে মাসের সঞ্চয় সংগ্রহ করা হচ্ছে</small>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="amount" class="form-label required-field">সঞ্চয়ের পরিমাণ (টাকা)</label>
                            <div class="input-group">
                                <input type="number" name="amount" id="amount" 
                                    class="form-control @error('amount') is-invalid @enderror" 
                                    value="{{ old('amount', 600) }}" 
                                    min="600" step="1" required>
                                <span class="input-group-text">টাকা</span>
                            </div>
                            @error('amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">ন্যূনতম ৬০০ টাকা</small>
                        </div>
                    </div>
                    
                    <!-- পেমেন্ট তথ্য -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="payment_date" class="form-label required-field">পরিশোধের তারিখ</label>
                            <input type="date" name="payment_date" id="payment_date" 
                                class="form-control @error('payment_date') is-invalid @enderror" 
                                value="{{ old('payment_date', date('Y-m-d')) }}" required>
                            @error('payment_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="payment_method" class="form-label required-field">পরিশোধের মাধ্যম</label>
                            <select name="payment_method" id="payment_method" 
                                class="form-select @error('payment_method') is-invalid @enderror" required>
                                <option value="">নির্বাচন করুন</option>
                                <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>নগদ</option>
                                <option value="bank" {{ old('payment_method') == 'bank' ? 'selected' : '' }}>ব্যাংক চেক/ডিডি</option>
                                <option value="mobile_banking" {{ old('payment_method') == 'mobile_banking' ? 'selected' : '' }}>মোবাইল ব্যাংকিং</option>
                            </select>
                            @error('payment_method')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- লেনদেন তথ্য -->
                    <div class="row" id="transactionFields" style="display: none;">
                        <div class="col-md-6 mb-3">
                            <label for="transaction_id" class="form-label">লেনদেন/চেক নম্বর</label>
                            <input type="text" name="transaction_id" id="transaction_id" 
                                class="form-control @error('transaction_id') is-invalid @enderror" 
                                value="{{ old('transaction_id') }}" 
                                placeholder="যেমন: CHK12345, TRX789456">
                            @error('transaction_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="bank_name" class="form-label">ব্যাংক/সেবার নাম</label>
                            <input type="text" name="bank_name" id="bank_name" 
                                class="form-control" 
                                value="{{ old('bank_name') }}" 
                                placeholder="যেমন: সোনালী ব্যাংক, bKash">
                        </div>
                    </div>
                    
                    <!-- অতিরিক্ত তথ্য -->
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="remarks" class="form-label">মন্তব্য/নোট</label>
                            <textarea name="remarks" id="remarks" rows="3" 
                                class="form-control @error('remarks') is-invalid @enderror" 
                                placeholder="যেকোনো অতিরিক্ত তথ্য">{{ old('remarks') }}</textarea>
                            @error('remarks')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- বকেয়া সঞ্চয় চেক -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="alert alert-info" id="overdueAlert" style="display: none;">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>বকেয়া সঞ্চয়:</strong> এই সদস্যের <span id="overdueMonths">0</span> মাসের সঞ্চয় বকেয়া আছে।
                                <button type="button" class="btn btn-sm btn-outline-primary ms-2" id="addOverdueBtn" style="display: none;">
                                    বকেয়া সঞ্চয় যোগ করুন
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- বকেয়া সঞ্চয় ফর্ম (গোপন) -->
                    <div id="overdueForm" style="display: none;">
                        <div class="card border-primary mb-3">
                            <div class="card-header bg-primary text-white">
                                <i class="fas fa-clock me-2"></i>বকেয়া সঞ্চয় সংযুক্ত করুন
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="overdue_month_year" class="form-label">বকেয়া মাস</label>
                                        <select name="overdue_month_year" id="overdue_month_year" class="form-select">
                                            <option value="">নির্বাচন করুন</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="overdue_amount" class="form-label">পরিমাণ</label>
                                        <input type="number" name="overdue_amount" id="overdue_amount" 
                                            class="form-control" value="600" min="600" step="1">
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-secondary" id="cancelOverdueBtn">
                                    বকেয়া যোগ বাতিল করুন
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- সাবমিট বাটন -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" onclick="history.back()">
                                    <i class="fas fa-arrow-left me-2"></i>পিছনে যান
                                </button>
                                
                                <div>
                                    <button type="reset" class="btn btn-warning me-2">
                                        <i class="fas fa-redo me-2"></i>রিসেট
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>সঞ্চয় সংগ্রহ করুন
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- ডান পাশের তথ্য প্যানেল -->
        <div class="col-md-4">
            <!-- মাসিক সারাংশ -->
            <div class="form-section">
                <h5 class="section-title">
                    <i class="fas fa-chart-bar me-2"></i>এই মাসের সারাংশ
                </h5>
                
                <div class="info-box">
                    <div class="row">
                        <div class="col-6">
                            <div class="info-label">মোট সঞ্চয়</div>
                            <div class="info-value" id="monthTotal">0 টাকা</div>
                        </div>
                        <div class="col-6">
                            <div class="info-label">সদস্য সংখ্যা</div>
                            <div class="info-value" id="monthMembers">0 জন</div>
                        </div>
                    </div>
                </div>
                
                <div class="info-box">
                    <div class="info-label">আজকের সংগ্রহ</div>
                    <div class="info-value" id="todayCollection">0 টাকা</div>
                    <small class="text-muted">আজ {{ date('d-m-Y') }} তারিখ পর্যন্ত</small>
                </div>
                
                <div class="d-grid gap-2 mt-3">
                    <a href="{{ route('savings.overdue') }}" class="btn btn-outline-danger">
                        <i class="fas fa-clock me-2"></i>বকেয়া সঞ্চয় দেখুন
                    </a>
                    <a href="{{ route('savings.collect-bulk') }}" class="btn btn-outline-primary">
                        <i class="fas fa-users me-2"></i>বাল্ক সংগ্রহ করুন
                    </a>
                </div>
            </div>
            
            <!-- দ্রুত গাইড -->
            <div class="form-section">
                <h5 class="section-title">
                    <i class="fas fa-lightbulb me-2"></i>নির্দেশনা
                </h5>
                
                <div class="alert alert-light border">
                    <ol class="mb-0 ps-3">
                        <li class="mb-2">প্রথমে সদস্য নির্বাচন করুন</li>
                        <li class="mb-2">তারপর মাস-বছর নির্বাচন করুন</li>
                        <li class="mb-2">পরিমাণ স্বয়ংক্রিয়ভাবে লোড হবে</li>
                        <li class="mb-2">পরিশোধের মাধ্যম নির্বাচন করুন</li>
                        <li>ফর্ম সাবমিট করুন</li>
                    </ol>
                </div>
                
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>দ্রষ্টব্য:</strong> একই সদস্যের একই মাসে একাধিকবার সঞ্চয় নেওয়া যাবে না।
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // সিলেক্ট2 ইনিশিয়ালাইজ
    $('#member_id').select2({
        placeholder: "সদস্য নির্বাচন করুন",
        allowClear: true,
        width: '100%'
    });
    
    // পেমেন্ট মাধ্যম পরিবর্তনে লেনদেন ফিল্ড দেখানো
    $('#payment_method').change(function() {
        if ($(this).val() === 'bank' || $(this).val() === 'mobile_banking') {
            $('#transactionFields').slideDown();
        } else {
            $('#transactionFields').slideUp();
        }
    });
    
    // মাস-বছর নির্বাচন চেক
    $('#month_year').change(function() {
        checkExistingSaving();
    });
    
    // সদস্য নির্বাচনে তথ্য লোড
    $('#member_id').change(function() {
        const memberId = $(this).val();
        
        if (memberId) {
            loadMemberInfo(memberId);
            loadOverdueSavings(memberId);
            loadMonthlyStats();
        } else {
            $('#memberInfo').slideUp();
            $('#overdueAlert').slideUp();
        }
    });
    
    // বকেয়া সঞ্চয় যোগ বাটন
    $('#addOverdueBtn').click(function() {
        $('#overdueForm').slideDown();
        $(this).hide();
        loadOverdueMonths();
    });
    
    // বকেয়া যোগ বাতিল
    $('#cancelOverdueBtn').click(function() {
        $('#overdueForm').slideUp();
        $('#addOverdueBtn').show();
    });
    
    // পেইজ লোডে মাসিক তথ্য লোড
    loadMonthlyStats();
    
    // নির্বাচিত সদস্য থাকলে তার তথ্য লোড
    @if($selectedMember)
        loadMemberInfo('{{ $selectedMember->member_id }}');
        loadOverdueSavings('{{ $selectedMember->member_id }}');
    @endif
    
    // ফর্ম সাবমিশন ভ্যালিডেশন
    $('#savingsForm').submit(function(e) {
        const memberId = $('#member_id').val();
        const monthYear = $('#month_year').val();
        
        if (!memberId) {
            e.preventDefault();
            alert('দয়া করে একজন সদস্য নির্বাচন করুন।');
            $('#member_id').focus();
            return false;
        }
        
        if (!monthYear) {
            e.preventDefault();
            alert('দয়া করে মাস-বছর নির্বাচন করুন।');
            $('#month_year').focus();
            return false;
        }
    });
});

// সদস্য তথ্য লোড ফাংশন
function loadMemberInfo(memberId) {
    $.ajax({
        url: '/api/member-info/' + memberId,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.success) {
                const member = response.member;
                
                // তথ্য সেট করুন
                $('#memberName').text(member.name);
                $('#memberFather').text(member.father_name || '-');
                $('#memberAddress').text(member.address || '-');
                $('#memberPhone').text(member.phone || '-');
                $('#memberEmail').text(member.email || '-');
                $('#memberProfession').text(member.profession || '-');
                $('#memberMonthlySaving').text(member.monthly_saving || '600');
                
                // সর্বশেষ সঞ্চয়
                if (response.last_saving) {
                    $('#lastSaving').text(response.last_saving.month_year + ' (' + response.last_saving.amount + ' টাকা)');
                } else {
                    $('#lastSaving').text('কোনো সঞ্চয় নেই');
                }
                
                // মোট সঞ্চয়
                $('#totalSaving').text(response.total_savings || '0');
                
                // পরিমাণ ইনপুট সেট করুন
                $('#amount').val(member.monthly_saving || 600);
                
                // সদস্য তথ্য দেখান
                $('#memberInfo').slideDown();
            }
        },
        error: function() {
            alert('সদস্য তথ্য লোড করতে সমস্যা হয়েছে।');
        }
    });
}

// বকেয়া সঞ্চয় চেক ফাংশন
function loadOverdueSavings(memberId) {
    const currentMonth = '{{ date("Y-m") }}';
    
    $.ajax({
        url: '/api/overdue-savings/' + memberId,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.overdue_count > 0) {
                $('#overdueMonths').text(response.overdue_count);
                $('#overdueAlert').slideDown();
                $('#addOverdueBtn').show();
            } else {
                $('#overdueAlert').slideUp();
                $('#addOverdueBtn').hide();
            }
        }
    });
}

// বকেয়া মাস লোড
function loadOverdueMonths() {
    const memberId = $('#member_id').val();
    const currentMonth = '{{ date("Y-m") }}';
    
    $.ajax({
        url: '/api/overdue-months/' + memberId,
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            const select = $('#overdue_month_year');
            select.empty();
            select.append('<option value="">নির্বাচন করুন</option>');
            
            if (response.months.length > 0) {
                response.months.forEach(function(month) {
                    select.append('<option value="' + month + '">' + month + '</option>');
                });
            }
        }
    });
}

// বিদ্যমান সঞ্চয় চেক
function checkExistingSaving() {
    const memberId = $('#member_id').val();
    const monthYear = $('#month_year').val();
    
    if (!memberId || !monthYear) return;
    
    $.ajax({
        url: '/api/check-existing-saving',
        type: 'GET',
        data: {
            member_id: memberId,
            month_year: monthYear
        },
        dataType: 'json',
        success: function(response) {
            if (response.exists) {
                alert('এই সদস্য ইতিমধ্যে ' + monthYear + ' মাসের সঞ্চয় দিয়েছেন। দয়া করে অন্য মাস নির্বাচন করুন।');
                $('#month_year').val('');
            }
        }
    });
}

// মাসিক সারাংশ লোড
function loadMonthlyStats() {
    const currentMonth = '{{ date("Y-m") }}';
    
    $.ajax({
        url: '/api/monthly-savings-stats',
        type: 'GET',
        data: { month_year: currentMonth },
        dataType: 'json',
        success: function(response) {
            if (response) {
                $('#monthTotal').text(response.total_amount + ' টাকা');
                $('#monthMembers').text(response.total_members + ' জন');
                $('#todayCollection').text(response.today_collection + ' টাকা');
            }
        }
    });
}
</script>
@endsection