@extends('admin.layouts.app')
@section('title','Conference Fees Setup')
@section('page-title','Conference Fees Setup')
@section('page-subtitle','Configure payment categories and amounts for each conference')
@section('fees-active','active')
@section('content')

@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif

<div class="alert alert-info mb-3">
    <strong>Registration fees:</strong> Participant registration uses <strong>period-based fees</strong> configured per conference at
    <em>Admin → Conferences → [Conference] → Fees</em> (Early Bird, Regular, Virtual, etc.).
    Use this page for <strong>additional fee items</strong> (AGM, dinner, spouse add-on items, etc.) or when period-based fees are not yet set up.
</div>
<div class="alert alert-warning mb-3">
    <strong>Paper review fee:</strong> Create one active fee per conference with fee code <code>paper_review</code> (e.g. fee name “Paper Review Fee”).
    Authors pay this before submitting papers. Payment opens/closes with the conference <strong>Full Paper Submission</strong> dates.
    This is separate from registration fees and does not require conference registration.
</div>

<form method="GET" class="mb-3">
    <div class="row g-2 align-items-end">
        <div class="col-md-5">
            <label class="form-label">Conference</label>
            <select name="conference_id" class="form-select" onchange="this.form.submit()">
                <option value="">All Conferences</option>
                @foreach($conferences as $conf)
                    <option value="{{ $conf->id }}" @selected($conferenceId == $conf->id)>{{ $conf->name }} ({{ $conf->conference_year }})</option>
                @endforeach
            </select>
        </div>
    </div>
</form>

<div class='cardx p-4 mb-4'>
    <h5>Add Fee Category</h5>
    <form method="POST" action="{{ route('admin.fees.store') }}">
        @csrf
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Conference *</label>
                <select name="conference_id" class="form-select" required>
                    @foreach($conferences as $conf)
                        <option value="{{ $conf->id }}" @selected($conferenceId == $conf->id)>{{ $conf->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Fee Name *</label>
                <input name="fee_name" class="form-control" required placeholder="Spouse Registration">
            </div>
            <div class="col-md-2">
                <label class="form-label">Fee Code *</label>
                <input name="fee_code" class="form-control" required placeholder="spouse_reg">
            </div>
            <div class="col-md-2">
                <label class="form-label">Amount *</label>
                <input type="number" name="amount" class="form-control" step="0.01" min="0" required>
            </div>
            <div class="col-md-2">
                <label class="form-label">Applies To</label>
                <select name="applies_to" class="form-select">
                    @foreach(\App\Models\ConferenceFeeItem::APPLIES_TO as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-12">
                <div class="form-check form-check-inline"><input type="checkbox" name="is_required" value="1" class="form-check-input" checked><label class="form-check-label">Required</label></div>
                <div class="form-check form-check-inline"><input type="checkbox" name="is_active" value="1" class="form-check-input" checked><label class="form-check-label">Active</label></div>
                <button type="submit" class="btn btn-green ms-2"><i class='fa fa-plus me-1'></i>Add Fee</button>
            </div>
        </div>
    </form>
</div>

<div class='cardx p-4'>
    <h5>Fee Categories</h5>
    <div class="table-responsive">
        <table class='table'>
            <thead><tr><th>Fee Type</th><th>Code</th><th>Conference</th><th>Category</th><th>Amount</th><th>Required?</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
                @forelse($fees as $fee)
                    <tr>
                        <td>{{ $fee->fee_name }}</td>
                        <td>{{ $fee->fee_code }}</td>
                        <td>{{ $fee->conference?->name }}</td>
                        <td>{{ $fee->appliesToLabel() }}</td>
                        <td>{{ $fee->currency }} {{ number_format($fee->amount, 2) }}</td>
                        <td>{{ $fee->is_required ? 'Yes' : 'No' }}</td>
                        <td><span class='badge {{ $fee->is_active ? 'bg-success' : 'bg-secondary' }}'>{{ $fee->is_active ? 'Active' : 'Inactive' }}</span></td>
                        <td class="text-nowrap">
                            <button type="button" class="btn btn-sm btn-outline-green btn-edit-fee"
                                data-bs-toggle="modal" data-bs-target="#editFeeModal"
                                data-action="{{ route('admin.fees.update', $fee) }}"
                                data-fee-name="{{ $fee->fee_name }}"
                                data-fee-code="{{ $fee->fee_code }}"
                                data-applies-to="{{ $fee->applies_to }}"
                                data-amount="{{ $fee->amount }}"
                                data-currency="{{ $fee->currency }}"
                                data-is-required="{{ $fee->is_required ? '1' : '0' }}"
                                data-is-active="{{ $fee->is_active ? '1' : '0' }}"
                                data-description="{{ $fee->description }}">
                                Edit
                            </button>
                            <form method="POST" action="{{ route('admin.fees.destroy', $fee) }}" class="d-inline" onsubmit="return confirm('Deactivate this fee?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Deactivate</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="text-muted">No fee items configured yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $fees->links() }}
</div>

<div class="modal fade" id="editFeeModal" tabindex="-1" aria-labelledby="editFeeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="editFeeForm" action="">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editFeeModalLabel">Edit Fee Configuration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Fee Name *</label>
                        <input type="text" name="fee_name" id="edit_fee_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Fee Code *</label>
                        <input type="text" name="fee_code" id="edit_fee_code" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Applies To *</label>
                        <select name="applies_to" id="edit_applies_to" class="form-select" required>
                            @foreach(\App\Models\ConferenceFeeItem::APPLIES_TO as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-md-8">
                            <label class="form-label">Amount *</label>
                            <input type="number" name="amount" id="edit_amount" class="form-control" step="0.01" min="0" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Currency</label>
                            <input type="text" name="currency" id="edit_currency" class="form-control" maxlength="10">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="edit_description" class="form-control" rows="2"></textarea>
                    </div>
                    <div class="form-check mb-2">
                        <input type="checkbox" name="is_required" value="1" id="edit_is_required" class="form-check-input">
                        <label class="form-check-label" for="edit_is_required">Required</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" name="is_active" value="1" id="edit_is_active" class="form-check-input">
                        <label class="form-check-label" for="edit_is_active">Active</label>
                    </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-green" id="editFeeSubmitBtn">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const modal = document.getElementById('editFeeModal');
    const form = document.getElementById('editFeeForm');

    document.querySelectorAll('.btn-edit-fee').forEach(function (btn) {
        btn.addEventListener('click', function () {
            form.action = btn.dataset.action;
            document.getElementById('edit_fee_name').value = btn.dataset.feeName || '';
            document.getElementById('edit_fee_code').value = btn.dataset.feeCode || '';
            document.getElementById('edit_applies_to').value = btn.dataset.appliesTo || 'all';
            document.getElementById('edit_amount').value = btn.dataset.amount || '';
            document.getElementById('edit_currency').value = btn.dataset.currency || 'NGN';
            document.getElementById('edit_description').value = btn.dataset.description || '';
            document.getElementById('edit_is_required').checked = btn.dataset.isRequired === '1';
            document.getElementById('edit_is_active').checked = btn.dataset.isActive === '1';
        });
    });

    form.addEventListener('submit', function (e) {
        if (!confirm('Are you sure you want to change this fee configuration? This may affect pending registrations and payments.')) {
            e.preventDefault();
        }
    });
})();
</script>
@endpush

@endsection