@extends('layouts.panel.index')
@section('title','Form RHA')

@include('admin.form._js.index')

@push('style')
    <style>
        .form-control {
            padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
            border-radius: 0.375rem !important;
        }
        
        .select2-selection__clear {
            display: none !important;
        }
        
        .select2-selection__rendered {
            border: 1px solid #E5E7E9 !important;
            border-radius: 0.375rem !important;
            line-height: 36px !important;
            background-color: #fff !important;
        }

        .select2-selection__arrow {
            position: absolute !important;
            height: 37px !important;
        }
    </style>
@endpush

@section('content')

<div class="clearfix mb-2">
    <div class="float-start">
        <h5><b>Form RHA</b></h5>
    </div>
    <div class="float-end">
        <a href="{{ route('admin.form.create')}}" class="btn btn-primary rounded btn-sm"><i class="fa-solid fa-plus"></i> Tambah</a>
    </div>
</div>

<div class="d-flex justify-content-end mb-2 gap-2">
<div class="form-group" style="width: 245px;">
    <select class="form-control" id="category">
            <option value="" disabled selected>Pilih kategori</option>
        </select>
    </div>
    <div class="">
        <input type="search" name="search" class="form-control" placeholder="Cari pertanyaan" id="search">
    </div>
</div>

<div class="card border-0">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Pertanyaan</th>
                        <th>Pilihan</th>
                        <th>Solusi</th>
                        <th>Kategori</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody class="table-solution">
                    
                </tbody>
            </table>
        </div>

        <nav aria-label="..." class="mt-5 d-flex justify-content-end">
            <ul class="pagination" id="pagination">
                
                </li>
            </ul>
        </nav>
    </div>
</div>
@endsection