@extends('layouts.admin')

@section('title', 'Configuration')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-8">
            <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Configuration</h1>
            <p class="mt-1 text-sm text-gray-500">Manage delivery man payment and notification settings</p>
        </div>

        @if(session('success'))
            <div class="mb-6 bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200 text-emerald-800 px-4 py-3 rounded-lg flex items-center shadow-sm">
                <svg class="w-5 h-5 mr-2 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-5 bg-gradient-to-r from-gray-50 to-white border-b border-gray-200">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-primary-100 rounded-lg">
                                <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-gray-900">Delivery Man Configuration</h2>
                                <p class="text-xs text-gray-500 mt-0.5">Payment structure and notification preferences</p>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('admin.delivery.configuration') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="p-6 space-y-6">
                            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-5 border border-blue-100">
                                <div class="flex items-center gap-2 mb-4">
                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    <h3 class="text-sm font-semibold text-blue-900 uppercase tracking-wide">Payment Configuration</h3>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <label for="payment_type" class="block text-sm font-medium text-gray-700 mb-2">Compensation Structure</label>
                                        <select name="payment_type" id="payment_type" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                            <option value="salary" {{ ($config['payment_type'] ?? 'salary') == 'salary' ? 'selected' : '' }}>Salary Amount Only</option>
                                            <option value="commission" {{ ($config['payment_type'] ?? 'salary') == 'commission' ? 'selected' : '' }}>Commission Rate Only</option>
                                            <option value="salary_and_commission" {{ ($config['payment_type'] ?? 'salary') == 'salary_and_commission' ? 'selected' : '' }}>Salary And Commission</option>
                                        </select>
                                        <p class="mt-2 text-xs text-gray-500">Choose how delivery men will be compensated for their services</p>
                                    </div>
                                    <div>
                                        <label for="default_commission" class="block text-sm font-medium text-gray-700 mb-2">Default Commission</label>
                                        <div class="flex items-center gap-2">
                                            <input type="number" name="default_commission" id="default_commission" step="0.01" value="{{ $config['default_commission'] ?? 0 }}" class="flex-1 px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                            <select name="commission_type" id="commission_type" class="w-32 px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                                <option value="fixed" {{ ($config['commission_type'] ?? 'fixed') == 'fixed' ? 'selected' : '' }}>Fixed</option>
                                                <option value="percentage" {{ ($config['commission_type'] ?? 'fixed') == 'percentage' ? 'selected' : '' }}>Percentage</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <label for="delivery_fee" class="block text-sm font-medium text-gray-700 mb-2">Delivery Fee</label>
                                        <input type="number" name="delivery_fee" id="delivery_fee" step="0.01" value="{{ $config['delivery_fee'] ?? 0 }}" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                    </div>
                                    <div>
                                        <label for="free_delivery_threshold" class="block text-sm font-medium text-gray-700 mb-2">Free Delivery Threshold</label>
                                        <input type="number" name="free_delivery_threshold" id="free_delivery_threshold" step="0.01" value="{{ $config['free_delivery_threshold'] ?? 0 }}" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                        <p class="mt-1 text-xs text-gray-500">Orders above this amount get free delivery</p>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-5 border border-emerald-100">
                                <div class="flex items-center gap-2 mb-4">
                                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                    <h3 class="text-sm font-semibold text-emerald-900 uppercase tracking-wide">Delivery Settings</h3>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <label for="max_delivery_radius" class="block text-sm font-medium text-gray-700 mb-2">Max Delivery Radius (km)</label>
                                        <input type="number" name="max_delivery_radius" id="max_delivery_radius" step="0.1" value="{{ $config['max_delivery_radius'] ?? 10 }}" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                    </div>
                                    <div>
                                        <label for="estimated_delivery_time" class="block text-sm font-medium text-gray-700 mb-2">Estimated Delivery Time (minutes)</label>
                                        <input type="number" name="estimated_delivery_time" id="estimated_delivery_time" value="{{ $config['estimated_delivery_time'] ?? 30 }}" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                    </div>
                                    <div>
                                        <label for="max_orders_per_delivery_man" class="block text-sm font-medium text-gray-700 mb-2">Max Orders Per Delivery Man</label>
                                        <input type="number" name="max_orders_per_delivery_man" id="max_orders_per_delivery_man" value="{{ $config['max_orders_per_delivery_man'] ?? 5 }}" class="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all text-sm shadow-sm hover:border-gray-300">
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-100 shadow-sm">
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">Auto Assign Orders</p>
                                            <p class="text-xs text-gray-500">Automatically assign orders to available delivery men</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer ml-4">
                                            <input type="checkbox" name="auto_assign" value="1" {{ ($config['auto_assign'] ?? false) ? 'checked' : '' }} class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600 shadow-sm"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl p-5 border border-amber-100">
                                <div class="flex items-center gap-2 mb-4">
                                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                                    <h3 class="text-sm font-semibold text-amber-900 uppercase tracking-wide">Notification Configuration</h3>
                                </div>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-100 shadow-sm">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 bg-gray-100 rounded-lg">
                                                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-900">Send Email Notifications</p>
                                                <p class="text-xs text-gray-500">Automatically send email updates to delivery men</p>
                                            </div>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer ml-4">
                                            <input type="checkbox" name="send_mail" value="1" {{ ($config['send_mail'] ?? false) ? 'checked' : '' }} class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600 shadow-sm"></div>
                                        </label>
                                    </div>

                                    <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-100 shadow-sm">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 bg-gray-100 rounded-lg">
                                                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium text-gray-900">Send OTP Verification</p>
                                                <p class="text-xs text-gray-500">Require OTP verification for sensitive operations</p>
                                            </div>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer ml-4">
                                            <input type="checkbox" name="send_otp" value="1" {{ ($config['send_otp'] ?? false) ? 'checked' : '' }} class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600 shadow-sm"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
                            <p class="text-xs text-gray-500">Changes will take effect immediately upon saving</p>
                            <button type="submit" class="inline-flex items-center px-6 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white font-medium rounded-lg hover:from-primary-700 hover:to-primary-800 focus:ring-4 focus:ring-primary-500/20 transition-all shadow-sm hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                Save Changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="lg:col-span-1 space-y-6">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-white border-b border-gray-200">
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Current Settings</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                <span class="text-sm text-gray-600">Payment Type</span>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                {{ ucfirst(str_replace('_', ' ', $config['payment_type'] ?? 'Salary')) }}
                            </span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg>
                                <span class="text-sm text-gray-600">Default Commission</span>
                            </div>
                            <span class="text-sm font-medium text-gray-900">{{ $config['commission_type'] == 'percentage' ? $config['default_commission'] . '%' : 'DT' . number_format($config['default_commission'] ?? 0, 2) }}</span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                <span class="text-sm text-gray-600">Delivery Fee</span>
                            </div>
                            <span class="text-sm font-medium text-gray-900">DT{{ number_format($config['delivery_fee'] ?? 0, 2) }}</span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                <span class="text-sm text-gray-600">Free Delivery Above</span>
                            </div>
                            <span class="text-sm font-medium text-gray-900">DT{{ number_format($config['free_delivery_threshold'] ?? 0, 2) }}</span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                <span class="text-sm text-gray-600">Max Radius</span>
                            </div>
                            <span class="text-sm font-medium text-gray-900">{{ $config['max_delivery_radius'] ?? 10 }} km</span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                <span class="text-sm text-gray-600">Est. Delivery Time</span>
                            </div>
                            <span class="text-sm font-medium text-gray-900">{{ $config['estimated_delivery_time'] ?? 30 }} min</span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                                <span class="text-sm text-gray-600">Max Orders/Man</span>
                            </div>
                            <span class="text-sm font-medium text-gray-900">{{ $config['max_orders_per_delivery_man'] ?? 5 }}</span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                <span class="text-sm text-gray-600">Auto Assign</span>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {{ ($config['auto_assign'] ?? false) ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                {{ ($config['auto_assign'] ?? false) ? 'Enabled' : 'Disabled' }}
                            </span>
                        </div>

                        <div class="flex items-center justify-between py-3 border-b border-gray-100">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                <span class="text-sm text-gray-600">Email Notifications</span>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {{ ($config['send_mail'] ?? false) ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                {{ ($config['send_mail'] ?? false) ? 'Enabled' : 'Disabled' }}
                            </span>
                        </div>

                        <div class="flex items-center justify-between py-3">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                <span class="text-sm text-gray-600">OTP Verification</span>
                            </div>
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {{ ($config['send_otp'] ?? false) ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                {{ ($config['send_otp'] ?? false) ? 'Enabled' : 'Disabled' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl border border-indigo-100 p-6">
                    <div class="flex items-start gap-3">
                        <div class="p-2 bg-white rounded-lg shadow-sm">
                            <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-indigo-900">Need Help?</h4>
                            <p class="text-xs text-indigo-700 mt-1 leading-relaxed">These settings control how delivery men are compensated and notified. Changes apply globally to all delivery operations.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection