@extends('master')
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link href="{{asset('assets/custom/css/slimselect.css')}}" rel="stylesheet"/>
@endsection
@section('content')
    <div class="mb-4"></div>
    <div class="container-fluid px-4  mb-4">
        <div class="row justify-content-between">
            <div class="col">
                <div style="font-size: 14px" class="breadcrumb-item">Laporan / <span>Butuh Tindakan</span></div>
            </div>
        </div>
    </div>
    <div class="body flex-grow-1 bg-light">
        <div class="container-lg px-4 py-4">
            <div class="card border-0 bg-white shadow-sm">
                <div class="card-body p-0">
                    <div class="p-4 border-bottom bg-white">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-2 col-lg-2">
                                <label for="dLength" class="mb-2">
                                    Show Entries
                                </label>
                                <select id="dLength" class="form-select">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>

                            <div class="col-md-4 col-lg-5">
                                <label for="search" class="mb-2">
                                    Search
                                </label>
                                <div class="input-group">

                                    <input class="form-control "
                                           id="search"
                                           name="search"
                                           type="search"
                                           placeholder="Cari data disini...">
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3">
                                <div class="d-flex gap-2">
                                    <button id="exportBtn" class="btn btn-outline-primary flex-fill" type="button" title="Export Data">
                                        <i class="bi bi-download me-1"></i>Export
                                    </button>
                                    <button id="filterToggleBtn"
                                            class="btn btn-primary flex-fill d-flex align-items-center justify-content-center gap-2"
                                            type="button">
                                        <i class="bi bi-funnel"></i>
                                        <span>Custom Filter</span>
                                        <i class="bi bi-chevron-down rotate-icon"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="customFilterBox" class="filter-box">
                            <div class="row g-3 align-items-end mt-1">
                                <div class="col-md-2 col-lg-2">
                                    <label for="sortBy" class="mb-2">
                                        Sort Field
                                    </label>
                                    <select id="sortBy" class="form-select form-select-lg shadow-none border">
                                        <option selected value="created_at">Waktu</option>
                                    </select>
                                </div>

                                <div class="col-md-2 col-lg-2">
                                    <label for="sortDir" class="mb-2">
                                        Sorting
                                    </label>
                                    <select id="sortDir" class="form-select form-select-lg shadow-none border">
                                        <option value="asc">ASC</option>
                                        <option selected value="desc">DESC</option>
                                    </select>
                                </div>

                            </div>
                            <div class="row g-3 align-items-end mt-1">
                                <div class="col-md-2 col-lg-2">
                                    <label for="type_report" class="mb-2">
                                        Tipe Laporan
                                    </label>
                                    <select id="type_report" class="form-select">
                                        <option selected value="">Semua</option>
                                        <option value="1">Pelanggaran SOP</option>
                                        <option  value="2">Insiden Keselamatan Petugas</option>
                                        <option  value="3">Kejadian Hais</option>
                                    </select>
                                </div>

                                <div class="col-md-2 col-lg-2">
                                    <label for="location" class="mb-2">
                                        Lokasi Kejadian
                                    </label>

                                    <select id="location">
                                        <option value="">Semua</option>
                                        @foreach($location_categories as $cat)
                                            <optgroup label="{{$cat->name}}">
                                                @foreach($cat->locations as $location)
                                                    <option value="{{$location->id}}">{{$location->title}}</option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 col-lg-2">
                                    <label for="location" class="mb-2">
                                        Judul Kejadian Medis
                                    </label>
                                    <select id="location" class="form-select">
                                        <option selected value="">Semua</option>
                                        @foreach($title_medicals as $t)
                                            <option value="{{$t->id}}">{{$t->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>

                            <div class="row g-3 align-items-end mt-1">
                                <div class="col-md-2 col-lg-2">
                                    <label for="start_date" class="mb-2">
                                        Start Date
                                    </label>
                                    <div class="input-group">

                                        <input class="form-control "
                                               id="start_date"
                                               name="start_date"
                                               type="date"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-2 col-lg-2">
                                    <label for="end_date" class="mb-2">
                                        End Date
                                    </label>
                                    <div class="input-group">

                                        <input class="form-control "
                                               id="end_date"
                                               name="end_date"
                                               type="date"
                                        >
                                    </div>
                                </div>
                                <div class="col-md-2 col-lg-2">
                                   <button id="clearDate" class="btn btn-danger">Clear</button>
                                </div>
                            </div>

                            <div class="row g-3 align-items-end mt-1">
                                <div class="col-md-2 col-lg-2">
                                    <label for="status" class="mb-2">
                                        Status
                                    </label>
                                    <select id="status" class="form-select">
                                        <option selected value="">Semua</option>
                                        <option value="1">Baru</option>
                                        <option value="2">Verifikasi</option>
                                        <option value="3">Diproses</option>
                                        <option value="4">Selesai</option>
                                        <option value="5">Ditolak</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0" id="empTable">
                                <thead>
                                <tr>
                                    <th class="bg-light text-muted border-0">No</th>
                                    <th class="bg-light text-muted border-0">
                                        Status
                                    </th>
                                    <th class="bg-light text-muted border-0">
                                        Detail Kejadian
                                    </th>
                                    <th class="bg-light text-muted border-0">
                                        Lokasi Kejadian
                                    </th>
                                    <th class="bg-light text-muted border-0">
                                        Waktu
                                    </th>
                                    <th class="bg-light text-muted border-0">
                                        Actions
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                            <div class="text-muted small">
                                Showing <span class="fw-semibold" id="start">1</span> to
                                <span class="fw-semibold" id="end">10</span> of
                                <span class="fw-semibold" id="total">100</span> entries
                            </div>
                            <nav aria-label="Table pagination">
                                <ul class="pagination pagination-sm mb-0">

                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

@endsection
@section('script')
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="{{asset('assets/custom/js/slimselect.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const tableUrl = "{{ route('report.query') }}"

    </script>
    <script src="{{asset('assets/custom/js/report-action.js')}}"></script>
@endsection