@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $user = auth()->user();
        $lateMinutes = filled(optional($setting)->late_minutes) ? optional($setting)->late_minutes . ' min' : 'Not set';
        $shiftStart = filled(optional($setting)->shift_start_at) ? optional($setting)->shift_start_at : 'Not set';
        $shiftEnd = filled(optional($setting)->shift_end_at) ? optional($setting)->shift_end_at : 'Not set';
        $attendanceStart = filled(optional($setting)->attendence_start_at) ? optional($setting)->attendence_start_at : 'Not set';
        $invoiceWindow = filled(optional($setting)->allowed_period_to_pay_invoices)
            ? optional($setting)->allowed_period_to_pay_invoices . ' hrs'
            : 'Not set';
        $lastUpdated = filled(optional($setting)->updated_at)
            ? optional(optional($setting)->updated_at)->format('d M Y, h:i A')
            : 'Not updated yet';
        $visibleCardsCount = collect([
            $user?->can('hr_configuration_late_minutes'),
            $user?->can('hr_configuration_shift_start'),
            $user?->can('hr_configuration_shift_end'),
            $user?->can('hr_configuration_attendance_start'),
            $user?->can('hr_configuration_allowed_period_to_pay_invoices'),
        ])->filter()->count();
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title title="Configuration"
                    description="Manage shift timing, attendance rules, and invoice timing from one unified dashboard workspace.">
                </x-page-title>

                
                
                <div class="ui-card ui-card--table hr-settings-workspace">
                    <div class="ui-card__header">
                    </div>

                    @if ($setting)
                        <div class="hr-settings-workspace__body">
                            <div class="hr-settings-grid">
                                @can('hr_configuration_late_minutes')
                                    <div class="hr-setting-card">
                                        <div class="hr-setting-card__head">
                                            <div class="hr-setting-card__icon hr-setting-card__icon--success"><i
                                                    class="fas fa-stopwatch"></i></div>
                                            <div class="hr-setting-card__intro">
                                                <div class="hr-setting-card__title">Late Minutes</div>
                                                <p class="hr-setting-card__sub">Allowed late minutes before delay is marked.</p>
                                            </div>
                                            <span class="hr-setting-card__badge hr-setting-card__badge--success">Minutes</span>
                                        </div>
                                        <div class="hr-setting-card__current">Current value: <strong>{{ $lateMinutes }}</strong>
                                        </div>
                                        <form class="settings-form" data-id="{{ $setting->id }}">
                                            <div class="form-group-modern">
                                                <label class="asset-label" for="late_minutes">Late Minutes</label>
                                                <input type="number" id="late_minutes" name="late_minutes"
                                                    class="asset-input modern-input" value="{{ $setting->late_minutes }}" min="0"
                                                    placeholder="Enter late minutes">
                                            </div>
                                            @can('hr_configuration_update')
                                                <div class="settings-form__actions">
                                                    <button type="submit" class="asset-btn asset-btn--primary btn-save-modern">
                                                        <i class="ti ti-device-floppy me-1"></i>Save Changes
                                                    </button>
                                                </div>
                                            @endcan
                                        </form>
                                    </div>
                                @endcan

                                @can('hr_configuration_shift_start')
                                    <div class="hr-setting-card">
                                        <div class="hr-setting-card__head">
                                            <div class="hr-setting-card__icon hr-setting-card__icon--info"><i
                                                    class="fas fa-play-circle"></i></div>
                                            <div class="hr-setting-card__intro">
                                                <div class="hr-setting-card__title">Shift Start</div>
                                                <p class="hr-setting-card__sub">Define the official starting time of the shift.</p>
                                            </div>
                                            <span class="hr-setting-card__badge hr-setting-card__badge--info">Time</span>
                                        </div>
                                        <div class="hr-setting-card__current">Current value: <strong>{{ $shiftStart }}</strong>
                                        </div>
                                        <form class="settings-form" data-id="{{ $setting->id }}">
                                            <div class="form-group-modern">
                                                <label class="asset-label" for="shift_start_at">Shift Start Time</label>
                                                <input type="time" id="shift_start_at" name="shift_start_at"
                                                    class="asset-input modern-input" value="{{ $setting->shift_start_at }}">
                                            </div>
                                            @can('hr_configuration_update')
                                                <div class="settings-form__actions">
                                                    <button type="submit" class="asset-btn asset-btn--primary btn-save-modern">
                                                        <i class="ti ti-device-floppy me-1"></i>Save Changes
                                                    </button>
                                                </div>
                                            @endcan
                                        </form>
                                    </div>
                                @endcan

                                @can('hr_configuration_shift_end')
                                    <div class="hr-setting-card">
                                        <div class="hr-setting-card__head">
                                            <div class="hr-setting-card__icon hr-setting-card__icon--primary"><i
                                                    class="fas fa-flag-checkered"></i></div>
                                            <div class="hr-setting-card__intro">
                                                <div class="hr-setting-card__title">Shift End</div>
                                                <p class="hr-setting-card__sub">Define the official ending time of the shift.</p>
                                            </div>
                                            <span class="hr-setting-card__badge hr-setting-card__badge--info">Time</span>
                                        </div>
                                        <div class="hr-setting-card__current">Current value: <strong>{{ $shiftEnd }}</strong></div>
                                        <form class="settings-form" data-id="{{ $setting->id }}">
                                            <div class="form-group-modern">
                                                <label class="asset-label" for="shift_end_at">Shift End Time</label>
                                                <input type="time" id="shift_end_at" name="shift_end_at"
                                                    class="asset-input modern-input" value="{{ $setting->shift_end_at }}">
                                            </div>
                                            @can('hr_configuration_update')
                                                <div class="settings-form__actions">
                                                    <button type="submit" class="asset-btn asset-btn--primary btn-save-modern">
                                                        <i class="ti ti-device-floppy me-1"></i>Save Changes
                                                    </button>
                                                </div>
                                            @endcan
                                        </form>
                                    </div>
                                @endcan

                                @can('hr_configuration_attendance_start')
                                    <div class="hr-setting-card">
                                        <div class="hr-setting-card__head">
                                            <div class="hr-setting-card__icon hr-setting-card__icon--neutral"><i
                                                    class="fas fa-user-clock"></i></div>
                                            <div class="hr-setting-card__intro">
                                                <div class="hr-setting-card__title">Attendance Start</div>
                                                <p class="hr-setting-card__sub">Set the earliest time when attendance can start.</p>
                                            </div>
                                            <span class="hr-setting-card__badge hr-setting-card__badge--neutral">Attendance</span>
                                        </div>
                                        <div class="hr-setting-card__current">Current value: <strong>{{ $attendanceStart }}</strong>
                                        </div>
                                        <form class="settings-form" data-id="{{ $setting->id }}">
                                            <div class="form-group-modern">
                                                <label class="asset-label" for="attendence_start_at">Attendance Start Time</label>
                                                <input type="time" id="attendence_start_at" name="attendence_start_at"
                                                    class="asset-input modern-input" value="{{ $setting->attendence_start_at }}">
                                            </div>
                                            @can('hr_configuration_update')
                                                <div class="settings-form__actions">
                                                    <button type="submit" class="asset-btn asset-btn--primary btn-save-modern">
                                                        <i class="ti ti-device-floppy me-1"></i>Save Changes
                                                    </button>
                                                </div>
                                            @endcan
                                        </form>
                                    </div>
                                @endcan

                                @can('hr_configuration_allowed_period_to_pay_invoices')
                                    <div class="hr-setting-card">
                                        <div class="hr-setting-card__head">
                                            <div class="hr-setting-card__icon hr-setting-card__icon--warn"><i
                                                    class="fas fa-file-invoice-dollar"></i></div>
                                            <div class="hr-setting-card__intro">
                                                <div class="hr-setting-card__title">Invoice Payment Period</div>
                                                <p class="hr-setting-card__sub">Specify the allowed period for invoice payment.</p>
                                            </div>
                                        </div>
                                        <div class="hr-setting-card__current">Current value: <strong>{{ $invoiceWindow }}</strong>
                                        </div>
                                        <form class="settings-form" data-id="{{ $setting->id }}">
                                            <div class="form-group-modern">
                                                <label class="asset-label" for="allowed_period_to_pay_invoices">Allowed
                                                    Period</label>
                                                <input type="number" id="allowed_period_to_pay_invoices"
                                                    name="allowed_period_to_pay_invoices" class="asset-input modern-input"
                                                    value="{{ $setting->allowed_period_to_pay_invoices }}" min="0"
                                                    placeholder="Enter number of hours">
                                            </div>
                                            @can('hr_configuration_update')
                                                <div class="settings-form__actions">
                                                    <button type="submit" class="asset-btn asset-btn--primary btn-save-modern">
                                                        <i class="ti ti-device-floppy me-1"></i>Save Changes
                                                    </button>
                                                </div>
                                            @endcan
                                        </form>
                                    </div>
                                @endcan
                            </div>
                        </div>
                    @else
                        <div class="hr-settings-empty">
                            <div class="hr-settings-empty__icon"><i class="fas fa-sliders-h"></i></div>
                            <div class="mb-2">No HR settings record is available yet</div>
                            <p class="mb-0">Create the initial HR settings record first, then the editable cards will appear
                                here.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .hr-settings-title-meta {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .hr-settings-hero {
            padding: 1.35rem;
            border: 1px solid #e5e7eb;
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        }

        .hr-settings-hero__content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .hr-settings-hero__eyebrow {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            margin-bottom: 0.85rem;
        }

        .hr-settings-hero__title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.4rem;
        }

        .hr-settings-hero__text {
            max-width: 760px;
            color: #6b7280;
            font-size: 0.93rem;
            line-height: 1.7;
        }

        .hr-settings-hero__chips {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .hr-settings-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.58rem 0.92rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .hr-settings-chip--info {
            background: #ecfeff;
            color: #0f766e;
        }

        .hr-settings-chip--warn {
            background: #fff7ed;
            color: #c2410c;
        }

        .hr-settings-summary-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 1rem;
        }

        .hr-setting-stat {
            display: flex;
            align-items: center;
            gap: 0.95rem;
            padding: 1rem 1.1rem;
            border: 1px solid #eef2f7;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
        }

        .hr-setting-stat__icon {
            width: 46px;
            height: 46px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .hr-setting-stat__icon--success {
            background: #dcfce7;
            color: #166534;
        }

        .hr-setting-stat__icon--info {
            background: #e0f2fe;
            color: #075985;
        }

        .hr-setting-stat__icon--primary {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .hr-setting-stat__icon--neutral {
            background: #eef2ff;
            color: #4338ca;
        }

        .hr-setting-stat__icon--warn {
            background: #fef3c7;
            color: #92400e;
        }

        .hr-setting-stat__label {
            color: #6b7280;
            font-size: 0.88rem;
            margin-bottom: 0.35rem;
        }

        .hr-setting-stat__value {
            color: #111827;
            font-size: 1.05rem;
            font-weight: 800;
            line-height: 1.3;
            word-break: break-word;
        }

        .hr-settings-workspace__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .hr-settings-workspace__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .hr-settings-workspace__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .hr-settings-workspace__body {
            padding: 0 1rem 1rem;
        }

        .hr-settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1rem;
        }

        .hr-setting-card {
            background: #fff;
            border: 1px solid #edf1f7;
            border-radius: 22px;
            padding: 1.25rem;
            transition: 0.25s ease;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
        }

        .hr-setting-card__head {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
            margin-bottom: 1rem;
        }

        .hr-setting-card__icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1rem;
        }

        .hr-setting-card__icon--success {
            background: #dcfce7;
            color: #166534;
        }

        .hr-setting-card__icon--info {
            background: #e0f2fe;
            color: #075985;
        }

        .hr-setting-card__icon--primary {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .hr-setting-card__icon--neutral {
            background: #eef2ff;
            color: #4338ca;
        }

        .hr-setting-card__icon--warn {
            background: #fef3c7;
            color: #92400e;
        }

        .hr-setting-card__intro {
            flex: 1;
            min-width: 0;
        }

        .hr-setting-card__title {
            margin: 0 0 0.2rem;
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .hr-setting-card__sub {
            margin: 0;
            color: #6b7280;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .hr-setting-card__badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            border-radius: 999px;
            padding: 0.45rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .hr-setting-card__badge--success {
            background: #dcfce7;
            color: #166534;
        }

        .hr-setting-card__badge--info {
            background: #e0f2fe;
            color: #075985;
        }

        .hr-setting-card__badge--neutral {
            background: #eef2ff;
            color: #4338ca;
        }

        .hr-setting-card__badge--warn {
            background: #fef3c7;
            color: #92400e;
        }

        .hr-setting-card__current {
            padding: 0.85rem 0.95rem;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #f8fafc;
            color: #475569;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .hr-setting-card__current strong {
            color: #111827;
        }

        .form-group-modern {
            margin-bottom: 1rem;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .modern-input {
            box-shadow: none !important;
        }

        .modern-input:focus {
            box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.04) !important;
        }

        .settings-form__actions {
            display: flex;
            justify-content: flex-end;
        }

        .btn-save-modern {
            min-width: 138px;
        }

        .hr-settings-empty {
            padding: 2rem 1.25rem 2.25rem;
            text-align: center;
            color: #6b7280;
        }

        .hr-settings-empty__icon {
            width: 68px;
            height: 68px;
            margin: 0 auto 1rem;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 1.4rem;
        }

        @media (min-width: 640px) {
            .hr-settings-hero {
                padding: 1.5rem;
            }

            .hr-settings-workspace__body {
                padding: 0 1.25rem 1.25rem;
            }
        }

        @media (max-width: 1199.98px) {
            .hr-settings-summary-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            .hr-settings-summary-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .hr-settings-summary-grid {
                grid-template-columns: 1fr;
            }

            .hr-settings-grid {
                grid-template-columns: 1fr;
            }

            .hr-setting-card__head {
                flex-wrap: wrap;
            }

            .hr-setting-card__badge {
                order: 3;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.settings-form').on('submit', function (e) {
                e.preventDefault();

                const form = $(this);
                const id = form.data('id');
                const button = form.find('.btn-save-modern');
                const originalHtml = button.html();

                let formData = {
                    _token: '{{ csrf_token() }}',
                    _method: 'PUT',
                };

                form.serializeArray().forEach(function (field) {
                    formData[field.name] = field.value;
                });

                button.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1"></span> Saving...'
                );

                $.ajax({
                    url: "{{ url('hrsettings') }}/" + id,
                    type: 'POST',
                    data: formData,
                    success: function () {
                        toastr.success('HR setting updated successfully');
                    },
                    error: function (xhr) {
                        toastr.error(xhr.responseJSON?.message || 'An error occurred while saving');
                    },
                    complete: function () {
                        button.prop('disabled', false).html(originalHtml);
                    }
                });
            });
        });
    </script>
@endpush