@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/adminHeader.css') }}">
<link rel="stylesheet" href="{{ asset('css/responsesAdmin.css') }}">
@endpush

@section('content')
<div class="container">
    <div class="admin-header-box">
        <div>
            <h4>Senarai Borang & Responden</h4>
            <p>Klik pada butang tersebut untuk melihat senarai dan jawapan responden.</p>
        </div>

        <form method="GET" action="{{ route('admin.responses.list') }}" style="max-width: 300px; width: 100%;">
            <div class="input-group input-group-sm shadow-sm">
                <input type="text" name="search" value="{{ request('search') }}" class="form-control border-0 ps-3" placeholder="Cari tajuk..." style="border-radius: 20px 0 0 20px;">
                <button class="btn btn-light border-0 px-3" type="submit" style="color: #4e73df;">
                    <i class="bi bi-search"></i>
                </button>
                @if(request('search'))
                    <a href="{{ route('admin.responses.list') }}" class="btn btn-light border-0 border-start px-2" style="border-radius: 0 20px 20px 0;">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                @else
                    <div class="bg-light px-2" style="border-radius: 0 20px 20px 0;"></div>
                @endif
            </div>
        </form>
    </div>

    <div class="row g-3">
        @forelse($surveys as $survey)
            <div class="col-md-6 col-lg-4 d-flex">
                <div class="response-survey-item d-flex align-items-center justify-content-between p-3 shadow-sm w-100">
                    <div class="d-flex align-items-center flex-grow-1 me-3">
                        <div class="icon-box-stat me-3">
                            <span class="fw-bold text-secondary">#{{ $loop->iteration }}</span>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1 text-dark text-uppercase">{{ $survey->title }}</h6>
                            <small class="text-muted">{{ $survey->responses_count }} respons</small>
                        </div>
                    </div>
                    <a href="{{ route('admin.responses.respondents', $survey->id) }}" class="btn btn-primary btn-sm rounded-2 px-3">
                        <i class="bi bi-box-arrow-up-right"></i>
                    </a>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <div class="text-muted">
                    <i class="bi bi-inbox fs-1 d-block mb-2 opacity-25"></i>
                    <p class="small">Tiada borang ditemui.</p>
                </div>
            </div>
        @endforelse
    </div>
</div>
@endsection