@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Attendance & Leave Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Configure clock in rules, working hours, and leave policies</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.settings', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to HR Settings
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Attendance & Leave Settings Form -->
        <div class="col-lg-8">
            <form method="POST" action="{{ route('companies.hr.settings.attendance-leave.update', $company) }}">
                @csrf
                @method('PUT')

                <!-- Clock In/Out Rules -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Clock In/Out Rules</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Work Start Time <span class="text-danger">*</span></label>
                                <input type="time" class="form-control @error('standard_work_start_time') is-invalid @enderror" 
                                       name="standard_work_start_time" value="{{ old('standard_work_start_time', $settings->standard_work_start_time?->format('H:i')) }}" required>
                                @error('standard_work_start_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Work End Time <span class="text-danger">*</span></label>
                                <input type="time" class="form-control @error('standard_work_end_time') is-invalid @enderror" 
                                       name="standard_work_end_time" value="{{ old('standard_work_end_time', $settings->standard_work_end_time?->format('H:i')) }}" required>
                                @error('standard_work_end_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Lunch Start</label>
                                <input type="time" class="form-control @error('lunch_break_start') is-invalid @enderror" 
                                       name="lunch_break_start" value="{{ old('lunch_break_start', $settings->lunch_break_start?->format('H:i')) }}">
                                @error('lunch_break_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Lunch End</label>
                                <input type="time" class="form-control @error('lunch_break_end') is-invalid @enderror" 
                                       name="lunch_break_end" value="{{ old('lunch_break_end', $settings->lunch_break_end?->format('H:i')) }}">
                                @error('lunch_break_end')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Late Tolerance (minutes)</label>
                                <div class="input-group">
                                    <input type="number" min="0" max="60" class="form-control @error('late_tolerance_minutes') is-invalid @enderror" 
                                           name="late_tolerance_minutes" value="{{ old('late_tolerance_minutes', $settings->late_tolerance_minutes) }}">
                                    <span class="input-group-text">minutes</span>
                                    @error('late_tolerance_minutes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Grace period before marking as late</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Early Departure Tolerance (minutes)</label>
                                <div class="input-group">
                                    <input type="number" min="0" max="60" class="form-control @error('early_departure_tolerance_minutes') is-invalid @enderror" 
                                           name="early_departure_tolerance_minutes" value="{{ old('early_departure_tolerance_minutes', $settings->early_departure_tolerance_minutes) }}">
                                    <span class="input-group-text">minutes</span>
                                    @error('early_departure_tolerance_minutes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Grace period for early departure</small>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="require_photo_clock_in" 
                                           id="require_photo_clock_in" value="1" 
                                           {{ $settings->require_photo_clock_in ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_photo_clock_in">
                                        <i class="bi bi-camera text-primary me-1"></i>
                                        <strong>Require Photo for Clock In</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Employees must take a photo when clocking in</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="require_location_clock_in" 
                                           id="require_location_clock_in" value="1" onclick="toggleLocationSettings()"
                                           {{ $settings->require_location_clock_in ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_location_clock_in">
                                        <i class="bi bi-geo-alt text-info me-1"></i>
                                        <strong>Require Location for Clock In</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">GPS location verification for clock in</small>
                            </div>
                        </div>

                        <div id="location_settings" style="{{ $settings->require_location_clock_in ? '' : 'display: none;' }}">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Location Radius (meters)</label>
                                    <div class="input-group">
                                        <input type="number" min="10" max="1000" class="form-control @error('location_radius_meters') is-invalid @enderror" 
                                               name="location_radius_meters" value="{{ old('location_radius_meters', $settings->location_radius_meters) }}">
                                        <span class="input-group-text">meters</span>
                                        @error('location_radius_meters')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">Allowed radius from office location</small>
                                </div>
                            </div>
                            
                            <!-- Office Locations Management -->
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label mb-0">Office Locations</label>
                                    <button type="button" class="btn btn-sm btn-primary" onclick="addOfficeLocation()">
                                        <i class="bi bi-plus-circle me-1"></i>Add Location
                                    </button>
                                </div>
                                <div id="office-locations">
                                    @php
                                        $locations = $settings->allowed_clock_in_locations ?? [];
                                    @endphp
                                    @if(empty($locations))
                                        <div class="alert alert-info">
                                            <i class="bi bi-info-circle me-2"></i>
                                            No office locations configured. Add at least one office location to enable geofencing.
                                        </div>
                                    @endif
                                    @foreach($locations as $index => $location)
                                        <div class="location-item card mb-2">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="form-label small">Location Name</label>
                                                        <input type="text" class="form-control form-control-sm" 
                                                               name="allowed_clock_in_locations[{{ $index }}][name]" 
                                                               value="{{ $location['name'] ?? '' }}" placeholder="e.g., Main Office">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label small">Latitude</label>
                                                        <input type="number" step="0.000001" class="form-control form-control-sm" 
                                                               name="allowed_clock_in_locations[{{ $index }}][latitude]" 
                                                               value="{{ $location['latitude'] ?? '' }}" placeholder="3.1390">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label small">Longitude</label>
                                                        <input type="number" step="0.000001" class="form-control form-control-sm" 
                                                               name="allowed_clock_in_locations[{{ $index }}][longitude]" 
                                                               value="{{ $location['longitude'] ?? '' }}" placeholder="101.6869">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label small">Actions</label>
                                                        <div class="btn-group w-100">
                                                            <button type="button" class="btn btn-sm btn-outline-info" onclick="getCurrentLocation({{ $index }})" title="Use Current Location">
                                                                <i class="bi bi-geo-alt"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="openMapPicker({{ $index }})" title="Pick from Map">
                                                                <i class="bi bi-map"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeLocation(this)" title="Remove Location">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-12">
                                                        <label class="form-label small">Address (Optional)</label>
                                                        <input type="text" class="form-control form-control-sm" 
                                                               name="allowed_clock_in_locations[{{ $index }}][address]" 
                                                               value="{{ $location['address'] ?? '' }}" placeholder="Full office address">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <small class="form-text text-muted">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Employees can only clock in when they are within the specified radius of these locations. 
                                    Use the "Current Location" button to automatically fill coordinates.
                                </small>
                                
                                @if(config('app.debug'))
                                    <div class="mt-2">
                                        <small class="text-muted">
                                            <strong>Debug Info:</strong> 
                                            Locations in DB: {{ count($settings->allowed_clock_in_locations ?? []) }}, 
                                            Require Location: {{ $settings->require_location_clock_in ? 'Yes' : 'No' }}
                                            <br>
                                            Raw Data: {{ json_encode($settings->allowed_clock_in_locations) }}
                                        </small>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Working Hours Configuration -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Working Hours Configuration</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Daily Working Hours <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="1" max="24" class="form-control @error('daily_working_hours') is-invalid @enderror" 
                                           name="daily_working_hours" value="{{ old('daily_working_hours', $settings->daily_working_hours) }}" required>
                                    <span class="input-group-text">hours</span>
                                    @error('daily_working_hours')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Weekly Working Hours <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="1" max="168" class="form-control @error('weekly_working_hours') is-invalid @enderror" 
                                           name="weekly_working_hours" value="{{ old('weekly_working_hours', $settings->weekly_working_hours) }}" required>
                                    <span class="input-group-text">hours</span>
                                    @error('weekly_working_hours')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Weekend Days</label>
                                <select class="form-select @error('weekend_days') is-invalid @enderror" name="weekend_days">
                                    <option value="saturday_sunday" {{ $settings->weekend_days === 'saturday_sunday' ? 'selected' : '' }}>Saturday & Sunday</option>
                                    <option value="friday_saturday" {{ $settings->weekend_days === 'friday_saturday' ? 'selected' : '' }}>Friday & Saturday</option>
                                    <option value="custom" {{ $settings->weekend_days === 'custom' ? 'selected' : '' }}>Custom</option>
                                </select>
                                @error('weekend_days')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label">Working Days</label>
                                <div class="row">
                                    @php
                                        $workingDays = $settings->working_days ?? ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
                                        $days = ['monday' => 'Monday', 'tuesday' => 'Tuesday', 'wednesday' => 'Wednesday', 'thursday' => 'Thursday', 'friday' => 'Friday', 'saturday' => 'Saturday', 'sunday' => 'Sunday'];
                                    @endphp
                                    @foreach($days as $value => $label)
                                        <div class="col-md-3 col-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="working_days[]" 
                                                       value="{{ $value }}" id="day_{{ $value }}"
                                                       {{ in_array($value, $workingDays) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="day_{{ $value }}">{{ $label }}</label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="flexible_working_hours" 
                                           id="flexible_working_hours" value="1" onclick="toggleFlexibleHours()"
                                           {{ $settings->flexible_working_hours ? 'checked' : '' }}>
                                    <label class="form-check-label" for="flexible_working_hours">
                                        <i class="bi bi-clock-history text-success me-1"></i>
                                        <strong>Flexible Working Hours</strong>
                                    </label>
                                </div>
                                <div id="flexible_hours_settings" style="{{ $settings->flexible_working_hours ? '' : 'display: none;' }}">
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label small">Earliest Start</label>
                                            <input type="time" class="form-control form-control-sm" name="flexible_start_earliest" 
                                                   value="{{ old('flexible_start_earliest', $settings->flexible_start_earliest?->format('H:i')) }}">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Latest Start</label>
                                            <input type="time" class="form-control form-control-sm" name="flexible_start_latest" 
                                                   value="{{ old('flexible_start_latest', $settings->flexible_start_latest?->format('H:i')) }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Overtime Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Overtime Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_calculate_overtime" 
                                           id="auto_calculate_overtime" value="1" 
                                           {{ $settings->auto_calculate_overtime ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_calculate_overtime">
                                        <i class="bi bi-calculator text-primary me-1"></i>
                                        <strong>Auto Calculate Overtime</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="require_overtime_approval" 
                                           id="require_overtime_approval" value="1" 
                                           {{ $settings->require_overtime_approval ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_overtime_approval">
                                        <i class="bi bi-shield-check text-warning me-1"></i>
                                        <strong>Require Overtime Approval</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Daily Overtime Threshold</label>
                                    <div class="input-group">
                                        <input type="number" step="0.5" min="1" max="24" class="form-control @error('overtime_threshold_daily') is-invalid @enderror" 
                                               name="overtime_threshold_daily" value="{{ old('overtime_threshold_daily', $settings->overtime_threshold_daily) }}">
                                        <span class="input-group-text">hours</span>
                                        @error('overtime_threshold_daily')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">Overtime applies after this many hours</small>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Max Monthly Overtime Hours</label>
                                    <div class="input-group">
                                        <input type="number" min="0" max="200" class="form-control @error('max_overtime_hours_monthly') is-invalid @enderror" 
                                               name="max_overtime_hours_monthly" value="{{ old('max_overtime_hours_monthly', $settings->max_overtime_hours_monthly) }}">
                                        <span class="input-group-text">hours</span>
                                        @error('max_overtime_hours_monthly')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">Malaysian Employment Act: Maximum 104 hours/month</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Leave Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Leave Entitlements & Policies</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Annual Leave</label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="0" max="50" class="form-control @error('annual_leave_entitlement') is-invalid @enderror" 
                                           name="annual_leave_entitlement" value="{{ old('annual_leave_entitlement', $settings->annual_leave_entitlement) }}">
                                    <span class="input-group-text">days</span>
                                    @error('annual_leave_entitlement')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Sick Leave</label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="0" max="50" class="form-control @error('sick_leave_entitlement') is-invalid @enderror" 
                                           name="sick_leave_entitlement" value="{{ old('sick_leave_entitlement', $settings->sick_leave_entitlement) }}">
                                    <span class="input-group-text">days</span>
                                    @error('sick_leave_entitlement')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Maternity Leave</label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="0" max="100" class="form-control @error('maternity_leave_entitlement') is-invalid @enderror" 
                                           name="maternity_leave_entitlement" value="{{ old('maternity_leave_entitlement', $settings->maternity_leave_entitlement) }}">
                                    <span class="input-group-text">days</span>
                                    @error('maternity_leave_entitlement')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Paternity Leave</label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="0" max="30" class="form-control @error('paternity_leave_entitlement') is-invalid @enderror" 
                                           name="paternity_leave_entitlement" value="{{ old('paternity_leave_entitlement', $settings->paternity_leave_entitlement) }}">
                                    <span class="input-group-text">days</span>
                                    @error('paternity_leave_entitlement')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Leave Year Start</label>
                                <select class="form-select @error('leave_year_start') is-invalid @enderror" name="leave_year_start">
                                    <option value="calendar" {{ $settings->leave_year_start === 'calendar' ? 'selected' : '' }}>Calendar Year (Jan 1)</option>
                                    <option value="financial" {{ $settings->leave_year_start === 'financial' ? 'selected' : '' }}>Financial Year (Apr 1)</option>
                                    <option value="hire_date" {{ $settings->leave_year_start === 'hire_date' ? 'selected' : '' }}>Employee Hire Date</option>
                                </select>
                                @error('leave_year_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Max Carry Forward Days</label>
                                <div class="input-group">
                                    <input type="number" min="0" max="30" class="form-control @error('max_carry_forward_days') is-invalid @enderror" 
                                           name="max_carry_forward_days" value="{{ old('max_carry_forward_days', $settings->max_carry_forward_days) }}">
                                    <span class="input-group-text">days</span>
                                    @error('max_carry_forward_days')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Medical Cert Required After</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="10" class="form-control @error('medical_cert_required_after_days') is-invalid @enderror" 
                                           name="medical_cert_required_after_days" value="{{ old('medical_cert_required_after_days', $settings->medical_cert_required_after_days) }}">
                                    <span class="input-group-text">days</span>
                                    @error('medical_cert_required_after_days')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="allow_negative_leave_balance" 
                                           id="allow_negative_leave_balance" value="1" 
                                           {{ $settings->allow_negative_leave_balance ? 'checked' : '' }}>
                                    <label class="form-check-label" for="allow_negative_leave_balance">
                                        <strong>Allow Negative Leave Balance</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="carry_forward_unused_leave" 
                                           id="carry_forward_unused_leave" value="1" 
                                           {{ $settings->carry_forward_unused_leave ? 'checked' : '' }}>
                                    <label class="form-check-label" for="carry_forward_unused_leave">
                                        <strong>Carry Forward Unused Leave</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="allow_half_day_leave" 
                                           id="allow_half_day_leave" value="1" 
                                           {{ $settings->allow_half_day_leave ? 'checked' : '' }}>
                                    <label class="form-check-label" for="allow_half_day_leave">
                                        <strong>Allow Half Day Leave</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="allow_hourly_leave" 
                                           id="allow_hourly_leave" value="1" 
                                           {{ $settings->allow_hourly_leave ? 'checked' : '' }}>
                                    <label class="form-check-label" for="allow_hourly_leave">
                                        <strong>Allow Hourly Leave</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="require_medical_certificate_sick_leave" 
                                           id="require_medical_certificate_sick_leave" value="1" 
                                           {{ $settings->require_medical_certificate_sick_leave ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_medical_certificate_sick_leave">
                                        <strong>Require Medical Certificate for Sick Leave</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="auto_update_malaysian_holidays" 
                                           id="auto_update_malaysian_holidays" value="1" 
                                           {{ $settings->auto_update_malaysian_holidays ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_update_malaysian_holidays">
                                        <strong>Auto Update Malaysian Public Holidays</strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Approval Workflow -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Leave Approval Workflow</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Minimum Notice Days</label>
                                <div class="input-group">
                                    <input type="number" min="0" max="30" class="form-control @error('min_advance_notice_days') is-invalid @enderror" 
                                           name="min_advance_notice_days" value="{{ old('min_advance_notice_days', $settings->min_advance_notice_days) }}">
                                    <span class="input-group-text">days</span>
                                    @error('min_advance_notice_days')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Minimum advance notice required</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Max Advance Application</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="730" class="form-control @error('max_advance_application_days') is-invalid @enderror" 
                                           name="max_advance_application_days" value="{{ old('max_advance_application_days', $settings->max_advance_application_days) }}">
                                    <span class="input-group-text">days</span>
                                    @error('max_advance_application_days')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">How far in advance can leave be applied</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Approval Timeout</label>
                                <div class="input-group">
                                    <input type="number" min="1" max="30" class="form-control @error('approval_timeout_days') is-invalid @enderror" 
                                           name="approval_timeout_days" value="{{ old('approval_timeout_days', $settings->approval_timeout_days) }}">
                                    <span class="input-group-text">days</span>
                                    @error('approval_timeout_days')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Auto-approve if no response</small>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="require_manager_approval" 
                                           id="require_manager_approval" value="1" 
                                           {{ $settings->require_manager_approval ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_manager_approval">
                                        <i class="bi bi-person-check text-primary me-1"></i>
                                        <strong>Require Manager Approval</strong>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="require_hr_approval" 
                                           id="require_hr_approval" value="1" 
                                           {{ $settings->require_hr_approval ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_hr_approval">
                                        <i class="bi bi-shield-check text-warning me-1"></i>
                                        <strong>Require HR Approval</strong>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="notify_team_on_leave_approval" 
                                           id="notify_team_on_leave_approval" value="1" 
                                           {{ $settings->notify_team_on_leave_approval ? 'checked' : '' }}>
                                    <label class="form-check-label" for="notify_team_on_leave_approval">
                                        <i class="bi bi-bell text-info me-1"></i>
                                        <strong>Notify Team on Leave Approval</strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{{ route('companies.hr.settings', $company) }}" 
                       class="btn btn-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle"></i> Update Attendance & Leave Settings
                    </button>
                </div>
            </form>
        </div>

        <!-- Sidebar Info -->
        <div class="col-lg-4">
            <!-- Current Configuration -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Current Configuration</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center mb-3">
                        <div class="col-6">
                            <div class="small text-muted">Working Hours</div>
                            <div class="fw-bold">{{ $settings->daily_working_hours }}h/day</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Weekly Hours</div>
                            <div class="fw-bold">{{ $settings->weekly_working_hours }}h/week</div>
                        </div>
                    </div>
                    <div class="row text-center mb-3">
                        <div class="col-6">
                            <div class="small text-muted">Annual Leave</div>
                            <div class="fw-bold">{{ $settings->annual_leave_entitlement }} days</div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">Sick Leave</div>
                            <div class="fw-bold">{{ $settings->sick_leave_entitlement }} days</div>
                        </div>
                    </div>
                    <div class="small text-muted">
                        <strong>Work Schedule:</strong><br>
                        {{ $settings->standard_work_start_time?->format('H:i') }} - {{ $settings->standard_work_end_time?->format('H:i') }}
                    </div>
                </div>
            </div>

            <!-- Malaysian Employment Act Guide -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian Employment Act 1955</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-primary">Working Hours:</strong>
                        <ul class="small mt-2">
                            <li>Maximum 8 hours per day</li>
                            <li>Maximum 48 hours per week</li>
                            <li>6 working days per week maximum</li>
                            <li>Overtime minimum 1.5x rate</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <strong class="text-success">Leave Entitlements:</strong>
                        <ul class="small mt-2">
                            <li><strong>Annual:</strong> 8-16 days (based on service)</li>
                            <li><strong>Sick:</strong> 14-18 days per year</li>
                            <li><strong>Maternity:</strong> 60 days (mandatory)</li>
                            <li><strong>Paternity:</strong> 7 days (recent amendment)</li>
                        </ul>
                    </div>

                    <div>
                        <strong class="text-warning">Overtime Limits:</strong>
                        <ul class="small mt-2">
                            <li>Maximum 104 hours per month</li>
                            <li>Director General approval needed for more</li>
                            <li>Public holidays: Double time</li>
                            <li>Rest days: 1.5x minimum</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Quick Templates -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Quick Setup Templates</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm template-btn" 
                                data-template="standard_office">
                            <i class="bi bi-building me-1"></i> Standard Office (9-6)
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm template-btn" 
                                data-template="flexible_hours">
                            <i class="bi bi-clock-history me-1"></i> Flexible Hours
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm template-btn" 
                                data-template="shift_work">
                            <i class="bi bi-arrow-repeat me-1"></i> Shift Work
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm template-btn" 
                                data-template="compliance_max">
                            <i class="bi bi-shield-check me-1"></i> Full Compliance
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function toggleLocationSettings() {
    const checkbox = document.getElementById('require_location_clock_in');
    const settings = document.getElementById('location_settings');
    settings.style.display = checkbox.checked ? '' : 'none';
}

function toggleFlexibleHours() {
    const checkbox = document.getElementById('flexible_working_hours');
    const settings = document.getElementById('flexible_hours_settings');
    settings.style.display = checkbox.checked ? '' : 'none';
}

// Office Location Management Functions
let locationIndex = {{ count($locations ?? []) }};

function addOfficeLocation() {
    const container = document.getElementById('office-locations');
    const template = `
        <div class="location-item card mb-2">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label small">Location Name</label>
                        <input type="text" class="form-control form-control-sm" 
                               name="allowed_clock_in_locations[${locationIndex}][name]" 
                               placeholder="e.g., Main Office">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Latitude</label>
                        <input type="number" step="0.000001" class="form-control form-control-sm" 
                               name="allowed_clock_in_locations[${locationIndex}][latitude]" 
                               placeholder="3.1390">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Longitude</label>
                        <input type="number" step="0.000001" class="form-control form-control-sm" 
                               name="allowed_clock_in_locations[${locationIndex}][longitude]" 
                               placeholder="101.6869">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Actions</label>
                        <div class="btn-group w-100">
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="getCurrentLocation(${locationIndex})" title="Use Current Location">
                                <i class="bi bi-geo-alt"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="openMapPicker(${locationIndex})" title="Pick from Map">
                                <i class="bi bi-map"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeLocation(this)" title="Remove Location">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-12">
                        <label class="form-label small">Address (Optional)</label>
                        <input type="text" class="form-control form-control-sm" 
                               name="allowed_clock_in_locations[${locationIndex}][address]" 
                               placeholder="Full office address">
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove empty alert if it exists
    const emptyAlert = container.querySelector('.alert-info');
    if (emptyAlert) {
        emptyAlert.remove();
    }
    
    container.insertAdjacentHTML('beforeend', template);
    locationIndex++;
}

function removeLocation(button) {
    if (confirm('Are you sure you want to remove this office location?')) {
        const locationItem = button.closest('.location-item');
        locationItem.remove();
        
        // Check if no locations remain and show empty alert
        const container = document.getElementById('office-locations');
        if (container.children.length === 0) {
            container.innerHTML = `
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    No office locations configured. Add at least one office location to enable geofencing.
                </div>
            `;
        }
    }
}

function getCurrentLocation(index) {
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="bi bi-arrow-clockwise"></i>';
    button.disabled = true;
    
    // Check if HTTPS (required for geolocation in most browsers)
    if (location.protocol !== 'https:' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
        alert('⚠️ Location access requires HTTPS connection. Please use HTTPS or test on localhost.\n\nCurrent URL: ' + location.protocol + '//' + location.host);
        button.innerHTML = originalText;
        button.disabled = false;
        return;
    }
    
    if (!navigator.geolocation) {
        alert('❌ Geolocation is not supported by this browser. Please enter coordinates manually.');
        button.innerHTML = originalText;
        button.disabled = false;
        return;
    }
    
    console.log('🌐 Requesting location for office location index:', index);
    
    navigator.geolocation.getCurrentPosition(
        function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            const accuracy = position.coords.accuracy;
            
            console.log('✅ Location obtained:', { lat, lng, accuracy });
            
            // Fill the coordinates
            const latField = document.querySelector(`[name="allowed_clock_in_locations[${index}][latitude]"]`);
            const lngField = document.querySelector(`[name="allowed_clock_in_locations[${index}][longitude]"]`);
            
            if (latField && lngField) {
                latField.value = lat.toFixed(6);
                lngField.value = lng.toFixed(6);
                
                // Show success message
                button.innerHTML = '<i class="bi bi-check-circle text-success"></i>';
                setTimeout(() => {
                    button.innerHTML = originalText;
                    button.disabled = false;
                }, 2000);
                
                // Try to get address (simplified) - only if empty
                const addressField = document.querySelector(`[name="allowed_clock_in_locations[${index}][address]"]`);
                if (addressField && !addressField.value) {
                    // Try reverse geocoding with a simple service
                    fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.locality || data.city) {
                                const address = [data.locality, data.city, data.countryName].filter(Boolean).join(', ');
                                addressField.value = address;
                            } else {
                                addressField.value = `Coordinates: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
                            }
                        })
                        .catch(() => {
                            addressField.value = `Coordinates: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
                        });
                }
                
                // Show success notification
                showNotification('✅ Location captured successfully! Accuracy: ±' + Math.round(accuracy) + 'm', 'success');
            } else {
                console.error('❌ Could not find input fields for index:', index);
                alert('❌ Error: Could not find coordinate input fields. Please refresh the page and try again.');
                button.innerHTML = originalText;
                button.disabled = false;
            }
        },
        function(error) {
            console.error('❌ Geolocation error:', error);
            
            let message = '❌ Location access failed';
            let suggestion = '';
            
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message = '🚫 Location access denied by user';
                    suggestion = '\n\n💡 To fix this:\n• Click the location icon in your browser\'s address bar\n• Allow location access for this site\n• Refresh and try again';
                    break;
                case error.POSITION_UNAVAILABLE:
                    message = '📡 Location information unavailable';
                    suggestion = '\n\n💡 This could be due to:\n• Weak GPS signal\n• Network connectivity issues\n• Device location services disabled';
                    break;
                case error.TIMEOUT:
                    message = '⏱️ Location request timed out';
                    suggestion = '\n\n💡 Try again or check your:\n• Internet connection\n• Device location services';
                    break;
                default:
                    message = '❌ Unknown location error';
                    break;
            }
            
            alert(message + suggestion + '\n\n📝 You can enter coordinates manually instead.');
            button.innerHTML = originalText;
            button.disabled = false;
            
            showNotification(message.replace('❌ ', '').replace('🚫 ', '').replace('📡 ', '').replace('⏱️ ', ''), 'error');
        },
        {
            enableHighAccuracy: true,
            timeout: 15000, // Increased timeout
            maximumAge: 30000 // Reduced cache time for more accurate results
        }
    );
}

// Helper function to show notifications
function showNotification(message, type) {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `alert alert-${type === 'success' ? 'success' : 'warning'} alert-dismissible fade show position-fixed`;
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 1050; max-width: 400px;';
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 5000);
}

// Map picker function (alternative to current location)
function openMapPicker(index) {
    // Create a simple coordinate input modal
    const modal = document.createElement('div');
    modal.className = 'modal fade';
    modal.innerHTML = `
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">📍 Enter Office Coordinates</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>💡 How to get coordinates:</strong><br>
                        1. Open <a href="https://maps.google.com" target="_blank">Google Maps</a><br>
                        2. Right-click on your office location<br>
                        3. Copy the coordinates (first two numbers)<br>
                        4. Paste them below
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">Latitude</label>
                            <input type="number" step="0.000001" class="form-control" id="modal-lat" placeholder="3.139003">
                            <small class="text-muted">Example: 3.139003</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Longitude</label>
                            <input type="number" step="0.000001" class="form-control" id="modal-lng" placeholder="101.686855">
                            <small class="text-muted">Example: 101.686855</small>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="form-label">Office Address (Optional)</label>
                        <input type="text" class="form-control" id="modal-address" placeholder="Enter office address">
                    </div>
                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="testCurrentLocationInModal()">
                            <i class="bi bi-geo-alt"></i> Try Current Location Again
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="applyCoordinates(${index})">Apply Coordinates</button>
                </div>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
    
    // Clean up when modal is closed
    modal.addEventListener('hidden.bs.modal', function () {
        modal.remove();
    });
}

function applyCoordinates(index) {
    const lat = document.getElementById('modal-lat').value;
    const lng = document.getElementById('modal-lng').value;
    const address = document.getElementById('modal-address').value;
    
    if (!lat || !lng) {
        alert('❌ Please enter both latitude and longitude coordinates.');
        return;
    }
    
    if (isNaN(lat) || isNaN(lng)) {
        alert('❌ Please enter valid numeric coordinates.');
        return;
    }
    
    if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
        alert('❌ Please enter valid coordinate ranges:\n• Latitude: -90 to 90\n• Longitude: -180 to 180');
        return;
    }
    
    // Fill the coordinates
    const latField = document.querySelector(`[name="allowed_clock_in_locations[${index}][latitude]"]`);
    const lngField = document.querySelector(`[name="allowed_clock_in_locations[${index}][longitude]"]`);
    const addressField = document.querySelector(`[name="allowed_clock_in_locations[${index}][address]"]`);
    
    if (latField && lngField) {
        latField.value = parseFloat(lat).toFixed(6);
        lngField.value = parseFloat(lng).toFixed(6);
        
        if (addressField && address) {
            addressField.value = address;
        }
        
        showNotification('✅ Coordinates applied successfully!', 'success');
        
        // Close modal
        const modal = document.querySelector('.modal.show');
        if (modal) {
            bootstrap.Modal.getInstance(modal).hide();
        }
    } else {
        alert('❌ Error: Could not find coordinate input fields.');
    }
}

function testCurrentLocationInModal() {
    if (!navigator.geolocation) {
        alert('❌ Geolocation is not supported by this browser.');
        return;
    }
    
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Getting location...';
    button.disabled = true;
    
    navigator.geolocation.getCurrentPosition(
        function(position) {
            document.getElementById('modal-lat').value = position.coords.latitude.toFixed(6);
            document.getElementById('modal-lng').value = position.coords.longitude.toFixed(6);
            
            button.innerHTML = '<i class="bi bi-check-circle text-success"></i> Location obtained!';
            setTimeout(() => {
                button.innerHTML = originalText;
                button.disabled = false;
            }, 2000);
        },
        function(error) {
            let message = 'Location access failed: ';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message += 'Permission denied';
                    break;
                case error.POSITION_UNAVAILABLE:
                    message += 'Position unavailable';
                    break;
                case error.TIMEOUT:
                    message += 'Request timeout';
                    break;
                default:
                    message += 'Unknown error';
                    break;
            }
            
            alert('❌ ' + message);
            button.innerHTML = originalText;
            button.disabled = false;
        },
        {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 60000
        }
    );
}

// Template functionality
document.addEventListener('DOMContentLoaded', function() {
    const templates = {
        standard_office: {
            standard_work_start_time: '09:00',
            standard_work_end_time: '18:00',
            lunch_break_start: '12:00',
            lunch_break_end: '13:00',
            daily_working_hours: 8,
            weekly_working_hours: 40,
            overtime_threshold_daily: 8,
            late_tolerance_minutes: 15
        },
        flexible_hours: {
            flexible_working_hours: true,
            flexible_start_earliest: '07:00',
            flexible_start_latest: '10:00',
            daily_working_hours: 8,
            weekly_working_hours: 40
        },
        shift_work: {
            daily_working_hours: 8,
            weekly_working_hours: 48,
            require_overtime_approval: true,
            max_overtime_hours_monthly: 104
        },
        compliance_max: {
            daily_working_hours: 8,
            weekly_working_hours: 48,
            max_overtime_hours_monthly: 104,
            annual_leave_entitlement: 12,
            sick_leave_entitlement: 14,
            maternity_leave_entitlement: 60,
            paternity_leave_entitlement: 7,
            require_manager_approval: true,
            require_medical_certificate_sick_leave: true
        }
    };

    document.querySelectorAll('.template-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const template = templates[this.dataset.template];
            if (template) {
                Object.keys(template).forEach(key => {
                    const input = document.querySelector(`[name="${key}"]`);
                    if (input) {
                        if (input.type === 'checkbox') {
                            input.checked = template[key];
                        } else {
                            input.value = template[key];
                        }
                    }
                });
                alert(`Applied ${this.textContent.trim()} template`);
            }
        });
    });
});
</script>
@endpush
@endsection