@extends('layouts.app')
@section('title', 'Surveys')
@section('content')
<main class="nxl-container"><div class="nxl-content"><div class="page-header"><h5>Surveys</h5></div><div class="main-content">
@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
@if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif
<div class="card mb-4" id="surveyTopFilters">
 <div class="card-header"><strong>Survey Filters</strong></div>
 <x-server-list-toolbar placeholder="Search surveys by name, description, or audience"
    apply-label="Apply Filters" reset-label="Reset Filters" actions-class="w-100 justify-content-center" :filters="[
    'status'=>['label'=>'Status','options'=>['draft'=>'Draft','active'=>'Active','closed'=>'Closed']],
    'type'=>['label'=>'Type','options'=>['csat'=>'CSAT','nps'=>'NPS','product_feedback'=>'Product Feedback','custom'=>'Custom']],
    'date_from'=>['label'=>'Created from','type'=>'date'],'date_to'=>['label'=>'Created to','type'=>'date'],
 ]" />
</div>
<div class="card mb-4"><div class="card-header">Create Survey</div><div class="card-body"><form method="POST" action="{{ route('surveys.store') }}" class="row g-3">@csrf
<div class="col-md-6"><label class="form-label">Survey Name</label><input class="form-control" name="name" required></div>
<div class="col-md-3"><label class="form-label">Type</label><select class="form-select" name="type">@foreach(['csat','nps','product_feedback','custom'] as $s)<option value="{{ $s }}">{{ strtoupper($s) }}</option>@endforeach</select></div>
<div class="col-md-3"><label class="form-label">Status</label><select class="form-select" name="status">@foreach(['draft','active','closed'] as $s)<option>{{ $s }}</option>@endforeach</select></div>
<div class="col-12"><textarea class="form-control" name="description" placeholder="Description"></textarea></div>
<div class="col-md-4"><input class="form-control" name="target_audience" placeholder="Target audience"></div>
<div class="col-md-3"><input type="date" class="form-control" name="start_date"></div>
<div class="col-md-3"><input type="date" class="form-control" name="end_date"></div>
<div class="col-auto"><button class="btn btn-primary">Create</button></div>
</form></div></div>
<div class="card">
 <div class="card-header"><strong>Survey Records</strong></div>
 <div class="table-responsive">
  <table class="table table-hover mb-0" id="surveyServerList">
   <thead><tr><th>Name</th><th>Type</th><th>Status</th><th>Owner</th><th>Questions</th><th>Recipients</th><th>Responses</th><th>Completion</th><th>Dates</th><th></th></tr></thead>
   <tbody>
   @forelse($surveys as $survey)
    @php($completion=$survey->recipients_count?round($survey->responses_count/$survey->recipients_count*100):0)
    <tr>
     <td><strong>{{ $survey->name }}</strong><div class="small text-muted">{{ \Illuminate\Support\Str::limit($survey->description,70) }}</div></td>
     <td>{{ strtoupper(str_replace('_',' ',$survey->type)) }}</td>
     <td><span class="badge bg-soft-primary text-primary">{{ ucfirst($survey->status) }}</span></td>
     <td>{{ $survey->owner?->name ?: 'Unassigned' }}</td>
     <td>{{ $survey->question_records_count }}</td><td>{{ $survey->recipients_count }}</td><td>{{ $survey->responses_count }}</td>
     <td style="min-width:130px"><div class="d-flex align-items-center gap-2"><div class="progress flex-grow-1 ht-5"><div class="progress-bar" style="width:{{ $completion }}%"></div></div><small>{{ $completion }}%</small></div></td>
     <td class="small">{{ $survey->start_date?->format('Y-m-d') ?: '—' }}<br>{{ $survey->end_date?->format('Y-m-d') ?: '—' }}</td>
     <td><a href="{{ route('surveys.show',$survey) }}" class="btn btn-sm btn-outline-primary">Open</a></td>
    </tr>
   @empty<tr><td colspan="10" class="text-center text-muted py-4">No Surveys found.</td></tr>@endforelse
   </tbody>
  </table>
 </div>
 <div class="p-3">{{ $surveys->links() }}</div>
</div>
</div></div></main>
@endsection
