@extends('layouts/page')
@section('page-styles')
@endsection
@section('content')
    <style>
        .list-group-item {
            cursor: pointer;
        }

        .list-group-answer {
            max-height: 300px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

        table caption {
            padding: .5em 0;
        }

        table.dataTable th,
        table.dataTable td {
            white-space: nowrap;
        }

        .p {
            text-align: center;
            padding-top: 140px;
            font-size: 14px;
        }

        th:first-child+th+th,
        td:first-child+td+td {
            display: none;
        }

        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y bg-grey">
        <div class="card">
            <div class="nav-align-top">
                <div class="row d-flex justify-content-between mx-3 my-3">
                    <input type="hidden" id="form-id" value="{{ $id }}">
                    <div class="col-6 ps-0">
                        <select class="form-select filter" id="page-id">
                            <option value="">Semua Halaman</option>
                            @foreach ($page as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 pe-0">
                        <select class="form-select filter" id="type-id">
                            <option value="">Pilih Tipe Pertanyaan</option>
                            <option value="1">Free Text</option>
                            <option value="2">Opsi</option>
                            <option value="3">Rating</option>
                        </select>
                    </div>
                </div>
                <ul class="nav nav-pills py-3 px-3">
                    <li class="nav-item mx-3">
                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                            data-bs-target="#tab-dashboard" aria-controls="tab-dashboard"
                            aria-selected="true">Dashbard</button>
                    </li>
                    <li class="nav-item mx-3">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                            data-bs-target="#tab-statistik" aria-controls="tab-statistik"
                            aria-selected="false">Statistik</button>
                    </li>
                </ul>
                <div class="tab-content shadow-none pt-0">
                    <div class="tab-pane fade show active" id="tab-dashboard">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row gy-3">
                                        <div class="col-md-6 col-6">
                                            <div class="d-flex align-items-center d-flex justify-content-center">
                                                <div class="badge rounded-pill bg-label-primary me-4 p-2">
                                                    <i class="ti ti-lg ti-pencil"></i>
                                                </div>
                                                <div class="card-info">
                                                    <h5 class="mb-0" id="average">
                                                        --
                                                    </h5>
                                                    <p>Nilai</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-6">
                                            <div class="d-flex align-items-center d-flex justify-content-center">
                                                <div class="badge rounded-pill bg-label-success me-4 p-2 info-widget">
                                                    <i class="ti ti-lg ti-info-circle"></i>
                                                </div>
                                                <div class="card-info">
                                                    <h5 class="mb-0" id="info">
                                                        --
                                                    </h5>
                                                    <p>Keterangan</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-3">
                            <div class="card">
                                <div class="card-header border-bottom">
                                    <div class="d-flex justify-content-between align-items-center row pb-2 gap-3 gap-md-0">
                                        <div class="col-md-10"></div>
                                        <div class="col-md-2">
                                            <form action="{{ url('survey/export') }}" method="post">
                                                @csrf
                                                <input type="hidden" name="id" value="{{ $id }}">
                                                <div class="col-md-12 btn-group">
                                                    <button class="btn btn-primary" type="submit">
                                                        Export Excel
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-datatable table-responsive">
                                    <table id="report-dashboard" class="datatables-users table border-top">
                                        <thead>
                                            <tr>
                                                <th>Halaman</th>
                                                <th>Unsur</th>
                                                <th>page_id</th>
                                                <th>S/Unsur</th>
                                                <th>Hasil</th>
                                                <th>value_question</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-statistik">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-scripts')
    @include('page/survey/survey_report_js')
@endsection