@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="container-fluid">

    <div class="main_title d-flex justify-content-between align-items-center">
        <h2>Scheduled Reports</h2>
        <a href="{{ route('reports.sales-performance') }}" class="{{ \Config::get('view.buttons.secondary') }}">
            <i class="bx bx-bar-chart-alt-2"></i> Sales Performance
        </a>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    {{-- Existing Schedules Table --}}
    <div class="project-box mb-4">
        <h5 class="mb-3">Existing Schedules</h5>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="thead-light">
                    <tr>
                        <th>Report Type</th>
                        <th>Frequency</th>
                        <th>Repeat On</th>
                        <th>Delivery Time</th>
                        <th>Start On</th>
                        <th>Ends</th>
                        <th>Recipients</th>
                        <th>Last Run</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($schedules as $schedule)
                    @php
                        $filterRules = $schedule->filter_rules ?? [];
                        $deliveryTime = $filterRules['delivery_time'] ?? '—';
                        $repeatLabel  = ucfirst($schedule->repeat_unit ?? '');
                        if ($schedule->repeat_on) {
                            $repeatLabel .= ' (' . $schedule->repeat_on . ')';
                        }
                        $endsLabel = match($schedule->ends_type) {
                            'on'    => 'On ' . $schedule->ends_on,
                            'after' => 'After ' . $schedule->ends_after . ' occurrence(s)',
                            default => 'Never',
                        };
                    @endphp
                    <tr id="schedule-row-{{ $schedule->id }}">
                        <td>{{ \App\Models\Reports\ScheduledReport::$reportTypes[$schedule->report_type] ?? $schedule->report_type }}</td>
                        <td>{{ $repeatLabel }}</td>
                        <td>{{ $schedule->repeat_on ?? '—' }}</td>
                        <td>{{ $deliveryTime }}</td>
                        <td>{{ $schedule->start_on ?? '—' }}</td>
                        <td>{{ $endsLabel }}</td>
                        <td>{{ is_array($schedule->email_users) ? count($schedule->email_users) : 0 }} user(s)</td>
                        <td>{{ $schedule->last_run_at ? \Carbon\Carbon::parse($schedule->last_run_at)->format('Y-m-d H:i') : 'Never' }}</td>
                        <td class="text-center">
                            <button type="button"
                                    class="btn btn-sm btn-danger btn-delete-schedule"
                                    data-id="{{ $schedule->id }}"
                                    data-url="{{ route('reports.scheduled.destroy', $schedule->id) }}">
                                <i class="{{ \Config::get('settings.icon_delete') }}"></i> Delete
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted py-4">No scheduled reports found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Create New Schedule Form --}}
    <div class="project-box">
        <h5 class="mb-3">Create New Schedule</h5>

        <div id="schedule-alert" class="d-none"></div>

        <form id="form-create-schedule" novalidate>
            @csrf
            <div class="row g-3">

                {{-- Report Type --}}
                <div class="col-md-4 col-12">
                    <label class="form-label">Report Type <span class="text-danger">*</span></label>
                    <select name="report_type" class="form-select" required>
                        @foreach($reportTypes as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Frequency --}}
                <div class="col-md-4 col-12">
                    <label class="form-label">Frequency <span class="text-danger">*</span></label>
                    <div class="d-flex gap-3 mt-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="frequency" id="freq_daily" value="daily" checked>
                            <label class="form-check-label" for="freq_daily">Daily</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="frequency" id="freq_weekly" value="weekly">
                            <label class="form-check-label" for="freq_weekly">Weekly</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="frequency" id="freq_monthly" value="monthly">
                            <label class="form-check-label" for="freq_monthly">Monthly</label>
                        </div>
                    </div>
                </div>

                {{-- Delivery Time --}}
                <div class="col-md-4 col-12">
                    <label class="form-label">Delivery Time <span class="text-danger">*</span></label>
                    <input type="time" name="delivery_time" class="form-control" value="08:00" required>
                </div>

                {{-- Day of Week (weekly only) --}}
                <div class="col-md-4 col-12 d-none" id="row-day-of-week">
                    <label class="form-label">Day of Week <span class="text-danger">*</span></label>
                    <select name="day_of_week" class="form-select">
                        @foreach(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'] as $day)
                        <option value="{{ $day }}">{{ $day }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Day of Month (monthly only) --}}
                <div class="col-md-4 col-12 d-none" id="row-day-of-month">
                    <label class="form-label">Day of Month <span class="text-danger">*</span></label>
                    <select name="day_of_month" class="form-select">
                        @for($d = 1; $d <= 28; $d++)
                        <option value="{{ $d }}">{{ $d }}</option>
                        @endfor
                    </select>
                </div>

                {{-- Start On --}}
                <div class="col-md-4 col-12">
                    <label class="form-label">Start On <span class="text-danger">*</span></label>
                    <input type="date" name="start_on" class="form-control" value="{{ now()->format('Y-m-d') }}" required>
                </div>

                {{-- Ends Type --}}
                <div class="col-md-6 col-12">
                    <label class="form-label">Ends <span class="text-danger">*</span></label>
                    <div class="d-flex gap-3 mt-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="ends_type" id="ends_never" value="never" checked>
                            <label class="form-check-label" for="ends_never">Never</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="ends_type" id="ends_on" value="on">
                            <label class="form-check-label" for="ends_on">On Date</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="ends_type" id="ends_after" value="after">
                            <label class="form-check-label" for="ends_after">After N Occurrences</label>
                        </div>
                    </div>
                </div>

                {{-- Ends On date (shown when ends_type=on) --}}
                <div class="col-md-3 col-12 d-none" id="row-ends-on">
                    <label class="form-label">End Date</label>
                    <input type="date" name="ends_on" class="form-control">
                </div>

                {{-- Ends After (shown when ends_type=after) --}}
                <div class="col-md-3 col-12 d-none" id="row-ends-after">
                    <label class="form-label">Number of Occurrences</label>
                    <input type="number" name="ends_after" class="form-control" min="1" max="52" placeholder="e.g. 12">
                </div>

                {{-- Recipients --}}
                <div class="col-12">
                    <label class="form-label">Recipients <span class="text-danger">*</span></label>
                    <p class="text-muted small mb-2">Select one or more users to receive this report.</p>
                    <div class="row g-2">
                        @foreach($companyUsers as $u)
                        <div class="col-md-3 col-sm-4 col-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                       name="email_users[]"
                                       id="user_{{ $u->id }}"
                                       value="{{ $u->id }}">
                                <label class="form-check-label small" for="user_{{ $u->id }}">
                                    {{ $u->first_name }} {{ $u->last_name }}
                                    <span class="text-muted">({{ $u->email }})</span>
                                </label>
                            </div>
                        </div>
                        @endforeach
                        @if($companyUsers->isEmpty())
                        <div class="col-12">
                            <p class="text-muted small">No active users found.</p>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Submit --}}
                <div class="col-12">
                    <button type="submit" id="btn-create-schedule" class="btn btn-primary">
                        <i class="bx bx-plus"></i> Create Schedule
                    </button>
                </div>

            </div>
        </form>
    </div>

