@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
           <h2 class="breadcrumb-title">Question Sections</h2>
        <a href="{{ route('question-sections.create') }}" class="btn btn-primary btn-squared me-2">Add Section <i class="fa-solid fa-plus ms-2"></i></a>
    </div>

 <div class="col-xxl-12">
                    <div class="userDatatable  global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
      <table class="table mb-0 table-borderless  table-striped" >
          <thead>
     <tr class="userDatatable-header">
            <th><span class="userDatatable-title" width="5%">#</th>
               <th><span class="userDatatable-title">Name</th>
               <th><span class="userDatatable-title">Description</th>
               <th><span class="userDatatable-title">Icon</th>
                <th><span class="userDatatable-title" width="15%">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($sections as $key => $section)
            <tr>
                <td>{{ $key + 1 }}</td>
                <td>{{ $section->name }}</td>
                <td>{{ $section->description }}</td>
                <td>
                    @if($section->icon_path)
                        <img src="{{ asset($section->icon_path) }}" width="30" height="30">
                    @endif
                </td>
                <td>
                    <a href="{{ route('question-sections.edit', $section->id) }}" class="btn btn-sm btn-warning">Edit</a>
                    <form action="{{ route('question-sections.destroy', $section->id) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button onclick="return confirm('Delete this section?')" class="btn btn-sm btn-danger">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    </div>
    </div>
</div>
    </div>
</div>
@endsection