@extends('layouts.app')

@section('title', 'প্রোফাইল')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <!-- সাইডবার প্রোফাইল -->
            <div class="card shadow mb-4">
                <div class="card-body text-center">
                    <div class="profile-img-container mb-3">
                        <img src="{{ $member->photo_url }}" 
                             alt="{{ $member->name }}" 
                             class="rounded-circle border"
                             style="width: 150px; height: 150px; object-fit: cover;">
                        <div class="mt-2">
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#photoModal">
                                <i class="fas fa-camera"></i> ছবি পরিবর্তন
                            </button>
                        </div>
                    </div>
                    
                    <h4 class="card-title">{{ $member->name }}</h4>
                    <p class="text-muted">
                        <i class="fas fa-id-card"></i> {{ $member->member_id }}
                    </p>
                    
                    <div class="row text-start mt-4">
                        <div class="col-12 mb-2">
                            <strong><i class="fas fa-phone"></i> ফোন:</strong>
                            <a href="{{ $member->phone_link }}" class="text-decoration-none">
                                {{ $member->formatted_phone }}
                            </a>
                        </div>
                        
                        @if($member->email)
                        <div class="col-12 mb-2">
                            <strong><i class="fas fa-envelope"></i> ইমেইল:</strong>
                            <a href="{{ $member->email_link }}" class="text-decoration-none">
                                {{ $member->email }}
                            </a>
                        </div>
                        @endif
                        
                        <div class="col-12 mb-2">
                            <strong><i class="fas fa-map-marker-alt"></i> ঠিকানা:</strong>
                            <p class="mb-0">{{ $member->present_address }}</p>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <span class="badge {{ $member->status_class }}">{{ $member->status_in_bangla }}</span>
                        <span class="badge {{ $member->approval_status_class }}">{{ $member->approval_status_in_bangla }}</span>
                        <span class="badge {{ $member->form_fee_status_class }}">{{ $member->form_fee_status_in_bangla }}</span>
                    </div>
                </div>
            </div>

            <!-- দ্রুত পরিসংখ্যান -->
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-pie"></i> দ্রুত পরিসংখ্যান
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border rounded p-3 bg-light">
                                <h5 class="text-success">৳{{ number_format($member->total_savings, 2) }}</h5>
                                <small class="text-muted">মোট সঞ্চয়</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="border rounded p-3 bg-light">
                                <h5 class="text-danger">৳{{ number_format($member->total_loan_amount, 2) }}</h5>
                                <small class="text-muted">মোট ঋণ</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-3 bg-light">
                                <h5 class="text-info">৳{{ number_format($member->monthly_saving, 2) }}</h5>
                                <small class="text-muted">মাসিক সঞ্চয়</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-3 bg-light">
                                <h5 class="text-warning">{{ $member->membership_duration }}</h5>
                                <small class="text-muted">সদস্যকাল</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- সাম্প্রতিক নোটিশ -->
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-bullhorn"></i> সাম্প্রতিক নোটিশ
                    </h6>
                </div>
                <div class="card-body">
                    @forelse($latestNotices as $notice)
                    <div class="mb-3 pb-3 border-bottom">
                        <h6 class="font-weight-bold">{{ $notice->title }}</h6>
                        <p class="text-muted small mb-1">
                            {{ Str::limit($notice->content, 100) }}
                        </p>
                        <small class="text-muted">
                            <i class="far fa-clock"></i> {{ $notice->created_at->diffForHumans() }}
                        </small>
                    </div>
                    @empty
                    <div class="text-center text-muted">
                        <i class="far fa-bell-slash fa-2x mb-2"></i>
                        <p>কোন নোটিশ পাওয়া যায়নি</p>
                    </div>
                    @endforelse
                    
                    @if(count($latestNotices) > 0)
                    <div class="text-center mt-2">
                        <a href="{{ route('notices.index') }}" class="btn btn-sm btn-outline-primary">
                            সব নোটিশ দেখুন
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <!-- তথ্য সম্পাদনা -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-user-edit"></i> তথ্য সম্পাদনা
                    </h6>
                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editProfileModal">
                        <i class="fas fa-edit"></i> সম্পাদনা করুন
                    </button>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th width="40%">পিতার নাম:</th>
                                    <td>{{ $member->father_name }}</td>
                                </tr>
                                <tr>
                                    <th>মাতার নাম:</th>
                                    <td>{{ $member->mother_name }}</td>
                                </tr>
                                <tr>
                                    <th>জন্ম তারিখ:</th>
                                    <td>{{ $member->date_of_birth ? $member->date_of_birth->format('d/m/Y') : 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>বয়স:</th>
                                    <td>{{ $member->age ? $member->age . ' বছর' : 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>লিঙ্গ:</th>
                                    <td>{{ $member->gender_in_bangla }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th width="40%">জাতীয় আইডি:</th>
                                    <td>{{ $member->nid }}</td>
                                </tr>
                                <tr>
                                    <th>পেশা:</th>
                                    <td>{{ $member->occupation }}</td>
                                </tr>
                                <tr>
                                    <th>স্থায়ী ঠিকানা:</th>
                                    <td>{{ $member->permanent_address ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>নিবন্ধন তারিখ:</th>
                                    <td>{{ $member->registration_date->format('d/m/Y') }}</td>
                                </tr>
                                <tr>
                                    <th>ফর্ম ফি:</th>
                                    <td>
                                        ৳{{ number_format($member->form_fee, 2) }}
                                        ({{ $member->form_fee_status_in_bangla }})
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- নমিনি তথ্য -->
                    <div class="mt-4">
                        <h6 class="font-weight-bold border-bottom pb-2">
                            <i class="fas fa-user-friends"></i> নমিনি তথ্য
                        </h6>
                        <div class="row">
                            <div class="col-md-2 text-center">
                                <img src="{{ $member->nominee_photo_url }}" 
                                     alt="{{ $member->nominee_name }}"
                                     class="rounded-circle border"
                                     style="width: 80px; height: 80px; object-fit: cover;">
                            </div>
                            <div class="col-md-10">
                                <table class="table table-sm">
                                    <tr>
                                        <th width="30%">নমিনি নাম:</th>
                                        <td>{{ $member->nominee_name }}</td>
                                    </tr>
                                    <tr>
                                        <th>সম্পর্ক:</th>
                                        <td>{{ $member->nominee_relation }}</td>
                                    </tr>
                                    <tr>
                                        <th>জাতীয় আইডি:</th>
                                        <td>{{ $member->nominee_nid }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- মাসিক সঞ্চয় -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-piggy-bank"></i> মাসিক সঞ্চয়
                    </h6>
                    <a href="{{ route('savings.history') }}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-history"></i> পূর্ণ ইতিহাস
                    </a>
                </div>
                <div class="card-body">
                    @if($monthlySavings->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" width="100%">
                            <thead class="bg-light">
                                <tr>
                                    <th>মাস/বছর</th>
                                    <th>পরিমাণ</th>
                                    <th>স্ট্যাটাস</th>
                                    <th>পরিশোধ তারিখ</th>
                                    <th>রশিদ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($monthlySavings as $saving)
                                <tr>
                                    <td>{{ \Carbon\Carbon::createFromFormat('Y-m', $saving->month_year)->format('F Y') }}</td>
                                    <td>৳{{ number_format($saving->amount, 2) }}</td>
                                    <td>
                                        @if($saving->status == 'paid')
                                        <span class="badge bg-success">পরিশোধিত</span>
                                        @else
                                        <span class="badge bg-warning">বকেয়া</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($saving->payment_date)
                                        {{ \Carbon\Carbon::parse($saving->payment_date)->format('d/m/Y') }}
                                        @else
                                        -
                                        @endif
                                    </td>
                                    <td>
                                        @if($saving->status == 'paid')
                                        <a href="{{ route('savings.print-receipt', $saving) }}" 
                                           target="_blank"
                                           class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-print"></i>
                                        </a>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $monthlySavings->links() }}
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="fas fa-piggy-bank fa-3x text-muted mb-3"></i>
                        <p class="text-muted">কোন সঞ্চয় রেকর্ড পাওয়া যায়নি</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- ঋণ তথ্য -->
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-hand-holding-usd"></i> ঋণ তথ্য
                    </h6>
                    <div>
                        <a href="{{ route('loans.my-loans') }}" class="btn btn-sm btn-outline-primary mr-2">
                            <i class="fas fa-history"></i> পূর্ণ ইতিহাস
                        </a>
                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#applyLoanModal">
                            <i class="fas fa-plus"></i> নতুন আবেদন
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if($loans->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" width="100%">
                            <thead class="bg-light">
                                <tr>
                                    <th>ঋণ নম্বর</th>
                                    <th>ঋণের ধরন</th>
                                    <th>পরিমাণ</th>
                                    <th>স্ট্যাটাস</th>
                                    <th>আবেদনের তারিখ</th>
                                    <th>বিস্তারিত</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($loans as $loan)
                                <tr>
                                    <td>{{ $loan->loan_number }}</td>
                                    <td>
                                        @if($loan->loan_type == 'general')
                                        সাধারণ ঋণ
                                        @elseif($loan->loan_type == 'emergency')
                                        জরুরী ঋণ
                                        @else
                                        {{ $loan->loan_type }}
                                        @endif
                                    </td>
                                    <td>৳{{ number_format($loan->loan_amount, 2) }}</td>
                                    <td>
                                        @if($loan->status == 'pending')
                                        <span class="badge bg-warning">মুলতুবি</span>
                                        @elseif($loan->status == 'approved')
                                        <span class="badge bg-info">অনুমোদিত</span>
                                        @elseif($loan->status == 'disbursed')
                                        <span class="badge bg-primary">বিতরণকৃত</span>
                                        @elseif($loan->status == 'active')
                                        <span class="badge bg-success">সক্রিয়</span>
                                        @elseif($loan->status == 'completed')
                                        <span class="badge bg-secondary">সম্পূর্ণ</span>
                                        @elseif($loan->status == 'rejected')
                                        <span class="badge bg-danger">প্রত্যাখ্যাত</span>
                                        @else
                                        <span class="badge bg-secondary">{{ $loan->status }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $loan->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        <a href="{{ route('loans.member-details', $loan) }}" 
                                           class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $loans->links() }}
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="fas fa-hand-holding-usd fa-3x text-muted mb-3"></i>
                        <p class="text-muted">কোন ঋণ রেকর্ড পাওয়া যায়নি</p>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#applyLoanModal">
                            <i class="fas fa-plus"></i> নতুন ঋণের আবেদন করুন
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- প্রোফাইল এডিট মডাল -->
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editProfileModalLabel">
                        <i class="fas fa-user-edit"></i> প্রোফাইল সম্পাদনা
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">নাম <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" 
                                       value="{{ old('name', $member->name) }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="father_name">পিতার নাম <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="father_name" name="father_name" 
                                       value="{{ old('father_name', $member->father_name) }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="mother_name">মাতার নাম <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="mother_name" name="mother_name" 
                                       value="{{ old('mother_name', $member->mother_name) }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="occupation">পেশা <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="occupation" name="occupation" 
                                       value="{{ old('occupation', $member->occupation) }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="present_address">বর্তমান ঠিকানা <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="present_address" name="present_address" 
                                          rows="2" required>{{ old('present_address', $member->present_address) }}</textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="permanent_address">স্থায়ী ঠিকানা</label>
                                <textarea class="form-control" id="permanent_address" name="permanent_address" 
                                          rows="2">{{ old('permanent_address', $member->permanent_address) }}</textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="photo">প্রোফাইল ছবি</label>
                                <input type="file" class="form-control" id="photo" name="photo" 
                                       accept="image/*">
                                <small class="text-muted">সর্বোচ্চ সাইজ: 2MB, ফরম্যাট: JPG, PNG</small>
                            </div>
                            @if($member->photo)
                            <div class="mt-2">
                                <img src="{{ $member->photo_url }}" alt="Current Photo" 
                                     style="width: 100px; height: 100px; object-fit: cover;" 
                                     class="border rounded">
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বাতিল</button>
                    <button type="submit" class="btn btn-primary">সংরক্ষণ করুন</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ছবি পরিবর্তন মডাল -->
<div class="modal fade" id="photoModal" tabindex="-1" aria-labelledby="photoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="photoModalLabel">
                        <i class="fas fa-camera"></i> প্রোফাইল ছবি পরিবর্তন
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div class="mb-3">
                        <img id="photoPreview" src="{{ $member->photo_url }}" 
                             alt="Profile Preview"
                             class="rounded-circle border"
                             style="width: 200px; height: 200px; object-fit: cover;">
                    </div>
                    <div class="form-group">
                        <input type="file" class="form-control" id="profilePhoto" name="photo" 
                               accept="image/*" onchange="previewImage(this)">
                        <input type="hidden" name="name" value="{{ $member->name }}">
                        <input type="hidden" name="father_name" value="{{ $member->father_name }}">
                        <input type="hidden" name="mother_name" value="{{ $member->mother_name }}">
                        <input type="hidden" name="present_address" value="{{ $member->present_address }}">
                        <input type="hidden" name="permanent_address" value="{{ $member->permanent_address }}">
                        <input type="hidden" name="occupation" value="{{ $member->occupation }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বাতিল</button>
                    <button type="submit" class="btn btn-primary">ছবি আপলোড করুন</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ঋণ আবেদন মডাল -->
@if(auth()->user()->user_type == 'member')
<div class="modal fade" id="applyLoanModal" tabindex="-1" aria-labelledby="applyLoanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('loans.apply') }}" method="POST" id="loanApplicationForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="applyLoanModalLabel">
                        <i class="fas fa-hand-holding-usd"></i> নতুন ঋণ আবেদন
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="loan_type">ঋণের ধরন <span class="text-danger">*</span></label>
                                <select class="form-control" id="loan_type" name="loan_type" required>
                                    <option value="">নির্বাচন করুন</option>
                                    <option value="general">সাধারণ ঋণ</option>
                                    <option value="emergency">জরুরী ঋণ</option>
                                    <option value="business">ব্যবসায়িক ঋণ</option>
                                    <option value="education">শিক্ষা ঋণ</option>
                                    <option value="medical">চিকিৎসা ঋণ</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="loan_amount">ঋণের পরিমাণ (৳) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="loan_amount" name="loan_amount" 
                                       min="1000" step="100" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="installment_count">কিস্তির সংখ্যা <span class="text-danger">*</span></label>
                                <select class="form-control" id="installment_count" name="installment_count" required>
                                    <option value="">নির্বাচন করুন</option>
                                    <option value="6">6 মাস</option>
                                    <option value="12">12 মাস</option>
                                    <option value="18">18 মাস</option>
                                    <option value="24">24 মাস</option>
                                    <option value="36">36 মাস</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="installment_amount">মাসিক কিস্তি (৳)</label>
                                <input type="text" class="form-control" id="installment_amount" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="purpose">ঋণের উদ্দেশ্য <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="purpose" name="purpose" 
                                          rows="3" required placeholder="ঋণের উদ্দেশ্য বিস্তারিত লিখুন"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="guarantor_info">জামিনদারের তথ্য <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="guarantor_info" name="guarantor_info" 
                                          rows="3" required placeholder="জামিনদারের নাম, ঠিকানা ও ফোন নম্বর"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> ঋণ আবেদনের শর্তাবলী:</h6>
                        <ul class="mb-0">
                            <li>সদস্য হতে হবে কমপক্ষে ৬ মাসের সক্রিয় সদস্য</li>
                            <li>মাসিক সঞ্চয় বকেয়া থাকা যাবে না</li>
                            <li>পূর্বের ঋণের কিস্তি বকেয়া থাকা যাবে না</li>
                            <li>সর্বোচ্চ ঋণের পরিমাণ: মোট সঞ্চয়ের ৫ গুণ</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বাতিল</button>
                    <button type="submit" class="btn btn-primary">আবেদন জমা দিন</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection

@section('scripts')
<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('photoPreview').src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}

// ঋণ আবেদন ফর্ম জাভাস্ক্রিপ্ট
document.addEventListener('DOMContentLoaded', function() {
    const loanAmount = document.getElementById('loan_amount');
    const installmentCount = document.getElementById('installment_count');
    const installmentAmount = document.getElementById('installment_amount');
    
    function calculateInstallment() {
        if (loanAmount.value && installmentCount.value) {
            const amount = parseFloat(loanAmount.value);
            const months = parseInt(installmentCount.value);
            
            // সরল সুদের হার (উদাহরণ: 10% বার্ষিক)
            const annualInterestRate = 10;
            const monthlyInterestRate = annualInterestRate / 12 / 100;
            
            // মাসিক কিস্তি গণনা
            const monthlyPayment = (amount * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, months)) 
                                 / (Math.pow(1 + monthlyInterestRate, months) - 1);
            
            installmentAmount.value = monthlyPayment.toFixed(2) + ' ৳';
        } else {
            installmentAmount.value = '';
        }
    }
    
    if (loanAmount && installmentCount) {
        loanAmount.addEventListener('input', calculateInstallment);
        installmentCount.addEventListener('change', calculateInstallment);
    }
    
    // ঋণ আবেদন ফর্ম ভ্যালিডেশন
    const loanForm = document.getElementById('loanApplicationForm');
    if (loanForm) {
        loanForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // সর্বোচ্চ ঋণের পরিমাণ চেক
            const maxLoanAmount = {{ $member->total_savings }} * 5;
            const requestedAmount = parseFloat(loanAmount.value);
            
            if (requestedAmount > maxLoanAmount) {
                alert('দুঃখিত! আপনি সর্বোচ্চ ' + maxLoanAmount.toLocaleString() + ' টাকা ঋণ পেতে পারেন।');
                return false;
            }
            
            // সদস্যকাল চেক (কমপক্ষে 6 মাস)
            const registrationDate = new Date('{{ $member->registration_date->format('Y-m-d') }}');
            const currentDate = new Date();
            const monthsDiff = (currentDate.getFullYear() - registrationDate.getFullYear()) * 12 
                             + (currentDate.getMonth() - registrationDate.getMonth());
            
            if (monthsDiff < 6) {
                alert('দুঃখিত! ঋণ আবেদনের জন্য কমপক্ষে ৬ মাস সদস্য হতে হবে।');
                return false;
            }
            
            // সব ভ্যালিডেশন পাস করলে ফর্ম সাবমিট
            this.submit();
        });
    }
});
</script>
@endsection

@section('styles')
<style>
.profile-img-container {
    position: relative;
}

.profile-img-container img {
    border: 3px solid #dee2e6;
}

.card-header {
    background-color: #f8f9fc;
}

.table th {
    font-weight: 600;
    color: #495057;
}

.badge {
    font-size: 0.75em;
    padding: 0.35em 0.65em;
}

/* Responsive styles */
@media (max-width: 768px) {
    .profile-img-container img {
        width: 120px;
        height: 120px;
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
}
</style>
@endsection