{{-- maintenance.blade.php --}}
@extends('admin.layouts.master')

@section('css')
    <style>
        .service-card {
            transition: all 0.3s ease;
            border-radius: 10px;
        }

        .service-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .service-card.inactive {
            border-right: 4px solid #dc3545;
        }

        .service-card.active {
            border-right: 4px solid #28a745;
        }

        .toggle-switch {
            position: relative;
            width: 60px;
            height: 30px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #dc3545;
            transition: 0.4s;
            border-radius: 30px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        input:checked+.toggle-slider {
            background-color: #28a745;
        }

        input:checked+.toggle-slider:before {
            transform: translateX(30px);
        }

        .status-badge {
            font-size: 0.85rem;
            padding: 5px 12px;
            border-radius: 20px;
        }

        .all-toggle-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            color: white;
        }

        .message-input {
            border: 1px dashed #ccc;
            border-radius: 8px;
            padding: 10px;
            background: #f9f9f9;
        }

        .dark-mode .message-input {
            background: #2d2d2d;
            border-color: #444;
        }

        .toggled-info {
            font-size: 0.8rem;
            color: #888;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إعدادات الصيانة</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ التحكم في الخدمات</span>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        {{-- All Toggle Section --}}
        <div class="col-12 mb-4">
            <div class="all-toggle-section p-4">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h4 class="mb-1">
                            <x-lucide-power width="20" height="20" class="ml-2" />
                            التحكم في جميع الخدمات
                        </h4>
                        <p class="mb-0 opacity-75">إيقاف أو تشغيل جميع الخدمات بضغطة واحدة</p>
                    </div>
                    <div class="d-flex gap-3 mt-3 mt-md-0">
                        <button type="button" class="btn btn-light btn-lg" id="activateAllBtn"
                            @if ($allActive) disabled @endif>
                            <x-lucide-play width="20" height="20" class="ml-1" />
                            تشغيل الكل
                        </button>
                        <button type="button" class="btn btn-danger btn-lg" id="deactivateAllBtn"
                            @if ($allInactive) disabled @endif>
                            <x-lucide-square width="20" height="20" class="ml-1" />
                            إيقاف الكل
                        </button>
                    </div>
                </div>
            </div>
        </div>

        @if($services->isEmpty())
            <div class="col-12">
                <div class="alert alert-info">
                    <x-lucide-info width="20" height="20" class="ml-2" />
                    لا توجد خدمات مسجلة. قم بتشغيل الـ seeder لإضافة الخدمات الافتراضية.
                </div>
            </div>
        @endif

        {{-- Services Grid --}}
        @foreach ($services as $service)
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card service-card {{ $service->is_active ? 'active' : 'inactive' }}"
                    data-service="{{ $service->service_key }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h5 class="mb-1">{{ $service->display_name_ar }}</h5>
                                <span class="text-muted">{{ $service->display_name_en }}</span>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" class="service-toggle" data-service="{{ $service->service_key }}"
                                    {{ $service->is_active ? 'checked' : '' }}>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>

                        <div class="mb-3">
                            <span
                                class="status-badge {{ $service->is_active ? 'bg-success-transparent text-success' : 'bg-danger-transparent text-danger' }}">
                                @if($service->is_active)
                                    <x-lucide-check-circle width="20" height="20" class="ml-1" />
                                @else
                                    <x-lucide-x-circle width="20" height="20" class="ml-1" />
                                @endif
                                {{ $service->is_active ? 'نشط' : 'متوقف' }}
                            </span>
                        </div>

                        <div class="message-input mb-3">
                            <label class="form-label small text-muted mb-1">رسالة الصيانة (عربي)</label>
                            <textarea class="form-control form-control-sm message-ar" data-service="{{ $service->service_key }}" rows="2"
                                placeholder="رسالة تظهر للمستخدمين عند الإيقاف...">{{ $service->maintenance_message_ar }}</textarea>
                        </div>

                        <div class="message-input mb-3">
                            <label class="form-label small text-muted mb-1">Maintenance Message (English)</label>
                            <textarea class="form-control form-control-sm message-en" data-service="{{ $service->service_key }}" rows="2"
                                placeholder="Message shown to users when disabled...">{{ $service->maintenance_message_en }}</textarea>
                        </div>

                        <button type="button" class="btn btn-outline-primary btn-sm save-message-btn w-100"
                            data-service="{{ $service->service_key }}">
                            <x-lucide-save width="20" height="20" class="ml-1" />
                            حفظ الرسالة
                        </button>

                        @if ($service->toggled_at)
                            <div class="toggled-info mt-3 text-center">
                                <x-lucide-clock width="20" height="20" class="ml-1" />
                                آخر تعديل: {{ $service->toggled_at->diffForHumans() }}
                                @if ($service->toggledBy)
                                    بواسطة {{ $service->toggledBy->name }}
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

@section('js')
    <script>
        $(function() {
            // Toggle single service
            $('.service-toggle').on('change', function() {
                const checkbox = $(this);
                const serviceKey = checkbox.data('service');
                const isActive = checkbox.is(':checked');
                const card = checkbox.closest('.service-card');
                const messageAr = card.find('.message-ar').val();
                const messageEn = card.find('.message-en').val();
                const toggleSlider = checkbox.siblings('.toggle-slider');

                // Disable checkbox and show loading
                checkbox.prop('disabled', true);
                toggleSlider.css('opacity', '0.5');
                card.find('.status-badge').html(`{!! svg("lucide-loader-2", ["class" => "animate-spin ml-1", "width" => 20, "height" => 20])->toHtml() !!} جاري الحفظ...`)
                    .removeClass('bg-success-transparent text-success bg-danger-transparent text-danger')
                    .addClass('bg-warning-transparent text-warning');

                $.ajax({
                    url: '{{ route('admin.settings.maintenance.toggle') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        service_key: serviceKey,
                        is_active: isActive ? 1 : 0,
                        maintenance_message_ar: messageAr,
                        maintenance_message_en: messageEn
                    },
                    success: function(response) {
                        if (response.success) {
                            const actualIsActive = response.is_active;
                            checkbox.prop('checked', actualIsActive);
                            updateCardStatus(card, actualIsActive);
                            updateAllButtonsState();

                            if (response.toggled_at) {
                                let infoHtml = `{!! svg("lucide-clock", ["class" => "ml-1", "width" => 20, "height" => 20])->toHtml() !!} آخر تعديل: الآن`;
                                card.find('.toggled-info').html(infoHtml);
                            }

                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                            checkbox.prop('checked', !isActive);
                            updateCardStatus(card, !isActive);
                        }
                    },
                    error: function(xhr) {
                        let errorMsg = 'حدث خطأ أثناء تحديث الخدمة';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        toastr.error(errorMsg);
                        checkbox.prop('checked', !isActive);
                        updateCardStatus(card, !isActive);
                    },
                    complete: function() {
                        checkbox.prop('disabled', false);
                        toggleSlider.css('opacity', '1');
                    }
                });
            });

            // Toggle all services - Activate
            $('#activateAllBtn').on('click', function() {
                toggleAllServices(true);
            });

            // Toggle all services - Deactivate
            $('#deactivateAllBtn').on('click', function() {
                if (confirm('هل أنت متأكد من إيقاف جميع الخدمات؟ سيؤثر ذلك على جميع المستخدمين.')) {
                    toggleAllServices(false);
                }
            });

            // Save message
            $('.save-message-btn').on('click', function() {
                const btn = $(this);
                const serviceKey = btn.data('service');
                const card = btn.closest('.service-card');
                const messageAr = card.find('.message-ar').val();
                const messageEn = card.find('.message-en').val();

                btn.prop('disabled', true).html(`{!! svg("lucide-loader-2", ["class" => "animate-spin ml-1", "width" => 20, "height" => 20])->toHtml() !!} جاري الحفظ...`);

                $.ajax({
                    url: '{{ route('admin.settings.maintenance.update-message') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        service_key: serviceKey,
                        maintenance_message_ar: messageAr,
                        maintenance_message_en: messageEn
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function() {
                        toastr.error('حدث خطأ أثناء حفظ الرسالة');
                    },
                    complete: function() {
                        btn.prop('disabled', false).html(`{!! svg("lucide-save", ["class" => "ml-1", "width" => 20, "height" => 20])->toHtml() !!} حفظ الرسالة`);
                    }
                });
            });

            function toggleAllServices(isActive) {
                $('.service-toggle').prop('disabled', true);
                $('.toggle-slider').css('opacity', '0.5');
                $('#activateAllBtn, #deactivateAllBtn').prop('disabled', true);

                const loadingBtn = isActive ? '#activateAllBtn' : '#deactivateAllBtn';
                const originalHtml = $(loadingBtn).html();
                $(loadingBtn).html(`{!! svg("lucide-loader-2", ["class" => "animate-spin ml-1", "width" => 20, "height" => 20])->toHtml() !!} جاري التحديث...`);

                $('.status-badge').html(`{!! svg("lucide-loader-2", ["class" => "animate-spin ml-1", "width" => 20, "height" => 20])->toHtml() !!} جاري الحفظ...`)
                    .removeClass('bg-success-transparent text-success bg-danger-transparent text-danger')
                    .addClass('bg-warning-transparent text-warning');

                $.ajax({
                    url: '{{ route('admin.settings.maintenance.toggle-all') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        is_active: isActive ? 1 : 0
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('.service-toggle').prop('checked', isActive);
                            $('.service-card').each(function() {
                                updateCardStatus($(this), isActive);
                            });
                            updateAllButtonsState();
                        } else {
                            toastr.error(response.message);
                            location.reload();
                        }
                    },
                    error: function() {
                        toastr.error('حدث خطأ أثناء تحديث الخدمات');
                        location.reload();
                    },
                    complete: function() {
                        $('.service-toggle').prop('disabled', false);
                        $('.toggle-slider').css('opacity', '1');
                        $(loadingBtn).html(originalHtml);
                        updateAllButtonsState();
                    }
                });
            }

            function updateCardStatus(card, isActive) {
                card.removeClass('active inactive').addClass(isActive ? 'active' : 'inactive');
                const badge = card.find('.status-badge');
                badge.removeClass('bg-success-transparent text-success bg-danger-transparent text-danger bg-warning-transparent text-warning');
                if (isActive) {
                    badge.addClass('bg-success-transparent text-success')
                        .html(`{!! svg("lucide-check-circle", ["class" => "ml-1", "width" => 20, "height" => 20])->toHtml() !!} نشط`);
                } else {
                    badge.addClass('bg-danger-transparent text-danger')
                        .html(`{!! svg("lucide-x-circle", ["class" => "ml-1", "width" => 20, "height" => 20])->toHtml() !!} متوقف`);
                }
            }

            function updateAllButtonsState() {
                const allChecked = $('.service-toggle:checked').length === $('.service-toggle').length;
                const noneChecked = $('.service-toggle:checked').length === 0;

                $('#activateAllBtn').prop('disabled', allChecked);
                $('#deactivateAllBtn').prop('disabled', noneChecked);
            }
        });
    </script>
@endsection