@extends('backend.layouts.app')
@section('content')
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-lg-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Agenda Kegiatan</h4>

                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a href="{{route('kegiatan.index')}}" class="nav-link active" id="nav-home-tab"
                                data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab"
                                aria-controls="nav-home" aria-selected="true">Tampilan List </a>
                            <a href="{{route('kegiatan.index', ['view' => 'kalender'])}}" class="nav-link"
                                id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button"
                                role="tab" aria-controls="nav-profile" aria-selected="false">Tampilan Kalender</a>
                        </div>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                                aria-labelledby="nav-home-tab">
                                <div class="table-responsive">
{{--                                    <div class="row">--}}
{{--                                        <div class="col-md-4">--}}
{{--                                            <div class="row">--}}
{{--                                                <label for="" class="col-md-4">Tanggal Mulai</label>--}}
{{--                                                <div class="col-md-8">--}}
{{--                                                    <input type="date" name="date_start" id="date_start" class="form-control">--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                            <br>--}}
{{--                                            <div class="row">--}}
{{--                                                <label for="" class="col-md-4">Tanggal Selesai</label>--}}
{{--                                                <div class="col-md-8">--}}
{{--                                                    <input type="date" name="date_end" id="date_start" class="form-control">--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="col-md-4">--}}
{{--                                            <div class="row">--}}
{{--                                                <label for="" class="col-md-4">Lokasi</label>--}}
{{--                                                <div class="col-md-8">--}}
{{--                                                    <input type="text" name="date_start" id="date_start" class="form-control">--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                            <br>--}}
{{--                                            <div class="row">--}}
{{--                                                <label for="" class="col-md-4">Ruangan</label>--}}
{{--                                                <div class="col-md-8">--}}
{{--                                                    <input type="text" name="date_end" id="date_start" class="form-control">--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="col-md-4">--}}
{{--                                            <div class="row">--}}
{{--                                                <label for="" class="col-md-4">Pimpinan</label>--}}
{{--                                                <div class="col-md-8">--}}
{{--                                                    {{Form::select('pimpinan', $pimpinan, null, ["class" => "form-control"])}}--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                            <br>--}}
{{--                                            <div class="row">--}}
{{--                                                <div class="col-md-4"></div>--}}
{{--                                                <div class="col-md-8">--}}
{{--                                                    <div class="row">--}}
{{--                                                        <div class="col-md-6">--}}
{{--                                                            <button class="btn btn-primary btn-block">Cari</button>--}}
{{--                                                        </div>--}}
{{--                                                        <div class="col-md-6">--}}
{{--                                                            <button class="btn btn-warning btn-block">Reset</button>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <a href="{{ url('kegiatan/create') }}" class="btn btn-outline-primary btn-fw">Add
                                        Data</a>
                                    <table class="table-striped table-hover wrap" id="datatables" style="width: 100%;">
                                        <thead style="text-align: center;">
                                            <tr>
                                                <th>
                                                    #
                                                </th>
                                                <th>
                                                    Lokasi
                                                </th>
                                                <th>
                                                    Ruangan
                                                </th>
                                                <th>
                                                    Kegiatan
                                                </th>
                                                @role(['pimpinan','superadministrator'])
                                                <th>
                                                    Status
                                                </th>
                                                @endrole
                                                <th>
                                                    Start - End
                                                </th>
                                                <th>
                                                    Undangan / Lampiran
                                                </th>
                                                <th>
                                                    Undangan Pimpinan
                                                </th>
                                                <th>
                                                    Creator
                                                </th>
                                                <th>
                                                    Action
                                                </th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-profile" role="tabpanel"
                                aria-labelledby="nav-profile-tab">
                                <div id='calendar'></div>
                            </div>

                        </div>




                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal starts -->
    <!-- <div class="text-center">
        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">Click for
            demo<i class="ti-arrow-circle-right ms-1"></i></button>
    </div> -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body print-container">
                    <div class="row">
                        <div class="col text-center">
                            <h5 id="exampleModalLabel5"></h5>
                            <h5 id="exampleModalLabel"></h5>
                            <h5 id="exampleModalLabel2"></h5>
                            <h5 id="exampleModalLabel3"></h5>
                            <h5 id="exampleModalLabel4"></h5>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <div id="qrcode"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="window.print()" class="btn btn-success">Print</button>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Ends -->
    <!-- content-wrapper ends -->


    {{-- modal untuk peserta--}}

    <div class="modal fade" id="modalPeserta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body print-container">
                    <h4 class="card-title" style="text-align: center;">Tambah Undangan</h4>
                    <div class="row">
                        <div class="col-md-10">
                            <select name="" class="form-control" id="cari-user">
                                <option value="">Pilih User</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary btn-block" id="simpan">Tambahkan</button>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="datatables2" style="width: 100%;">
                                <thead style="text-align: center;">
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            #
                                        </th>
                                        <th>
                                            Nama
                                        </th>
                                        <th>
                                            Jabatan
                                        </th>
                                        <th>
                                            OPD
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" id="kirim-undangan" class="btn btn-success">Kirim Undangan Via WA</a>
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    {{-- end modal peserta--}}
    @endsection
    @push('after-style')
    <link rel="stylesheet" href="{{asset('master-templates/skydash/vendors/fullcalender/lib/main.css')}}">
    <style>
        .select2-container {
            width: 100% !important;
            padding: 0;
        }

        @media print {

            /* Hide every other element */
            body * {
                visibility: hidden;
            }

            /* Then displaying print container element */
            .print-container,
            .print-container * {
                visibility: visible;
            }

            /* Adjusting the position to always start from top left */
            /* .print-container { */
            /* width: max-content; */
            /* position: absolute; */
            /* left: 0px; */
            /* top: 0px; */
            /* } */
        }
    </style>
    @endpush
    @push('after-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

    <script src="{{asset('master-templates/skydash/vendors/fullcalender/lib/main.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myTab a").click(function (e) {
                e.preventDefault();
                $(this).tab("show");
            });
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth'
            });
            calendar.render();
            var kegiatan = 0;
            const table = $('#datatables').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "All"]
                ],
                responsive: true,
                processing: true,
                serverSide: true,
                lengthChange: false,
                ajax: window.location,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                @role(['pimpinan', 'superadministrator'])
            order: [[5, 'desc']],
                @endrole
            @role(['admin', 'user'])
            order: [[4, 'desc']],
                    @endrole
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false, className: "text-center" },
                { data: 'ruangan.lokasi.name', name: "ruangan.lokasi.name", className: "ruangan", searchable: false,defaultContent: "-"  },
                { data: 'kentang', name: 'ruangan.name', className: "text-center" , searchable: false, defaultContent: "-"},
                { data: 'name', name: 'name', className: "nama text-center", width: 250 },
                                                @role(['pimpinan', 'superadministrator'])
            { data: 'status', name: 'status', className: "nama text-center" },
            @endrole
            { data: 'tgl', name: "date_start", className: "tgl text-center", width: 150 },
            { data: 'lampiran_name', name: 'lampiran_name', className: "text-center" },
            { data: 'pimpinan' },
            { data: 'user.name' },
            { data: 'action' },
                ]

        });

        $('#datatables tbody').on('click', '.open-peserta', function () {
            let z = table.row($(this).parents('tr')).data();
            kegiatan = z.id;
            if (z.ruangan_id != 1 && z.lokasi_approve_st == "LOKASI_APPROVE_ST_00") {

                $("#kirim-undangan").hide();
            } else {

                $("#kirim-undangan").show();
            }
            $('#kirim-undangan').attr('href', `{{route('kirim-undangan')}}?kegiatan_id=${z.id}`);
            table1.ajax.url(`{{route('undangan.index')}}?id=${kegiatan}`).load();
        });

        $('#kirim-undangan').click(function (a) {
            a.preventDefault();

            $.get($(this).attr('href'), function (data, status) {
                alert('Undangan telah dikirim melalui Whatsapp');
            });

        });
        const table1 = $('#datatables2').DataTable({
            "pagingType": "full_numbers",
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            responsive: true,
            processing: true,
            serverSide: true,
            lengthChange: false,
            ajax: `{{route('undangan.index', ['id' => 0])}}`,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            },
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false, className: "text-center" },
                { data: 'id', name: 'id', visible: false, className: "text-center" },
                { data: 'user.name', name: 'user.name' },
                { data: 'user.jabatan', name: 'user.jabatan', defaultContent: "" },
                { data: 'user.opd.name', name: 'user.opd.name', defaultContent: "", className: "text-center" },
                { data: 'action', className: "text-center" },
            ]

        });

        $('#cari-user').select2({
            placeholder: 'Silahkan Pilih Peserta',
            ajax: {
                url: '{{route("user.cari-user")}}',
                data: function (params) {
                    var query = {
                        search: params.term,
                        page: params.page || 1
                    }
                    return query;
                },
            }
        });

        $('#simpan').click(function () {
            let data = {
                'user_id': $('#cari-user').val(),
                'kegiatan_id': kegiatan
            }
            $.ajax({
                type: "POST",
                url: "{{route('undangan.store')}}",
                data: data,
                success: function () {
                    table1.ajax.reload();
                    $('#cari-user').val("").trigger("change");

                },

            });
        });

        $(document).on('click', '.delete-data-table', function (a) {
            a.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you realy want to delete this records? This process cannot be undone.",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Delete!'
            }).then((result) => {
                if (result.value) {
                    a.preventDefault();
                    var url = $(this).attr('href');
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        url: url,
                        method: 'delete',
                        success: function () {
                            Swal.fire(
                                'Deleted!',
                                'Data has been deleted.',
                                'success'
                            )
                            $('#datatables').DataTable().ajax.reload();
                        }
                    })
                }
            })
        });
        $('#datatables tbody').on('click', '.open-AddBookDialog', function () {
            var data = table.row($(this).parents('tr')).data();
            var opd_name = ' - '
            if (data.user.opd != null) {
                opd_name = data.user.opd.name;
            }
            document.getElementById("exampleModalLabel5").innerHTML = 'Penyelenggara : ' + opd_name;
            document.getElementById("exampleModalLabel").innerHTML = 'Lokasi : ' + data.ruangan.lokasi.name;
            document.getElementById("exampleModalLabel2").innerHTML = 'Ruangan : ' + data.ruangan.name;
            document.getElementById("exampleModalLabel3").innerHTML = 'Acara : ' + data.name;
            document.getElementById("exampleModalLabel4").innerHTML = 'Tanggal : ' + moment(data.date_start).format('LLL') + ' - ' + moment(data.date_end).format('LLL');
            var qrc = document.getElementById("qrcode").innerHTML = '';
            var qrc = new QRCode(document.getElementById("qrcode"), data.kode_kegiatan);
        });
        });

    </script>

    @endpush