@extends('layouts.app')

@section('title', 'ফি পরিশোধ')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-success">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fa fa-credit-card"></i> ফি পরিশোধ ফর্ম</h5>
                </div>
                
                <div class="card-body">
                    <!-- Fee Summary -->
                    <div class="bg-light p-3 rounded mb-4">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <th>ছাত্রের নাম:</th>
                                        <td>{{ $fee->student->name_bn }}</td>
                                    </tr>
                                    <tr>
                                        <th>ছাত্র আইডি:</th>
                                        <td>{{ $fee->student->student_id }}</td>
                                    </tr>
                                    <tr>
                                        <th>শ্রেণি/শাখা:</th>
                                        <td>{{ $fee->class->class_name_bn ?? '' }} {{ $fee->student->section }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <th>ফি নম্বর:</th>
                                        <td>{{ $fee->fee_no }}</td>
                                    </tr>
                                    <tr>
                                        <th>মাস/বছর:</th>
                                        <td>{{ $fee->month_year->format('F Y') }}</td>
                                    </tr>
                                    <tr>
                                        <th>পরিশোধের শেষ তারিখ:</th>
                                        <td>{{ $fee->month_year->copy()->addDays(30)->format('d-m-Y') }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Amount Details -->
                    <div class="card card-outline card-primary mb-4">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0">পরিমাণ বিবরণী</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered">
                                <tr>
                                    <th>মোট ফি:</th>
                                    <td class="text-right">{{ number_format($fee->total_amount, 2) }} টাকা</td>
                                </tr>
                                <tr>
                                    <th>বিলম্ব ফি:</th>
                                    <td class="text-right text-danger">{{ number_format($fee->late_fee, 2) }} টাকা</td>
                                </tr>
                                <tr>
                                    <th>ছাড়:</th>
                                    <td class="text-right text-success">{{ number_format($fee->discount, 2) }} টাকা</td>
                                </tr>
                                <tr class="font-weight-bold">
                                    <th>পরিশোধযোগ্য:</th>
                                    <td class="text-right text-primary h5">{{ number_format($fee->payable_amount, 2) }} টাকা</td>
                                </tr>
                                <tr>
                                    <th>ইতিমধ্যে পরিশোধিত:</th>
                                    <td class="text-right">{{ number_format($fee->paid_amount, 2) }} টাকা</td>
                                </tr>
                                <tr class="bg-light-danger">
                                    <th>বাকি আছে:</th>
                                    <td class="text-right text-danger font-weight-bold h5">
                                        {{ number_format($fee->due_amount, 2) }} টাকা
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Payment Form -->
                    <form method="POST" action="{{ route('fees.process-payment', $fee->id) }}" id="paymentForm">
                        @csrf
                        
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right">পরিশোধের পরিমাণ <span class="text-danger">*</span></label>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="number" 
                                           name="amount" 
                                           id="amount"
                                           class="form-control form-control-lg @error('amount') is-invalid @enderror" 
                                           value="{{ old('amount', $fee->due_amount) }}"
                                           step="0.01"
                                           min="1"
                                           max="{{ $fee->due_amount }}"
                                           required>
                                    <div class="input-group-append">
                                        <span class="input-group-text">টাকা</span>
                                    </div>
                                </div>
                                @error('amount')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                                <small class="text-muted">সর্বোচ্চ {{ number_format($fee->due_amount, 2) }} টাকা</small>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right">পদ্ধতি <span class="text-danger">*</span></label>
                            <div class="col-md-6">
                                <select name="payment_method" class="form-control @error('payment_method') is-invalid @enderror" required>
                                    <option value="">নির্বাচন করুন</option>
                                    <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>নগদ</option>
                                    <option value="bKash" {{ old('payment_method') == 'bKash' ? 'selected' : '' }}>বিকাশ</option>
                                    <option value="nagad" {{ old('payment_method') == 'nagad' ? 'selected' : '' }}>নগদ</option>
                                    <option value="rocket" {{ old('payment_method') == 'rocket' ? 'selected' : '' }}>রকেট</option>
                                    <option value="bank" {{ old('payment_method') == 'bank' ? 'selected' : '' }}>ব্যাংক</option>
                                    <option value="other" {{ old('payment_method') == 'other' ? 'selected' : '' }}>অন্যান্য</option>
                                </select>
                                @error('payment_method')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right">লেনদেন আইডি</label>
                            <div class="col-md-6">
                                <input type="text" 
                                       name="transaction_id" 
                                       class="form-control" 
                                       value="{{ old('transaction_id') }}"
                                       placeholder="TrxID">
                                <small class="text-muted">মোবাইল ব্যাংকিং এর ক্ষেত্রে দিন</small>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right">মোবাইল নম্বর</label>
                            <div class="col-md-6">
                                <input type="text" 
                                       name="mobile_number" 
                                       class="form-control" 
                                       value="{{ old('mobile_number', $fee->student->phone) }}"
                                       placeholder="017XXXXXXXX">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right">পেমেন্ট তারিখ <span class="text-danger">*</span></label>
                            <div class="col-md-6">
                                <input type="date" 
                                       name="payment_date" 
                                       class="form-control @error('payment_date') is-invalid @enderror" 
                                       value="{{ old('payment_date', date('Y-m-d')) }}"
                                       required>
                                @error('payment_date')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-4 col-form-label text-md-right">মন্তব্য</label>
                            <div class="col-md-6">
                                <textarea name="remarks" class="form-control" rows="2">{{ old('remarks') }}</textarea>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-success btn-lg" id="submitBtn">
                                    <i class="fa fa-check-circle"></i> পেমেন্ট নিশ্চিত করুন
                                </button>
                                <a href="{{ route('fees.search', ['student_id' => $fee->student->student_id, 'action' => 'all']) }}" 
                                   class="btn btn-secondary btn-lg">
                                    বাতিল
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    $(document).ready(function() {
        // Amount validation
        $('#amount').on('keyup change', function() {
            var amount = parseFloat($(this).val()) || 0;
            var maxAmount = {{ $fee->due_amount }};
            
            if (amount > maxAmount) {
                $(this).val(maxAmount);
                alert('সর্বোচ্চ ' + maxAmount.toFixed(2) + ' টাকা পেমেন্ট করতে পারবেন');
            }
        });
        
        // Form submission confirmation
        $('#paymentForm').on('submit', function(e) {
            var amount = $('#amount').val();
            if (!confirm('আপনি কি ' + amount + ' টাকা পেমেন্ট নিশ্চিত করতে চান?')) {
                e.preventDefault();
            }
        });
    });
</script>
@endsection
@endsection