</div>
@endsection
@push('page_script')
<script>
(function () {

    // ── Show/hide conditional fields ─────────────────────────────────────────

    function updateFrequencyFields() {
        var freq = document.querySelector('input[name="frequency"]:checked');
        var val  = freq ? freq.value : 'daily';

        document.getElementById('row-day-of-week').classList.toggle('d-none', val !== 'weekly');
        document.getElementById('row-day-of-month').classList.toggle('d-none', val !== 'monthly');
    }

    function updateEndsFields() {
        var endsType = document.querySelector('input[name="ends_type"]:checked');
        var val      = endsType ? endsType.value : 'never';

        document.getElementById('row-ends-on').classList.toggle('d-none', val !== 'on');
        document.getElementById('row-ends-after').classList.toggle('d-none', val !== 'after');
    }

    document.querySelectorAll('input[name="frequency"]').forEach(function (el) {
        el.addEventListener('change', updateFrequencyFields);
    });
    document.querySelectorAll('input[name="ends_type"]').forEach(function (el) {
        el.addEventListener('change', updateEndsFields);
    });

    updateFrequencyFields();
    updateEndsFields();

    // ── Create schedule via AJAX ──────────────────────────────────────────────

    document.getElementById('form-create-schedule').addEventListener('submit', function (e) {
        e.preventDefault();

        var alertEl = document.getElementById('schedule-alert');
        var btn     = document.getElementById('btn-create-schedule');
        alertEl.className = 'd-none';

        var formData = new FormData(this);

        btn.disabled  = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Saving...';

        fetch('{{ route('reports.scheduled.store') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept':       'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: formData,
        })
        .then(function (res) { return res.json().then(function (data) { return { status: res.status, data: data }; }); })
        .then(function (res) {
            if (res.status === 200) {
                alertEl.className  = 'alert alert-success';
                alertEl.textContent = res.data.message || 'Scheduled report created.';
                document.getElementById('form-create-schedule').reset();
                updateFrequencyFields();
                updateEndsFields();
                setTimeout(function () { window.location.reload(); }, 1200);
            } else {
                alertEl.className  = 'alert alert-danger';
                alertEl.textContent = res.data.message || 'An error occurred. Please try again.';
            }
        })
        .catch(function () {
            alertEl.className  = 'alert alert-danger';
            alertEl.textContent = 'Network error. Please try again.';
        })
        .finally(function () {
            btn.disabled  = false;
            btn.innerHTML = '<i class="bx bx-plus"></i> Create Schedule';
        });
    });

    // ── Delete schedule via AJAX ──────────────────────────────────────────────

    document.querySelectorAll('.btn-delete-schedule').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (!confirm('Delete this scheduled report?')) return;

            var id  = this.dataset.id;
            var url = this.dataset.url;

            fetch(url, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept':       'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            })
            .then(function (res) { return res.json(); })
            .then(function (data) {
                var row = document.getElementById('schedule-row-' + id);
                if (row) row.remove();
            })
            .catch(function () {
                alert('Failed to delete. Please try again.');
            });
        });
    });

})();
</script>
@endpush