@extends('layouts.app')

@section('title', 'Time Domain Graph Data')

@section('content')
<div class="container-fluid py-4">

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                <div>
                    <h4 class="mb-1">Time Domain Graph Data</h4>
                    <p class="text-muted mb-0">
                        Filter records by device and date range, then export the results.
                    </p>
                </div>

                <div>
                    <span class="badge bg-primary fs-6">
                        {{ number_format($records->total()) }} Records
                    </span>
                </div>
            </div>
        </div>

        <div class="card-body">

            {{-- Validation errors --}}
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <strong>Please correct the following errors:</strong>

                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="alert"
                    ></button>
                </div>
            @endif

            {{-- Filter form --}}
            <form
                method="GET"
                action="{{ route('time-domain-data.index') }}"
                id="filterForm"
                class="row g-3 align-items-end mb-4"
            >
                <div class="col-lg-3 col-md-6">
                    <label for="device_id" class="form-label">
                        Device ID
                    </label>

                    <select
                        name="device_id"
                        id="device_id"
                        class="form-select"
                    >
                        <option value="">All Devices</option>

                        @foreach ($deviceIds as $deviceId)
                            <option
                                value="{{ $deviceId }}"
                                @selected(request('device_id') === $deviceId)
                            >
                                {{ $deviceId }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-3 col-md-6">
                    <label for="from" class="form-label">
                        From Date and Time
                    </label>

                    <input
                        type="datetime-local"
                        name="from"
                        id="from"
                        value="{{ request('from') }}"
                        class="form-control"
                    >
                </div>

                <div class="col-lg-3 col-md-6">
                    <label for="to" class="form-label">
                        To Date and Time
                    </label>

                    <input
                        type="datetime-local"
                        name="to"
                        id="to"
                        value="{{ request('to') }}"
                        class="form-control"
                    >
                </div>

                <div class="col-lg-1 col-md-3">
                    <label for="per_page" class="form-label">
                        Rows
                    </label>

                    <select
                        name="per_page"
                        id="per_page"
                        class="form-select"
                    >
                        @foreach ([25, 50, 100, 200, 500] as $size)
                            <option
                                value="{{ $size }}"
                                @selected((int) request('per_page', 50) === $size)
                            >
                                {{ $size }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-2 col-md-9">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-fill">
                            <i class="bi bi-funnel"></i>
                            Filter
                        </button>

                        <a
                            href="{{ route('time-domain-data.index') }}"
                            class="btn btn-outline-secondary"
                            title="Reset filters"
                        >
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </a>
                    </div>
                </div>
            </form>

            {{-- Active filters and export --}}
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-3">

                <div class="d-flex flex-wrap gap-2">
                    @if (request()->filled('device_id'))
                        <span class="badge bg-light text-dark border">
                            Device:
                            <strong>{{ request('device_id') }}</strong>
                        </span>
                    @endif

                    @if (request()->filled('from'))
                        <span class="badge bg-light text-dark border">
                            From:
                            <strong>
                                {{ \Carbon\Carbon::parse(request('from'))->format('d M Y, h:i A') }}
                            </strong>
                        </span>
                    @endif

                    @if (request()->filled('to'))
                        <span class="badge bg-light text-dark border">
                            To:
                            <strong>
                                {{ \Carbon\Carbon::parse(request('to'))->format('d M Y, h:i A') }}
                            </strong>
                        </span>
                    @endif

                    @if (
                        !request()->filled('device_id') &&
                        !request()->filled('from') &&
                        !request()->filled('to')
                    )
                        <span class="text-muted">
                            No filters applied.
                        </span>
                    @endif
                </div>

                <a
                    href="{{ route('time-domain-data.export-csv', request()->only([
                        'device_id',
                        'from',
                        'to'
                    ])) }}"
                    class="btn btn-success"
                    onclick="return confirmExport({{ $records->total() }});"
                >
                    <i class="bi bi-file-earmark-spreadsheet"></i>
                    Export Filtered CSV
                </a>
            </div>

            {{-- Data table --}}
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Device ID</th>
                            <th class="text-end">V1</th>
                            <th class="text-end">V2</th>
                            <th class="text-end">V3</th>
                            <th class="text-end">I1</th>
                            <th class="text-end">I2</th>
                            <th class="text-end">I3</th>
                            <th class="text-center">Channel Group</th>
                            <th>Created At</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($records as $record)
                            <tr>
                                <td>
                                    {{ $record->id }}
                                </td>

                                <td>
                                    <span class="fw-semibold text-primary">
                                        {{ $record->device_id }}
                                    </span>
                                </td>

                                <td class="text-end">
                                    {{ $record->v1 }}
                                </td>

                                <td class="text-end">
                                    {{ $record->v2 }}
                                </td>

                                <td class="text-end">
                                    {{ $record->v3 }}
                                </td>

                                <td class="text-end">
                                    {{ $record->i1 }}
                                </td>

                                <td class="text-end">
                                    {{ $record->i2 }}
                                </td>

                                <td class="text-end">
                                    {{ $record->i3 }}
                                </td>

                                <td class="text-center">
                                    <span class="badge bg-secondary">
                                        {{ $record->channel_group }}
                                    </span>
                                </td>

                                <td class="text-nowrap">
                                    {{ \Carbon\Carbon::parse($record->created_at)->format('d M Y, h:i:s A') }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center py-5">
                                    <div class="text-muted">
                                        <i class="bi bi-database-x fs-1 d-block mb-2"></i>
                                        No records found for the selected filters.
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if ($records->hasPages())
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mt-4">
                    <div class="text-muted">
                        Showing
                        <strong>{{ number_format($records->firstItem()) }}</strong>
                        to
                        <strong>{{ number_format($records->lastItem()) }}</strong>
                        of
                        <strong>{{ number_format($records->total()) }}</strong>
                        records
                    </div>

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

@push('scripts')
<script>
    function confirmExport(totalRecords) {
        if (totalRecords <= 0) {
            alert('There are no records available to export.');
            return false;
        }

        if (totalRecords > 500000) {
            return confirm(
                'This export contains ' +
                totalRecords.toLocaleString() +
                ' records and may create a large CSV file. Continue?'
            );
        }

        return true;
    }

    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('filterForm');
        const fromInput = document.getElementById('from');
        const toInput = document.getElementById('to');

        form.addEventListener('submit', function (event) {
            if (
                fromInput.value &&
                toInput.value &&
                new Date(fromInput.value) > new Date(toInput.value)
            ) {
                event.preventDefault();
                alert('The From date must be earlier than the To date.');
                fromInput.focus();
            }
        });
    });
</script>
@endpush