@extends('layouts.admin')

@section('page_title', 'System Settings')

@section('content')
    <div class="row align-items-center mb-5">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-weight: 800; font-size: 1.875rem;">System Settings</h2>
            <p class="text-secondary opacity-75 mb-0">Configure application behavior, policy thresholds, and integration
                options.</p>
        </div>
        <div class="col-auto">
            <button type="submit" form="mainSettingsForm"
                class="btn btn-primary px-4 py-2 fw-bold d-flex align-items-center gap-2 shadow-sm rounded-3"
                style="font-size: 0.9375rem;">
                <span class="material-symbols-outlined" style="font-size: 1.25rem;">save</span>
                Save All Settings
            </button>
        </div>
    </div>

    <div class="row g-4">
        <!-- Vertical Tabs Navigation -->
        <div class="col-lg-3">
            <div class="card border-0 shadow-sm overflow-hidden sticky-top"
                style="top: 2rem; border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                <div class="p-4 border-bottom bg-light bg-opacity-50">
                    <p class="text-uppercase fw-extrabold text-secondary mb-0 opacity-50"
                        style="font-size: 0.65rem; letter-spacing: 0.1rem;">Configuration Menu</p>
                </div>
                <div class="list-group list-group-flush p-3 nav-settings" id="settingsTabs" role="tablist">
                    <a class="list-group-item list-group-item-action active d-flex align-items-center mb-2 rounded-3 text-secondary fw-semibold transition-all"
                        data-bs-toggle="list" href="#group-general" role="tab">
                        <span class="material-symbols-outlined fs-5 me-3 opacity-75">display_settings</span> General
                        Settings
                    </a>
                    <a class="list-group-item list-group-item-action d-flex align-items-center mb-2 rounded-3 text-secondary fw-semibold transition-all"
                        data-bs-toggle="list" href="#group-attendance" role="tab">
                        <span class="material-symbols-outlined fs-5 me-3 opacity-75">schedule</span> Attendance Policy
                    </a>
                    <a class="list-group-item list-group-item-action d-flex align-items-center mb-2 rounded-3 text-secondary fw-semibold transition-all"
                        data-bs-toggle="list" href="#group-leave" role="tab">
                        <span class="material-symbols-outlined fs-5 me-3 opacity-75">calendar_add_on</span> Leave Policy
                    </a>
                    <a class="list-group-item list-group-item-action d-flex align-items-center mb-2 rounded-3 text-secondary fw-semibold transition-all"
                        data-bs-toggle="list" href="#group-mail" role="tab">
                        <span class="material-symbols-outlined fs-5 me-3 opacity-75">mail</span> Email / SMTP
                    </a>
                    <a class="list-group-item list-group-item-action d-flex align-items-center mb-2 rounded-3 text-secondary fw-semibold transition-all"
                        data-bs-toggle="list" href="#group-firebase" role="tab">
                        <span class="material-symbols-outlined fs-5 me-3 opacity-75">local_fire_department</span> Firebase
                        Config
                    </a>
                    <a class="list-group-item list-group-item-action d-flex align-items-center rounded-3 text-secondary fw-semibold transition-all"
                        data-bs-toggle="list" href="#test-notifications" role="tab">
                        <span class="material-symbols-outlined fs-5 me-3 opacity-75">notifications_active</span> Test
                        Notifications
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data"
                id="mainSettingsForm">
                @csrf
                @method('PUT')

                <div class="tab-content">
                    <!-- General Settings -->
                    <div class="tab-pane fade show active" id="group-general" role="tabpanel">
                        <div class="card border-0 shadow-sm mb-4"
                            style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                            <div class="card-body p-4 p-md-5">
                                <h5 class="fw-bold mb-4 d-flex align-items-center gap-2"><span
                                        class="material-symbols-outlined text-primary">display_settings</span> General
                                    details</h5>

                                <div class="row g-4 mb-5">
                                    <div class="col-md-12">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Application Title</label>
                                        <input type="text" name="app_name"
                                            class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark"
                                            value="{{ \App\Models\SystemSetting::getValue('app_name', 'WorkFlow') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Default Timezone</label>
                                        <select name="timezone"
                                            class="form-select border-0 bg-light py-2.5 rounded-3 fw-medium select2">
                                            @foreach ($timezones as $tz)
                                                <option value="{{ $tz }}"
                                                    {{ \App\Models\SystemSetting::getValue('timezone') == $tz ? 'selected' : '' }}>
                                                    {{ $tz }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Currency Symbol</label>
                                        <input type="text" name="currency"
                                            class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark"
                                            value="{{ \App\Models\SystemSetting::getValue('currency', 'PKR') }}">
                                    </div>
                                </div>

                                <h5 class="fw-bold mb-4 pt-4 border-top d-flex align-items-center gap-2"><span
                                        class="material-symbols-outlined text-primary">palette</span> Branding & Identity
                                </h5>

                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Company Logo</label>
                                        <div class="logo-upload-zone p-4 text-center border rounded-3 bg-light transition-all"
                                            onclick="document.getElementById('logoInput').click()">
                                            @php $currentLogo = \App\Models\SystemSetting::getValue('site_logo'); @endphp
                                            <div class="mb-3 d-flex justify-content-center">
                                                @if ($currentLogo)
                                                    <img src="{{ url($currentLogo) }}" height="40"
                                                        class="shadow-sm rounded bg-white p-1">
                                                @else
                                                    <span
                                                        class="material-symbols-outlined fs-1 text-primary">cloud_upload</span>
                                                @endif
                                            </div>
                                            <p class="mb-1 fw-bold text-dark" style="font-size: 0.8125rem;">Click to
                                                upload logo</p>
                                            <p class="mb-0 text-secondary" style="font-size: 0.7rem;">SVG, PNG or JPG
                                                (Max. 2MB)</p>
                                            <input type="file" name="site_logo" id="logoInput" class="d-none"
                                                accept="image/*">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Favicon Icon</label>
                                        <div
                                            class="p-4 border rounded-3 bg-light d-flex flex-column align-items-center justify-content-center h-100 position-relative border-bottom-0 pb-2">
                                            <div class="bg-white rounded-top shadow-sm border p-2 d-flex align-items-center"
                                                style="width: 180px; height: 36px; border-bottom: 0 !important;">
                                                <div id="faviconIconPreview" class="me-2 d-flex align-items-center">
                                                    @php $currentFav = \App\Models\SystemSetting::getValue('site_favicon'); @endphp
                                                    @if ($currentFav)
                                                        <img src="{{ url($currentFav) }}" width="16" height="16">
                                                    @else
                                                        <div class="bg-secondary opacity-25 rounded-circle"
                                                            style="width: 16px; height: 16px;"></div>
                                                    @endif
                                                </div>
                                                <span class="text-truncate text-dark fw-medium"
                                                    style="font-size: 0.75rem;">Dashboard - Roznama</span>
                                            </div>
                                            <input type="file" name="site_favicon"
                                                class="form-control form-control-sm border-0 position-absolute bottom-0 w-100 bg-white"
                                                accept="image/*">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Primary Color</label>
                                        <div class="d-flex align-items-center gap-3">
                                            <input type="color" name="primary_color"
                                                class="form-control form-control-color border-0 bg-light p-1 shadow-sm"
                                                value="{{ \App\Models\SystemSetting::getValue('primary_color', '#0d6efd') }}"
                                                style="width: 44px; height: 44px;">
                                            <input type="text"
                                                class="form-control font-monospace border-0 bg-light py-2 px-3 fw-bold"
                                                value="{{ \App\Models\SystemSetting::getValue('primary_color', '#0d6efd') }}"
                                                readonly>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Secondary Color</label>
                                        <div class="d-flex align-items-center gap-3">
                                            <input type="color" name="secondary_color"
                                                class="form-control form-control-color border-0 bg-light p-1 shadow-sm"
                                                value="{{ \App\Models\SystemSetting::getValue('secondary_color', '#6c757d') }}"
                                                style="width: 44px; height: 44px;">
                                            <input type="text"
                                                class="form-control font-monospace border-0 bg-light py-2 px-3 fw-bold"
                                                value="{{ \App\Models\SystemSetting::getValue('secondary_color', '#6c757d') }}"
                                                readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Attendance Policy -->
                    <div class="tab-pane fade" id="group-attendance" role="tabpanel">
                        <div class="card border-0 shadow-sm mb-4"
                            style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                            <div class="card-body p-4 p-md-5">
                                <h5 class="fw-bold mb-4 d-flex align-items-center gap-2"><span
                                        class="material-symbols-outlined text-primary">schedule</span> Shift Timing Policy
                                </h5>

                                <div class="row g-4 mb-5">
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Office Start Time</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light border-0 ps-3 pe-2"><span
                                                    class="material-symbols-outlined text-secondary"
                                                    style="font-size: 1.1rem;">login</span></span>
                                            <input type="time" name="office_start_time"
                                                class="form-control border-0 bg-light py-2.5 rounded-end-3 text-dark fw-bold"
                                                value="{{ \App\Models\SystemSetting::getValue('office_start_time', '09:00') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Office End Time</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light border-0 ps-3 pe-2"><span
                                                    class="material-symbols-outlined text-secondary"
                                                    style="font-size: 1.1rem;">logout</span></span>
                                            <input type="time" name="office_end_time"
                                                class="form-control border-0 bg-light py-2.5 rounded-end-3 text-dark fw-bold"
                                                value="{{ \App\Models\SystemSetting::getValue('office_end_time', '18:00') }}">
                                        </div>
                                    </div>
                                </div>

                                <h5 class="fw-bold mb-4 pt-4 border-top d-flex align-items-center gap-2"><span
                                        class="material-symbols-outlined text-warning">warning</span> Grace & Penalties
                                </h5>

                                <div class="row g-4 mb-5">
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Late Arrival
                                            Threshold</label>
                                        <div class="input-group">
                                            <input type="number" name="late_threshold_minutes"
                                                class="form-control border-0 bg-light py-2.5 rounded-start-3"
                                                value="{{ \App\Models\SystemSetting::getValue('late_threshold_minutes', '15') }}">
                                            <span
                                                class="input-group-text bg-light border-0 border-start border-secondary border-opacity-10 fw-medium text-secondary"
                                                style="font-size: 0.8rem;">minutes</span>
                                        </div>
                                        <p class="text-secondary opacity-75 mt-2 mb-0" style="font-size: 0.75rem;">Allowed
                                            grace period before marking entry as late.</p>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Half-Day Threshold</label>
                                        <div class="input-group">
                                            <input type="number" name="half_day_threshold_minutes"
                                                class="form-control border-0 bg-light py-2.5 rounded-start-3"
                                                value="{{ \App\Models\SystemSetting::getValue('half_day_threshold_minutes', '120') }}">
                                            <span
                                                class="input-group-text bg-light border-0 border-start border-secondary border-opacity-10 fw-medium text-secondary"
                                                style="font-size: 0.8rem;">minutes</span>
                                        </div>
                                        <p class="text-secondary opacity-75 mt-2 mb-0" style="font-size: 0.75rem;">Delay
                                            leading to an automatic half-day mark.</p>
                                    </div>
                                </div>

                                <h5 class="fw-bold mb-4 pt-4 border-top d-flex align-items-center gap-2"><span
                                        class="material-symbols-outlined text-info">event</span> Weekly Off Days</h5>

                                <div class="d-flex flex-wrap gap-2" id="weekendSelection">
                                    @php $weekends = explode(',', \App\Models\SystemSetting::getValue('weekend_days', 'Saturday,Sunday')); @endphp
                                    @foreach (['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
                                        <div class="form-check p-0 mb-0">
                                            <input type="checkbox" class="btn-check" id="btn-check-{{ $day }}"
                                                name="weekend_days[]" value="{{ $day }}"
                                                {{ in_array($day, $weekends) ? 'checked' : '' }}>
                                            <label class="btn btn-outline-primary rounded-pill px-4 py-1.5 fw-bold"
                                                style="font-size: 0.8125rem;"
                                                for="btn-check-{{ $day }}">{{ substr($day, 0, 3) }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Other Dynamic Groups (Fallback logic updated with styles) -->
                    @foreach ($settings as $group => $groupSettings)
                        @if (!in_array($group, ['general', 'attendance']))
                            <div class="tab-pane fade" id="group-{{ $group }}" role="tabpanel">
                                <div class="card border-0 shadow-sm mb-4"
                                    style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                                    <div class="card-body p-4 p-md-5">
                                        <h5 class="fw-bold mb-4 text-capitalize d-flex align-items-center gap-2"><span
                                                class="material-symbols-outlined text-primary">app_settings_alt</span>
                                            {{ $group }} Variables</h5>

                                        <div class="row g-4">
                                            @foreach ($groupSettings as $setting)
                                                <div class="col-md-6">
                                                    <label
                                                        class="text-uppercase fw-bold text-secondary mb-2 d-block text-truncate"
                                                        style="font-size: 0.65rem; letter-spacing: 0.05rem;"
                                                        title="{{ $setting->label }}">{{ $setting->label }}</label>
                                                    @if (str_contains($setting->key, 'password') ||
                                                            str_contains($setting->key, 'secret') ||
                                                            str_contains($setting->key, 'key'))
                                                        <input type="password" name="{{ $setting->key }}"
                                                            class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark"
                                                            value="{{ $setting->value }}">
                                                    @elseif(str_contains($setting->key, 'enabled') || str_contains($setting->key, 'required'))
                                                        <select name="{{ $setting->key }}"
                                                            class="form-select border-0 bg-light py-2.5 rounded-3 fw-medium">
                                                            <option value="1"
                                                                {{ $setting->value == '1' ? 'selected' : '' }}>Enabled /
                                                                Yes</option>
                                                            <option value="0"
                                                                {{ $setting->value == '0' ? 'selected' : '' }}>Disabled /
                                                                No</option>
                                                        </select>
                                                    @else
                                                        <input type="text" name="{{ $setting->key }}"
                                                            class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark"
                                                            value="{{ $setting->value }}">
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach

                    <!-- Test Notifications Tab -->
                    <div class="tab-pane fade" id="test-notifications" role="tabpanel">
                        <div class="card border-0 shadow-sm mb-4"
                            style="border-radius: 1rem; border: 1px solid rgba(0,0,0,0.05) !important;">
                            <div class="card-body p-4 p-md-5">
                                <h5 class="fw-bold mb-4 d-flex align-items-center gap-2"><span
                                        class="material-symbols-outlined text-primary">campaign</span> Push Notification
                                    Sandbox</h5>

                                <div class="row g-4 mb-4">
                                    <div class="col-md-12">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Target Recipient</label>
                                        <select id="test_user_id"
                                            class="form-select border-0 bg-light py-2.5 rounded-3 fw-medium select2">
                                            <option value="" disabled selected>Select an employee...</option>
                                            @foreach ($users as $u)
                                                <option value="{{ $u->id }}">{{ $u->name }}
                                                    ({{ $u->role }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Notification Title</label>
                                        <input type="text" id="test_title"
                                            class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark"
                                            value="Test Message">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                                            style="font-size: 0.65rem; letter-spacing: 0.05rem;">Message Body</label>
                                        <input type="text" id="test_body"
                                            class="form-control border-0 bg-light py-2.5 rounded-3 fw-medium text-dark"
                                            value="This is a test notification from the settings panel.">
                                    </div>
                                </div>

                                <div class="pt-2">
                                    <button type="button" onclick="submitTestNotice()"
                                        class="btn btn-outline-primary px-4 py-2 border-2 fw-bold shadow-sm rounded-3 d-flex align-items-center gap-2"
                                        style="font-size: 0.875rem;">
                                        <span class="material-symbols-outlined fs-5">send</span> Dispatch Test
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <form id="hiddenTestForm" action="{{ route('admin.settings.test-notification') }}" method="POST"
                style="display:none;">
                @csrf
                <input type="hidden" name="user_id" id="hidden_user_id">
                <input type="hidden" name="title" id="hidden_title">
                <input type="hidden" name="body" id="hidden_body">
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .nav-settings .list-group-item {
            border: 0;
            padding: 0.875rem 1rem !important;
            font-size: 0.875rem;
            color: #64748b;
            background: transparent;
        }

        .nav-settings .list-group-item.active {
            background-color: var(--primary-color) !important;
            color: white !important;
            opacity: 1;
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
        }

        .nav-settings .list-group-item:not(.active):hover {
            background-color: rgba(248, 250, 252, 0.8) !important;
            color: #1a1f2e !important;
        }

        .nav-settings .list-group-item.active span {
            color: white !important;
            opacity: 1 !important;
        }

        .logo-upload-zone {
            border: 2px dashed #cbd5e1 !important;
            cursor: pointer;
        }

        .logo-upload-zone:hover {
            border-color: var(--primary-color) !important;
            background-color: #f8fafc !important;
        }

        .btn-outline-primary {
            border-color: rgba(13, 110, 253, 0.5) !important;
            color: #0d6efd !important;
        }

        .btn-outline-primary:hover {
            background-color: #0d6efd !important;
            color: white !important;
        }

        .btn-check:checked+.btn-outline-primary {
            background-color: #0d6efd !important;
            color: white !important;
            border-color: #0d6efd !important;
        }

        .form-control:focus,
        .form-select:focus {
            background-color: #f8fafc !important;
            box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1) !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('input[type="color"]').on('input', function() {
                $(this).next('input.font-monospace').val($(this).val().toUpperCase());
            });
        });

        function submitTestNotice() {
            const userId = $('#test_user_id').val();
            const title = $('#test_title').val();
            const body = $('#test_body').val();

            if (!userId) {
                Swal.fire({
                    title: 'Recipient Required',
                    text: 'Please select an employee to send the test notification.',
                    icon: 'warning',
                    confirmButtonColor: '#0d6efd',
                    borderRadius: '1rem'
                });
                return;
            }

            $('#hidden_user_id').val(userId);
            $('#hidden_title').val(title);
            $('#hidden_body').val(body);
            $('#hiddenTestForm').submit();
        }
    </script>
@endpush