@extends('layouts.admin_app')
@section('content')
    <div class="container-fluid">
        <div class="card shadow-sm">

            {{-- Card Header --}}
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"></i>Form Submissions</h5>
                </div>
            </div>

            {{-- Search Bar --}}
            <div class="card-body border-bottom">
                <form method="GET" action="{{ route('submission_jsons.index') }}" class="row g-3 align-items-center">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-center">
                            <div class="input-group" style="width: 100vh; position: relative;">
                                <input type="text" name="case_id" class="form-control rounded-pill ps-4"
                                    placeholder="Search by Case ID..." value="{{ request('case_id') }}"
                                    style="height: 45px; border: 2px solid #4E73DF; padding-right: 130px;">
                                <button type="submit" class="btn btn-primary rounded-pill"
                                    style="position: absolute; right: 3px; top: 3px; height: 39px; z-index: 10; padding: 0 20px;">
                                    Search <i class="fas fa-search ms-1"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                @if (request('case_id'))
                    <div class="mt-2">
                        <a href="{{ route('submission_jsons.index') }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times me-1"></i> Clear Search
                        </a>
                        <span class="text-muted ms-2">Searching for: <strong>{{ request('case_id') }}</strong></span>
                    </div>
                @endif
            </div>

            {{-- Table --}}
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th width="10%" class="text-muted">
                                    record ID
                                </th>
                                <th class="text-muted">
                                    Form Name
                                </th>
                                <th class="text-muted">
                                    Case #
                                </th>

                                <th class="text-muted">
                                    Time stamp
                                </th>
                                <th class="text-center text-muted" width="15%">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($records as $record)
                                <tr>
                                    <td class="fw-semibold text-primary">{{ $record->id }}</td>
                                    <td>
                                        <span class="text-dark">{{ $record->form->name ?? '-' }}</span>
                                    </td>
                                    <td>
                                        @if ($record->recorded_case && $record->recorded_case->id)
                                            {{ $record->recorded_case->id }}
                                        @endif
                                    </td>
                                    <td class="border-left-right">
                                        <div class="py-2">
                                            <span class="font-weight-bold text-dark">Created at:</span><br>
                                            {{ $record->created_at }}
                                        </div>

                                        <hr class="my-2">

                                        <div class="py-2">
                                            <span class="font-weight-bold text-dark">Updated at:</span><br>
                                            {{ $record->updated_at }}
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <a href="{{ route('submission_jsons.show', $record->id) }}"
                                            class="btn btn-sm btn-primary" title="View Submission">
                                            <i class="fas fa-eye me-1"></i>View
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <div class="text-muted">
                                            <i class="fas fa-inbox fa-3x mb-3 d-block" style="opacity: 0.3;"></i>
                                            <h6>No submissions found</h6>
                                            @if (request('case_id'))
                                                <p class="mb-0">Try adjusting your search criteria</p>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($records->hasPages())
                <div class="card-footer bg-white py-3">
                    <div class="d-flex justify-content-center">
                        {{ $records->appends(request()->query())->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            @endif

        </div>
    </div>
@endsection