@extends('admin.layouts.app')
@section('title', 'Fee Heads')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.accounting.index') }}">Accounting</a></li>
    <li class="breadcrumb-item active">Fee Heads</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Fee Heads</h1>
        <p class="page-subtitle">Manage all fee categories (ERP Online Fees)</p>
    </div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addFeeHeadModal">
        <i class="bi bi-plus-lg me-1"></i> Add Fee Head
    </button>
</div>

<div class="row g-3 mb-4">
    @php
        $types = [
            'monthly_installment' => ['Monthly Installment', 'primary'],
            'admission'           => ['Admission', 'success'],
            'examination'         => ['Examination', 'info'],
            'miscellaneous'       => ['Miscellaneous', 'warning'],
            'fine'                => ['Fine/Late Fee', 'danger'],
        ];
    @endphp
    @foreach($types as $key => [$label, $color])
        @php $count = $feeHeads->where('type', $key)->count(); @endphp
        <div class="col-6 col-md-2">
            <div class="card text-center py-3">
                <div style="font-size:1.4rem; font-weight:700; color: var(--bs-{{ $color }})">{{ $count }}</div>
                <div style="font-size:0.75rem; color:#64748b">{{ $label }}</div>
            </div>
        </div>
    @endforeach
</div>

<div class="card">
    <div class="card-header">
        <i class="bi bi-list-ul me-2 text-primary"></i>All Fee Heads
        <span class="badge bg-secondary ms-1">{{ $feeHeads->count() }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Applicable</th>
                    <th>Optional</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($feeHeads as $head)
                <tr>
                    <td style="font-weight:500">{{ $head->name }}</td>
                    <td><code>{{ $head->code }}</code></td>
                    <td>
                        <span class="badge badge-soft-info" style="font-size:0.72rem">
                            {{ ucfirst(str_replace('_',' ', $head->type)) }}
                        </span>
                    </td>
                    <td style="font-weight:600">₹{{ number_format($head->amount, 2) }}</td>
                    <td>
                        <span class="badge badge-soft-secondary">{{ $head->applicable_to }}</span>
                    </td>
                    <td>
                        @if($head->is_optional)
                            <span class="badge badge-soft-warning">Optional</span>
                        @else
                            <span class="badge badge-soft-success">Mandatory</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge badge-soft-{{ $head->status === 'active' ? 'success' : 'secondary' }}">
                            {{ ucfirst($head->status) }}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-outline-secondary py-1"
                                onclick="editFeeHead({{ $head->id }}, '{{ addslashes($head->name) }}', {{ $head->amount }}, '{{ $head->status }}')"
                                data-bs-toggle="modal" data-bs-target="#editFeeHeadModal">
                            <i class="bi bi-pencil"></i>
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- ADD MODAL -->
<div class="modal fade" id="addFeeHeadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.accounting.fee-heads.store') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Fee Head</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Fee Head Name *</label>
                            <input type="text" name="name" class="form-control" required placeholder="e.g., Semester Exam Fee">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Code *</label>
                            <input type="text" name="code" class="form-control" required placeholder="e.g., SEM-EXM">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Type *</label>
                            <select name="type" class="form-select" required>
                                <option value="monthly_installment">Monthly Installment</option>
                                <option value="admission">Admission</option>
                                <option value="online_application">Online Application</option>
                                <option value="arrear">Arrear</option>
                                <option value="hostel">Hostel</option>
                                <option value="condonation">Condonation</option>
                                <option value="exam_review">Exam Review</option>
                                <option value="supplementary">Supplementary</option>
                                <option value="pg_diploma">PG Diploma</option>
                                <option value="certificate_course">Certificate Course</option>
                                <option value="examination">Examination</option>
                                <option value="miscellaneous">Miscellaneous</option>
                                <option value="fine">Fine</option>
                                <option value="late_fee">Late Fee</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Amount (₹) *</label>
                            <input type="number" name="amount" class="form-control" min="0" step="0.01" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Applicable To *</label>
                            <select name="applicable_to" class="form-select" required>
                                <option value="All">All</option>
                                <option value="UG">UG Only</option>
                                <option value="PG">PG Only</option>
                                <option value="Both">UG & PG</option>
                            </select>
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_optional" id="isOptional" value="1">
                                <label class="form-check-label" for="isOptional">Optional Fee</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Fee Head</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- EDIT MODAL -->
<div class="modal fade" id="editFeeHeadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="editFeeHeadForm">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Fee Head</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" id="edit-name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Amount (₹) *</label>
                            <input type="number" name="amount" id="edit-amount" class="form-control" min="0" step="0.01" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select name="status" id="edit-status" class="form-select">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function editFeeHead(id, name, amount, status) {
    document.getElementById('editFeeHeadForm').action = `/admin/accounting/fee-heads/${id}`;
    document.getElementById('edit-name').value   = name;
    document.getElementById('edit-amount').value = amount;
    document.getElementById('edit-status').value = status;
}
</script>
@endpush