@extends('layouts.admin')

@section('title', 'System Settings')

@section('content')
<div class="settings-container" style="height: calc(100vh - 100px); display: flex; flex-direction: column;">
    <div class="card border flex-fill d-flex flex-column" style="overflow: hidden;">
        <!-- Sticky Header with Tabs -->
        <div class="card-header border-bottom bg-body sticky-header" style="position: sticky; top: 0; z-index: 100;">
            <ul class="nav nav-tabs border-0 mb-0" id="settingsTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="federation-fees-tab" data-bs-toggle="tab" data-bs-target="#federation-fees" type="button" role="tab" aria-controls="federation-fees" aria-selected="true">
                        <i class="uil uil-trophy me-2"></i>Federation Cup Fees
                    </button>
                </li>
            </ul>
        </div>
        
        <!-- Scrollable Body -->
        <div class="card-body flex-fill" style="overflow-y: auto; overflow-x: hidden;">
            <div class="tab-content" id="settingsTabContent">
                <!-- Federation Cup Entry Fees Tab -->
                <div class="tab-pane fade show active" id="federation-fees" role="tabpanel" aria-labelledby="federation-fees-tab">
                    <div class="alert alert-phoenix-info mb-4" role="alert">
                        <div class="d-flex">
                            <span class="uil uil-info-circle fs-4 me-3"></span>
                            <div class="flex-1">
                                <h6 class="alert-heading">Federation Cup Entry Fees</h6>
                                <p class="mb-0">Configure entry fee amounts for different Federation Cup categories. These fees are global and will apply to all Federation Cup events.</p>
                            </div>
                        </div>
                    </div>

                    <div id="alertContainer"></div>

                    <form id="federationFeesForm">
                        @csrf
                        <input type="hidden" name="setting_type" value="federation_fees">
                        
                        <div class="row g-3" id="entryFeesContainer">
                            <div class="col-12 text-center py-5">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="text-muted mt-2">Loading entry fees...</p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Sticky Footer with Action Buttons -->
        <div class="card-footer border-top bg-body sticky-footer" style="position: sticky; bottom: 0; z-index: 100;">
            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn btn-phoenix-secondary" id="cancelBtn" onclick="window.location.reload()">
                    <span class="uil uil-times me-2"></span>Cancel
                </button>
                <button type="button" class="btn btn-phoenix-primary" id="saveSettingsBtn">
                    <span class="uil uil-save me-2"></span>Save Settings
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    loadEntryFees();

    function loadEntryFees() {
        $.ajax({
            url: '{{ route("admin.settings.federation-fees.get") }}',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    renderEntryFees(response.data);
                } else {
                    showAlert('error', response.message || 'Failed to load entry fees');
                }
            },
            error: function(xhr) {
                console.error('Error loading entry fees:', xhr);
                showAlert('error', 'Failed to load entry fees. Please refresh the page.');
            }
        });
    }

    function renderEntryFees(fees) {
        let html = '';
        
        fees.forEach(fee => {
            const categoryLabel = getCategoryLabel(fee.category_type);
            const statusBadge = fee.is_active 
                ? '<span class="badge badge-phoenix badge-phoenix-success">Active</span>' 
                : '<span class="badge badge-phoenix badge-phoenix-danger">Inactive</span>';
            
            html += `
                <div class="col-md-6">
                    <div class="card border h-100 hover-shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h6 class="mb-1">${categoryLabel}</h6>
                                    ${statusBadge}
                                </div>
                                <i class="uil uil-trophy text-primary fs-3"></i>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Entry Fee (₹)</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="fees[${fee.id}][entry_fee]" 
                                       value="${fee.entry_fee}" 
                                       step="0.01" 
                                       min="0"
                                       required>
                                <input type="hidden" name="fees[${fee.id}][id]" value="${fee.id}">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Description</label>
                                <textarea class="form-control" 
                                          name="fees[${fee.id}][description]" 
                                          rows="2">${fee.description || ''}</textarea>
                            </div>
                            
                            <div class="form-check form-switch">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       name="fees[${fee.id}][is_active]" 
                                       value="1"
                                       id="active_${fee.id}"
                                       ${fee.is_active ? 'checked' : ''}>
                                <label class="form-check-label" for="active_${fee.id}">
                                    Active
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        $('#entryFeesContainer').html(html);
    }

    function getCategoryLabel(categoryType) {
        const labels = {
            'kyorugi': 'Kyorugi (Sparring)',
            'poomsae_individual': 'Poomsae - Individual',
            'poomsae_pair': 'Poomsae - Pair',
            'poomsae_team': 'Poomsae - Team'
        };
        return labels[categoryType] || categoryType;
    }

    // Save Settings Button Handler
    $('#saveSettingsBtn').on('click', function(e) {
        e.preventDefault();
        
        const $btn = $(this);
        const originalHtml = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...');

        $.ajax({
            url: '{{ route("admin.settings.update") }}',
            type: 'POST',
            data: $('#federationFeesForm').serialize(),
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    showAlert('success', response.message || 'Settings saved successfully!');
                    loadEntryFees();
                } else {
                    showAlert('error', response.message || 'Failed to save settings');
                }
            },
            error: function(xhr) {
                console.error('Error saving settings:', xhr);
                let errorMsg = 'Failed to save settings';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                showAlert('error', errorMsg);
            },
            complete: function() {
                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const iconClass = type === 'success' ? 'uil-check-circle' : 'uil-times-circle';
        
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <span class="uil ${iconClass} me-2"></span>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        
        $('#alertContainer').html(alertHtml);
        
        // Scroll to top to show alert
        $('.card-body').animate({ scrollTop: 0 }, 300);
        
        setTimeout(function() {
            $('#alertContainer .alert').fadeOut('slow', function() {
                $(this).remove();
            });
        }, 5000);
    }
});
</script>
@endpush

<style>
.hover-shadow-sm {
    transition: box-shadow 0.3s ease;
}
.hover-shadow-sm:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1.5rem;
}
.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--phoenix-primary);
}
.nav-tabs .nav-link.active {
    color: var(--phoenix-primary);
    background-color: transparent;
    border-bottom: 2px solid var(--phoenix-primary);
}
.sticky-header {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.sticky-footer {
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}
</style>
@endsection