@extends('admin.layouts.app', ['title' => 'Cron Jobs'])

@push('head')
    <style>
        .admin-module-hero {
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 0.5rem;
            padding: 1.25rem 1.35rem;
            margin-bottom: 1rem;
            color: #f8fbff;
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        .admin-module-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }

        .admin-module-hero > * {
            position: relative;
            z-index: 1;
        }

        .cron-job-status-wrap .form-check-input {
            cursor: pointer;
        }
    </style>
@endpush

@section('content')
    <div class="admin-module-hero d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h1 class="h4 mb-0">Cron Jobs</h1>
            {{-- <div class="small text-white">View and monitor configured cron jobs from the admin panel.</div> --}}
        </div>
    </div>

    <div class="card admin-card">
        <div class="card-body">
            <div class="alert alert-success d-none" id="adminCronJobsSuccessAlert"></div>
            <div class="alert alert-danger d-none" id="adminCronJobsErrorAlert"></div>

            <form method="GET" action="{{ route('admin.cron_jobs.index') }}" class="row g-2 mb-4" id="adminCronJobsSearchForm">
                <div class="col-md-6">
                    <input
                        type="search"
                        name="search"
                        class="form-control"
                        id="adminCronJobsSearchInput"
                        value="{{ $search }}"
                        placeholder="Search by name, command, or description..."
                        autocomplete="off"
                    >
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Command</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="adminCronJobsTableBody">
                        @forelse ($cronJobs as $cronJob)
                            @include('admin.cron_jobs._row', ['cronJob' => $cronJob])
                        @empty
                            <tr id="adminCronJobsEmptyState">
                                <td colspan="5" class="text-center text-muted py-4">No cron jobs found.</td>
                            </tr>
                        @endforelse
                        <tr id="adminCronJobsFilteredEmptyState" class="d-none">
                            <td colspan="5" class="text-center text-muted py-4">No cron jobs found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{ $cronJobs->links() }}
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('adminCronJobsSearchForm');
            const input = document.getElementById('adminCronJobsSearchInput');
            const filteredEmptyState = document.getElementById('adminCronJobsFilteredEmptyState');
            const successAlert = document.getElementById('adminCronJobsSuccessAlert');
            const errorAlert = document.getElementById('adminCronJobsErrorAlert');

            const hideAlerts = function () {
                successAlert.classList.add('d-none');
                errorAlert.classList.add('d-none');
            };

            const showAlert = function (element, message) {
                element.textContent = message;
                element.classList.remove('d-none');
            };

            const applyFilter = function () {
                if (!input || !filteredEmptyState) {
                    return;
                }

                const query = input.value.trim().toLowerCase();
                let visibleCount = 0;

                Array.from(document.querySelectorAll('[data-cron-job-row]')).forEach(function (row) {
                    const haystack = row.getAttribute('data-search') || '';
                    const shouldShow = query === '' || haystack.includes(query);
                    row.classList.toggle('d-none', !shouldShow);

                    if (shouldShow) {
                        visibleCount += 1;
                    }
                });

                filteredEmptyState.classList.toggle('d-none', visibleCount !== 0);
            };

            if (form) {
                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                });
            }

            if (input) {
                input.addEventListener('input', applyFilter);
                applyFilter();
            }

            Array.from(document.querySelectorAll('[data-cron-job-status-toggle]')).forEach(function (toggle) {
                toggle.addEventListener('change', async function () {
                    hideAlerts();

                    const row = toggle.closest('[data-cron-job-row]');
                    const label = row ? row.querySelector('[data-cron-job-status-label]') : null;
                    const previousChecked = !toggle.checked;

                    toggle.disabled = true;

                    try {
                        const formData = new FormData();
                        formData.append('_method', 'PATCH');
                        formData.append('_token', '{{ csrf_token() }}');
                        formData.append('status', toggle.checked ? '1' : '0');

                        const response = await fetch(toggle.getAttribute('data-url'), {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            body: formData,
                        });

                        const data = await response.json();

                        if (!response.ok) {
                            throw new Error(data.message || 'Unable to update cron job status.');
                        }

                        if (label) {
                            label.textContent = data.status_label || (toggle.checked ? 'Active' : 'Suspend');
                            label.classList.toggle('text-bg-success', Number(data.status_value) === 1);
                            label.classList.toggle('text-bg-secondary', Number(data.status_value) !== 1);
                        }

                        showAlert(successAlert, data.message || 'Cron job status updated successfully.');
                    } catch (error) {
                        toggle.checked = previousChecked;
                        showAlert(errorAlert, error.message || 'Unable to update cron job status.');
                    } finally {
                        toggle.disabled = false;
                    }
                });
            });
        });
    </script>
@endpush