@extends('layouts/page')
@section('page-styles')
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y bg-grey">
        <div class="card">
            <div class="px-3 pt-3 border-bottom d-flex justify-content-between">
                <div class="card-title col-6">
                    <h4 class="fw-bold">Survey</h4>
                </div>
                <div class="card-title col-6 d-flex justify-content-end">
                    <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">+
                        Survey</button>
                </div>
            </div>
            <div class="px-3 pt-3 border-bottom d-flex justify-content-between">
                <div class="card-title col-4">
                    <input type="text" class="form-control" placeholder="MM/DD/YYYY - MM/DD/YYYY"
                        id="filter-date-range" />
                </div>
                <div class="card-title col-3">
                    <select class="form-select filter" id="status">
                        <option value="">Pilih Status</option>
                        <option value="tertunda">Tertunda</option>
                        <option value="berjalan">Berjalan</option>
                        <option value="selesai">Selesai</option>
                    </select>
                </div>
                <div class="card-title col-3">
                    <select class="form-select filter" id="rilis">
                        <option value="">Pilih Status Rilis</option>
                        <option value="pending">Pending</option>
                        <option value="publish">Publish</option>
                    </select>
                </div>
            </div>
            <div class="card-datatable table-responsive">
                <table id="tablelistsurvey" class="datatables-users table border-top">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Tipe</th>
                            <th>Tanggal Mulai</th>
                            <th>Tanggal Selesai</th>
                            <th>Status</th>
                            <th>Rilis</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Buat Survey</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ url('survey/add_survey') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div>
                            <label for="name" class="form-label">Nama Survey</label>
                            <div class="input-group">
                                <input type="text" name="name" id="name" class="form-control">
                            </div>
                        </div>
                        <div>
                            <label for="type" class="form-label">Kategori Survey</label>
                            <div class="input-group">
                                <input type="text" name="type" id="type" class="form-control">
                            </div>
                        </div>
                        <div>
                            <label for="jangka_waktu" class="form-label">Jangka Waktu</label>
                            <input type="text" class="form-control" placeholder="MM/DD/YYYY - MM/DD/YYYY"
                                id="jangka_waktu" name="jangka_waktu" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" data-bs-target="#exampleModalToggle2"
                            data-bs-toggle="modal">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('page-scripts')
    @include('page/survey/survey_main_js')
    <script>
        $("#filter-date-range").daterangepicker({
            ranges: {
                Today: [moment(), moment()],
                Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
                "Last 7 Days": [moment().subtract(6, "days"), moment()],
                "Last 30 Days": [moment().subtract(29, "days"), moment()],
                "This Month": [moment().startOf("month"), moment().endOf("month")],
                "Last Month": [
                    moment().subtract(1, "month").startOf("month"),
                    moment().subtract(1, "month").endOf("month")
                ]
            }
        });
        $("#jangka_waktu").daterangepicker({
            ranges: {
                Today: [moment(), moment()],
                Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
                "Last 7 Days": [moment().subtract(6, "days"), moment()],
                "Last 30 Days": [moment().subtract(29, "days"), moment()],
                "This Month": [moment().startOf("month"), moment().endOf("month")],
                "Last Month": [
                    moment().subtract(1, "month").startOf("month"),
                    moment().subtract(1, "month").endOf("month")
                ]
            }
        });
        $("#filter-date-range").on('apply.daterangepicker', function(ev, picker) {
            tablelistsurvey.ajax.reload()
        });
        $("#jangka-waktu").on('apply.daterangepicker', function(ev, picker) {
            tablelistsurvey.ajax.reload()
        });
    </script>
@endsection