<template>
  <div class="p-8">
    <ToastContainer />
    
    <h1 class="text-3xl font-bold mb-6">System Settings</h1>

    <div class="space-y-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-xl font-bold mb-4">Commission Settings</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium mb-2">Restaurant Commission (%)</label>
            <input v-model="settings.restaurant_commission" type="number" class="w-full px-4 py-2 border rounded-lg">
          </div>
          <div>
            <label class="block text-sm font-medium mb-2">Delivery Boy Commission (%)</label>
            <input v-model="settings.delivery_commission" type="number" class="w-full px-4 py-2 border rounded-lg">
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-xl font-bold mb-4">Delivery Settings</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium mb-2">Base Delivery Fee (Rs)</label>
            <input v-model="settings.base_delivery_fee" type="number" class="w-full px-4 py-2 border rounded-lg">
          </div>
          <div>
            <label class="block text-sm font-medium mb-2">Per KM Charge (Rs)</label>
            <input v-model="settings.per_km_charge" type="number" class="w-full px-4 py-2 border rounded-lg">
          </div>
        </div>
      </div>

      <button @click="saveSettings" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600">
        💾 Save Settings
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useToast } from '../../composables/useToast';
import ToastContainer from '../../components/ToastContainer.vue';

const { success, error } = useToast();

const settings = ref({
  restaurant_commission: 15,
  delivery_commission: 10,
  base_delivery_fee: 200,
  per_km_charge: 50
});

const saveSettings = () => {
  success('Settings saved successfully');
};
</script>
