@extends('layouts.app')

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

@section('content')
<div class="w-full">
    <div class="flex flex-col">
        <div class="w-full">
            <div class="bg-white rounded-lg shadow-md border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h5 class="text-lg font-semibold text-gray-800 m-0">Attendance Settings</h5>
                </div>
                <div class="p-6">
                    <form method="POST" action="{{ route('settings.update') }}">
                        @csrf
                        @method('PUT')
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h6 class="text-base font-semibold text-gray-700">Punch Settings</h6>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="require_location" {{ config('attendance.require_location') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Require Location for Punch In/Out</label>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700">Location Tolerance (meters)</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="location_tolerance" value="{{ config('attendance.location_tolerance') }}" min="0" max="1000">
                                    <small class="text-xs text-gray-500">Maximum distance from geofence to allow punch</small>
                                </div>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700">Auto Punch Out Time</label>
                                    <input type="time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="auto_punch_out_time" value="{{ config('attendance.auto_punch_out_time') }}">
                                    <small class="text-xs text-gray-500">Automatically punch out at this time if still punched in</small>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <h6 class="text-base font-semibold text-gray-700">Behavior Settings</h6>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700">Late Threshold (minutes)</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="late_threshold" value="{{ config('attendance.late_threshold') }}" min="0" max="60">
                                    <small class="text-xs text-gray-500">Minutes after shift start to mark as late</small>
                                </div>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700">Early Threshold (minutes)</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="early_threshold" value="{{ config('attendance.early_threshold') }}" min="0" max="60">
                                    <small class="text-xs text-gray-500">Minutes before shift start to mark as early</small>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="allow_manual_edit" {{ config('attendance.allow_manual_edit') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Allow Manual Attendance Editing</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                            <div class="space-y-4">
                                <h6 class="text-base font-semibold text-gray-700">Request Settings</h6>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="enable_attendance_requests" {{ config('attendance.enable_attendance_requests') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Enable Attendance Modification Requests</label>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-gray-700">Request Approval Timeframe (hours)</label>
                                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" name="request_approval_timeframe" value="{{ config('attendance.request_approval_timeframe') }}" min="1" max="168">
                                    <small class="text-xs text-gray-500">Hours managers have to approve/reject requests</small>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="auto_approve_regular" {{ config('attendance.auto_approve_regular') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Auto-approve Regular Attendance Requests</label>
                                    </div>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <h6 class="text-base font-semibold text-gray-700">Notification Settings</h6>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="notify_punch_in" {{ config('attendance.notify_punch_in') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Notify on Punch In</label>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="notify_punch_out" {{ config('attendance.notify_punch_out') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Notify on Punch Out</label>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center space-x-2">
                                        <input class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" type="checkbox" name="notify_absent" {{ config('attendance.notify_absent') ? 'checked' : '' }}>
                                        <label class="text-sm font-medium text-gray-700">Notify on Absent Employees</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex gap-2 mt-6">
                            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                <i class="fas fa-save mr-2"></i>Save Settings
                            </button>
                            <button type="reset" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                                <i class="fas fa-undo mr-2"></i>Reset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection