@extends('admin.layout')

@section('title', 'Settings')

@section('content')
<div class="space-y-6">
    <h1 class="text-3xl font-bold text-gray-800">Admin Settings</h1>

    <div class="bg-white p-8 rounded-lg shadow-md">
        <h2 class="text-xl font-bold mb-6 text-gray-800">Refund Policy</h2>
        <form id="settingsForm" class="space-y-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Cancellation Deadline (hours)</label>
                <input type="number" id="cancellationDeadline" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="24">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Late Cancellation Penalty (%)</label>
                <input type="number" id="latePenalty" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="25">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">No-Show Penalty (%)</label>
                <input type="number" id="noShowPenalty" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="50">
            </div>
            <div class="pt-4">
                <button type="submit" class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-md font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save Settings</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
async function loadSettings() {
    const data = await window.apiCall('/settings');
    if (data && data.success) {
        document.getElementById('cancellationDeadline').value = data.data.refund_policy.cancellation_deadline_hours;
        document.getElementById('latePenalty').value = data.data.refund_policy.late_cancellation_penalty_percentage;
        document.getElementById('noShowPenalty').value = data.data.refund_policy.no_show_penalty_percentage;
    }
}

document.getElementById('settingsForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = {
        refund_policy: {
            cancellation_deadline_hours: document.getElementById('cancellationDeadline').value,
            late_cancellation_penalty_percentage: document.getElementById('latePenalty').value,
            no_show_penalty_percentage: document.getElementById('noShowPenalty').value,
        }
    };
    
    const result = await window.apiCall('/settings', {
        method: 'PUT',
        body: JSON.stringify(data)
    });
    
    if (result && result.success) {
        alert('Settings saved successfully!');
    }
});

loadSettings();
</script>
@endsection