@extends('layouts.demo10.base')

@section('content')

    <style>
        /* Prevent table clipping for dropdowns */
        .kt-scrollable-x-auto, .kt-card-table, #cron_scheduler_table, td {
            overflow: visible !important;
        }

        /* DataTables overrides to match Metronic UI */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: none !important;
            background: none !important;
            padding: 0.5rem 0.75rem !important;
            margin: 0 2px !important;
            border-radius: 0.375rem !important;
            color: var(--secondary-foreground) !important;
            cursor: pointer !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: var(--primary) !important;
            color: white !important;
        }
        .dataTables_wrapper .dataTables_info {
            color: var(--secondary-foreground) !important;
            font-size: 0.875rem !important;
            padding-top: 0 !important;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border) !important;
            border-radius: 0.375rem !important;
            padding: 0.25rem 2rem 0.25rem 0.5rem !important;
            background-color: transparent !important;
            color: var(--foreground) !important;
            margin: 0 0.5rem !important;
        }
        .dataTables_wrapper .dataTables_length {
            color: var(--secondary-foreground) !important;
            font-size: 0.875rem !important;
        }
        .dataTables_wrapper .dataTables_paginate {
            padding-top: 0 !important;
        }
    </style>

@can('view.cron_scheduler')
<div class="grid gap-1 lg:gap-1.5">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                Cron Scheduler
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <a class="hover:text-primary transition-colors" href="{{ route('tenants.projects') }}">Projects</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">{{ $currentProject->name ?? 'Project' }}</span>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Cron Scheduler</span>
            </div>
        </div>
    </div>
    <!-- end: Toolbar -->

    <!-- begin: Card -->
    <div class="kt-card kt-card-grid h-full min-w-full rounded-xl">
        <div class="kt-card-header flex flex-wrap gap-2 p-0">
            <!-- Right side actions -->
            <div class="flex items-center gap-2 ml-auto">
                <div class="kt-input max-w-48 search">
                    <input
                        data-kt-datatable-search="#cron_scheduler_table"
                        placeholder="Search Schedules"
                        type="text"
                    />
                </div>

                @can('create.cron_scheduler')
                <button onclick="AuditTracker.buttonClick('CronScheduler','CronScheduler','Cron Scheduler List','Click Add Schedule Button')" class="kt-btn kt-btn-primary add-btn" data-kt-modal-toggle="#add_schedule_modal">
                    <i class="ki-filled ki-plus"></i>
                    Add Schedule
                </button>
                @endcan
            </div>
        </div>
        <div class="kt-card-table">
            <div id="cron_scheduler_datatable_wrapper" class="p-0 text-foreground">
                <div class="kt-scrollable-x-auto">
                    <table class="kt-table kt-table-border w-full" id="cron_scheduler_table">
                        <thead>
                            <tr>
                                <th class="w-[60px] text-center">Sr No</th>
                                <th>Schedule Name</th>
                                <th>ODK Connection</th>
                                <th>Frequency</th>
                                <th>Time</th>
                                <th>Last Run</th>
                                <th>Next Run</th>
                                <th class="text-center">Status</th>
                                @canany(['edit.cron_scheduler', 'delete.cron_scheduler'])
                                <th class="text-right">Actions</th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($schedules as $schedule)
                            <tr>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-foreground">{{ $schedule->name }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="flex flex-col">
                                        <span class="text-sm text-foreground">{{ $schedule->odkConnection->form_id ?? 'N/A' }}</span>
                                        <span class="text-xs text-muted-foreground">{{ $schedule->odkConnection->base_url ?? '' }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-sm capitalize">{{ $schedule->frequency }}</span>
                                    @if($schedule->frequency === 'weekly' && $schedule->day_of_week)
                                        <span class="text-xs text-muted-foreground block">{{ ucfirst($schedule->day_of_week) }}</span>
                                    @endif
                                    @if($schedule->frequency === 'monthly' && $schedule->day_of_month)
                                        <span class="text-xs text-muted-foreground block">Day {{ $schedule->day_of_month }}</span>
                                    @endif
                                </td>
                                <td>{{ $schedule->time }}</td>
                                <td>
                                    @if($schedule->last_run_at)
                                        {{ $schedule->last_run_at->format('M d, Y H:i') }}
                                    @else
                                        <span class="text-muted-foreground">Never</span>
                                    @endif
                                </td>
                                <td>
                                    @if($schedule->next_run_at)
                                        {{ $schedule->next_run_at->format('M d, Y H:i') }}
                                    @else
                                        <span class="text-muted-foreground">N/A</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="kt-menu" data-kt-menu="true">
                                        <div class="kt-menu-item" data-kt-menu-item-offset="0, 10px" data-kt-menu-item-placement="bottom-end" data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click">
                                            <div class="kt-menu-toggle flex items-center gap-1 cursor-pointer">
                                                <span class="kt-badge kt-badge-outline {{ $schedule->is_active ? 'kt-badge-success' : 'kt-badge-danger' }} kt-badge-sm status-badge-display" data-id="{{ $schedule->id }}">
                                                    {{ $schedule->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                                <i class="ki-filled ki-down text-[10px] text-muted-foreground"></i>
                                            </div>
                                            <div class="kt-menu-dropdown kt-menu-default w-full shadow max-w-[120px]" data-kt-menu-dismiss="true">
                                                <div class="kt-menu-item {{ $schedule->is_active ? 'active' : '' }}">
                                                    <a class="kt-menu-link change-status-btn" href="javascript:void(0)" data-id="{{ $schedule->id }}" data-status="active">
                                                        <span class="kt-menu-title font-semibold">Active</span>
                                                    </a>
                                                </div>
                                                <div class="kt-menu-item {{ !$schedule->is_active ? 'active' : '' }}">
                                                    <a class="kt-menu-link change-status-btn" href="javascript:void(0)" data-id="{{ $schedule->id }}" data-status="inactive">
                                                        <span class="kt-menu-title font-semibold text-danger">Inactive</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                @canany(['edit.cron_scheduler', 'delete.cron_scheduler'])
                                <td class="text-right">
                                    <div class="kt-menu" data-kt-menu="true">
                                        <div class="kt-menu-item" data-kt-menu-item-offset="0, 10px" data-kt-menu-item-placement="bottom-end" data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click">
                                            <button class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                                                <i class="ki-filled ki-dots-vertical text-lg"></i>
                                            </button>
                                            <div class="kt-menu-dropdown kt-menu-default w-full max-w-[175px] shadow" data-kt-menu-dismiss="true">
                                                @can('edit.cron_scheduler')
                                                <div class="kt-menu-item">
                                                    <a class="kt-menu-link run-now-btn" href="javascript:void(0)" data-id="{{ $schedule->id }}">
                                                        <span class="kt-menu-icon text-success"><i class="ki-filled ki-rocket"></i></span>
                                                        <span class="kt-menu-title text-success">Run Now</span>
                                                    </a>
                                                </div>
                                                <div class="kt-menu-item">
                                                    <a class="kt-menu-link edit-schedule-btn" href="javascript:void(0)" data-id="{{ $schedule->id }}">
                                                        <span class="kt-menu-icon"><i class="ki-filled ki-notepad-edit"></i></span>
                                                        <span class="kt-menu-title">Edit</span>
                                                    </a>
                                                </div>
                                                @endcan
                                                @can('delete.cron_scheduler')
                                                <div class="kt-menu-item">
                                                    <a class="kt-menu-link delete-schedule-btn" href="javascript:void(0)" data-id="{{ $schedule->id }}">
                                                        <span class="kt-menu-icon text-danger"><i class="ki-filled ki-trash"></i></span>
                                                        <span class="kt-menu-title text-danger">Delete</span>
                                                    </a>
                                                </div>
                                                @endcan
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                @endcanany
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- end: Card -->
</div>
@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan

<!-- Add Schedule Modal -->
<div class="kt-modal" data-kt-modal="true" id="add_schedule_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Add Cron Schedule</h3>
            <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true" onclick="AuditTracker.track({ event_type:'click', module:'CronScheduler', section:'CronScheduler', page:'Cron Scheduler Create', action:'Cancel Add Schedule' })">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>
        <div class="kt-modal-body p-5 lg:p-7.5">
            <form id="add_schedule_form" class="flex flex-col gap-6">
                @csrf
                <input type="hidden" name="tenant_id" value="{{ $id }}">

                <div class="flex flex-col gap-2">
                    <label for="schedule_name" class="text-sm font-semibold text-foreground">Schedule Name</label>
                    <div class="kt-input">
                        <input type="text" name="name" id="schedule_name" placeholder="Daily Import" required />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="odk_connection_id" class="text-sm font-semibold text-foreground">ODK Connection</label>
                    <div class="kt-select p-0">
                        <select name="odk_connection_id" id="odk_connection_id" required style="width: 100%">
                            <option value="">Select Connection</option>
                            @foreach($connections as $connection)
                                <option value="{{ $connection->id }}">{{ $connection->form_id }} - {{ $connection->base_url }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="frequency" class="text-sm font-semibold text-foreground">Frequency</label>
                    <div class="kt-select p-0">
                        <select name="frequency" id="frequency" required style="width: 100%">
                            <option value="">Select Frequency</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="day_of_week_container" style="display: none;">
                    <label for="day_of_week" class="text-sm font-semibold text-foreground">Day of Week</label>
                    <div class="kt-select p-0">
                        <select name="day_of_week" id="day_of_week" style="width:100%">
                            <option value="">Select Day</option>
                            <option value="monday">Monday</option>
                            <option value="tuesday">Tuesday</option>
                            <option value="wednesday">Wednesday</option>
                            <option value="thursday">Thursday</option>
                            <option value="friday">Friday</option>
                            <option value="saturday">Saturday</option>
                            <option value="sunday">Sunday</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="day_of_month_container" style="display: none;">
                    <label for="day_of_month" class="text-sm font-semibold text-foreground">Day of Month</label>
                    <div class="kt-input">
                        <input type="number" name="day_of_month" id="day_of_month" min="1" max="31" placeholder="1-31" />
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="cron_expression_container" style="display: none;">
                    <label for="cron_expression" class="text-sm font-semibold text-foreground">Cron Expression</label>
                    <div class="kt-input">
                        <input type="text" name="cron_expression" id="cron_expression" placeholder="0 0 * * *" />
                    </div>
                    <span class="text-xs text-muted-foreground">Example: 0 0 * * * (runs at midnight every day)</span>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="time" class="text-sm font-semibold text-foreground">Time</label>
                    <div class="kt-input">
                        <input type="time" name="time" id="time" required />
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-3 modal-btns">
                    <button type="button" class="kt-btn min-w-[80px] cancel" data-kt-modal-dismiss="true" onclick="AuditTracker.track({ event_type:'click', module:'CronScheduler', section:'CronScheduler', page:'Cron Scheduler Create', action:'Cancel Add Schedule' })">Cancel</button>
                    <button type="submit" class="kt-btn kt-btn-primary min-w-[80px] save">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Schedule Modal -->
<div class="kt-modal" data-kt-modal="true" id="edit_schedule_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Edit Cron Schedule</h3>
            <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true" onclick="AuditTracker.track({ event_type:'click', module:'CronScheduler', section:'CronScheduler', page:'Cron Scheduler Edit', action:'Cancel Edit Schedule' })">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>
        <div class="kt-modal-body p-5 lg:p-7.5">
            <form id="edit_schedule_form" class="flex flex-col gap-6">
                @csrf
                <input type="hidden" name="schedule_id" id="edit_schedule_id">

                <div class="flex flex-col gap-2">
                    <label for="edit_schedule_name" class="text-sm font-semibold text-foreground">Schedule Name</label>
                    <div class="kt-input">
                        <input type="text" name="name" id="edit_schedule_name" placeholder="Daily Import" required />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="edit_odk_connection_id" class="text-sm font-semibold text-foreground">ODK Connection</label>
                    <div class="kt-select p-0">
                        <select name="odk_connection_id" id="edit_odk_connection_id" required style="width:100%">
                            <option value="">Select Connection</option>
                            @foreach($connections as $connection)
                                <option value="{{ $connection->id }}">{{ $connection->form_id }} - {{ $connection->base_url }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="edit_frequency" class="text-sm font-semibold text-foreground">Frequency</label>
                    <div class="kt-select p-0">
                        <select name="frequency" id="edit_frequency" required style="width: 100%">
                            <option value="">Select Frequency</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="edit_day_of_week_container" style="display: none;">
                    <label for="edit_day_of_week" class="text-sm font-semibold text-foreground">Day of Week</label>
                    <div class="kt-select p-0">
                        <select name="day_of_week" id="edit_day_of_week" style="width: 100%">
                            <option value="">Select Day</option>
                            <option value="monday">Monday</option>
                            <option value="tuesday">Tuesday</option>
                            <option value="wednesday">Wednesday</option>
                            <option value="thursday">Thursday</option>
                            <option value="friday">Friday</option>
                            <option value="saturday">Saturday</option>
                            <option value="sunday">Sunday</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="edit_day_of_month_container" style="display: none;">
                    <label for="edit_day_of_month" class="text-sm font-semibold text-foreground">Day of Month</label>
                    <div class="kt-input">
                        <input type="number" name="day_of_month" id="edit_day_of_month" min="1" max="31" placeholder="1-31" />
                    </div>
                </div>

                <div class="flex flex-col gap-2" id="edit_cron_expression_container" style="display: none;">
                    <label for="edit_cron_expression" class="text-sm font-semibold text-foreground">Cron Expression</label>
                    <div class="kt-input">
                        <input type="text" name="cron_expression" id="edit_cron_expression" placeholder="0 0 * * *" />
                    </div>
                    <span class="text-xs text-muted-foreground">Example: 0 0 * * * (runs at midnight every day)</span>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="edit_time" class="text-sm font-semibold text-foreground">Time</label>
                    <div class="kt-input">
                        <input type="time" name="time" id="edit_time" required />
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-3 modal-btns">
                    <button type="button" class="kt-btn min-w-[80px] cancel" data-kt-modal-dismiss="true" onclick="AuditTracker.track({ event_type:'click', module:'CronScheduler', section:'CronScheduler', page:'Cron Scheduler Edit', action:'Cancel Edit Schedule' })">Cancel</button>
                    <button type="submit" class="kt-btn kt-btn-primary min-w-[80px] save">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Progress Modal -->
<div class="kt-modal shadow" data-kt-modal="true" id="progress_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[500px] top-[20%] shadow">
        <div class="kt-modal-body p-10">
            <div class="flex flex-col items-center gap-5 text-center">
                <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
                <div class="flex flex-col gap-2">
                    <h3 class="text-lg font-semibold text-foreground">Running Import</h3>
                    <p class="text-sm text-muted-foreground">Please wait, we are importing data from ODK Central.</p>
                </div>
                <div class="w-full bg-secondary rounded-full h-2 mt-4 overflow-hidden">
                    <div class="bg-primary h-full w-0" id="importProgress"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@vite('resources/js/cronScheduler/cron-scheduler.js')
@endsection