@extends('admin.layouts.app')

@section('title', __('admin/network-statuses.title'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/network-statuses.index_title')"
        :subtitle="__('admin/network-statuses.index_subtitle')"
        icon="fas fa-network-wired"
        :buttons="[
            ['label' => __('admin/network-statuses.buttons_create'), 'route' => route('admin.network-statuses.create'), 'icon' => 'fas fa-plus', 'color' => 'primary', 'permission' => 'manage settings'],
        ]"
    />

    <x-admin.card>
        <x-admin.data-table id="networkStatusesTable" :records-url="route('api.admin.network-statuses.records')" :filterable="true">
            <th>{{ __('admin/network-statuses.fields_title') }}</th>
            <th>{{ __('admin/network-statuses.fields_status') }}</th>
            <th>{{ __('admin/network-statuses.fields_type') }}</th>
            <th>{{ __('admin/network-statuses.fields_impact') }}</th>
            <th>{{ __('admin/network-statuses.fields_started_at') }}</th>
            <th>{{ __('admin/network-statuses.fields_sort_order') }}</th>
            <th>{{ __('admin/network-statuses.fields_created_at') }}</th>
            <th>{{ __('admin/network-statuses.fields_actions') }}</th>

            <x-slot:filters>
                <div class="row g-2">
                    <div class="col-md-3">
                        <label for="statusFilter" class="form-label">{{ __('admin/network-statuses.fields_status') }}</label>
                        <select class="form-select" id="statusFilter">
                            <option value="">{{ __('admin/network-statuses.fields_status') }} - All</option>
                            <option value="reported">{{ __('admin/network-statuses.status_reported') }}</option>
                            <option value="investigating">{{ __('admin/network-statuses.status_investigating') }}</option>
                            <option value="in_progress">{{ __('admin/network-statuses.status_in_progress') }}</option>
                            <option value="resolved">{{ __('admin/network-statuses.status_resolved') }}</option>
                            <option value="scheduled">{{ __('admin/network-statuses.status_scheduled') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="typeFilter" class="form-label">{{ __('admin/network-statuses.fields_type') }}</label>
                        <select class="form-select" id="typeFilter">
                            <option value="">{{ __('admin/network-statuses.fields_type') }} - All</option>
                            <option value="incident">{{ __('admin/network-statuses.type_incident') }}</option>
                            <option value="maintenance">{{ __('admin/network-statuses.type_maintenance') }}</option>
                            <option value="degraded_performance">{{ __('admin/network-statuses.type_degraded_performance') }}</option>
                            <option value="partial_outage">{{ __('admin/network-statuses.type_partial_outage') }}</option>
                            <option value="major_outage">{{ __('admin/network-statuses.type_major_outage') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="impactFilter" class="form-label">{{ __('admin/network-statuses.fields_impact') }}</label>
                        <select class="form-select" id="impactFilter">
                            <option value="">{{ __('admin/network-statuses.fields_impact') }} - All</option>
                            <option value="none">{{ __('admin/network-statuses.impact_none') }}</option>
                            <option value="minor">{{ __('admin/network-statuses.impact_minor') }}</option>
                            <option value="major">{{ __('admin/network-statuses.impact_major') }}</option>
                            <option value="critical">{{ __('admin/network-statuses.impact_critical') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="button" class="btn btn-outline-secondary" id="clearFilters">
                            <i class="fas fa-times me-1"></i> Clear
                        </button>
                    </div>
                </div>
            </x-slot:filters>
        </x-admin.data-table>
    </x-admin.card>
</div>
@endsection

@push('scripts')
<script>
    window.permissions = {
        networkStatuses: {
            update: {{ json_encode(Auth::user()->can('manage settings')) }},
            delete: {{ json_encode(Auth::user()->can('manage settings')) }}
        }
    };

    window.routes = window.routes || {};
    window.routes.networkStatuses = {
        records: '{{ route("api.admin.network-statuses.records") }}',
        edit: '{{ route("admin.network-statuses.edit", ":id") }}',
        delete: '{{ route("api.admin.network-statuses.destroy", ":id") }}'
    };

    window.translations = window.translations || {};
    window.translations.networkStatuses = {
        buttons: {
            edit: '{{ __("admin/network-statuses.buttons_edit") }}',
            delete: '{{ __("admin/network-statuses.buttons_delete") }}'
        },
        messages: {
            deleteConfirm: '{{ __("admin/network-statuses.messages_delete_confirm") }}',
            noRecords: '{{ __("admin/network-statuses.messages_no_records") }}'
        },
        status: {
            reported: '{{ __("admin/network-statuses.status_reported") }}',
            investigating: '{{ __("admin/network-statuses.status_investigating") }}',
            in_progress: '{{ __("admin/network-statuses.status_in_progress") }}',
            resolved: '{{ __("admin/network-statuses.status_resolved") }}',
            scheduled: '{{ __("admin/network-statuses.status_scheduled") }}'
        },
        type: {
            incident: '{{ __("admin/network-statuses.type_incident") }}',
            maintenance: '{{ __("admin/network-statuses.type_maintenance") }}',
            degraded_performance: '{{ __("admin/network-statuses.type_degraded_performance") }}',
            partial_outage: '{{ __("admin/network-statuses.type_partial_outage") }}',
            major_outage: '{{ __("admin/network-statuses.type_major_outage") }}'
        },
        impact: {
            none: '{{ __("admin/network-statuses.impact_none") }}',
            minor: '{{ __("admin/network-statuses.impact_minor") }}',
            major: '{{ __("admin/network-statuses.impact_major") }}',
            critical: '{{ __("admin/network-statuses.impact_critical") }}'
        }
    };
</script>
@vite('resources/js/admin/network-statuses/index.js')
@endpush