@extends('layouts.index')
@section('title')
Ref. Ruangan
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" />

<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet">

@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Ref. Ruangan
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Ref. Ruangan</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<!-- Container fluid  -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->


    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex">
                        <h4>Ref. Ruangan</h4>
                        <div class="ms-auto p-3">


                            <a href="javascript:void(0)"  class="btn btn-info" onclick="tambahData()" aria-controls="editJadwalSemua">
                                <i data-feather="edit" class="feather-sm fill-white me-1">
                                </i>
                                Tambah Ruangan</a>

                        </div>
                    </div>


                    <div class="card">
                        <div class="border-bottom title-part-padding">
                            <h4 class="card-title mb-0">Daftar Ruangan</h4>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th rowspan="2" center>No.</th>
                                        <th rowspan="2">Nama Ruangan </th>
                                        <th colspan="4" class="text-center">Kelas</th>
                                        <th rowspan="2">Status</th>
                                        <th rowspan="2">Opsi</th>
                                    </tr>
                                    <tr>
                                        <th class="text-center">1</th>
                                        <th class="text-center">2</th>
                                        <th class="text-center">3</th>
                                        <th class="text-center">VIP</th>
                                    </tr>
                                </thead>
                                <tbody id="list">
                                    @foreach ($list as $item)
                                    <tr id="list_{{$item->id}}">
                                        <td @if($loop->last) id="lastCount" @endif >{{$loop->iteration}}</td>
                                        <td>{{$item->nama}}</td>

                                        <td class="text-center">
                                            @if ($item->kelas_1 == 'Y')
                                                <i class="bi bi-check"></i>
                                                @else 
                                                <i class="bi bi-close"></i>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($item->kelas_2 == 'Y')
                                                <i class="bi bi-check"></i>
                                                @else 
                                                <i class="bi bi-close"></i>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($item->kelas_3 == 'Y')
                                                <i class="bi bi-check"></i>
                                                @else 
                                                <i class="bi bi-close"></i>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($item->kelas_vip == 'Y')
                                                <i class="bi bi-check"></i>
                                                @else 
                                                <i class="bi bi-close"></i>
                                            @endif
                                        </td>

                                        <td>
                                            @if ($item->status == 'Y')
                                                <span class="badge bg-light-success text-success">Aktif</span>
                                                @else
                                                <span class="badge bg-light-danger text-danger">Tidak Aktif</span>
                                            @endif
                                        </td>
                                        <td> <a href="javascript:void(0)" onclick="editData({{$item->id}})">
                                                <i class="fa fa-edit text-info"></i>
                                            </a>

                                            <a href="javascript:void(0)" onclick="deleteData({{$item->id}})">
                                                <i class="fa fa-trash text-danger"></i>
                                            </a>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>






    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="tambahData" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">
            Tambah Data
        </h5>
        <hr>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Tambah Ruangan</h4>
                    <form class="form" id="tambah">
                        <div class="mb-3 mt-3">
                            <label for="fullname">Nama Ruangan</label>
                            <input type="text" class="form-control " name="nama" id="nama_tambah" placeholder="Nama Ruangan">
                        </div>

                        <div class="mb-3">

                            <label for="fullname">Kelas</label>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_1" id="kelas_1_tambah" value="Y">
                                <label class="form-check-label" for="kelas_1_tambah">Kelas 1</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_2" id="kelas_2_tambah" value="Y">
                                <label class="form-check-label" for="kelas_2_tambah">Kelas 2</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_3" id="kelas_3_tambah" value="Y">
                                <label class="form-check-label" for="kelas_3_tambah">Kelas 3</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_vip" id="kelas_vip_tambah" value="Y">
                                <label class="form-check-label" for="kelas_vip_tambah">VIP</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="fullname">Status</label>
                            <select class="form-select" name="status" id="status_tambah">
                                <option value="Y">Aktif</option>
                                <option value="T">Tidak Aktif</option>
                            </select>
                        </div>
                        <div class="form-actions">
                            <div class="card-body border-top">
                                <button type="button" class="
                            btn btn-outline-secondary
                            rounded-pill
                            px-4
                            ms-2
                           
                          " data-bs-dismiss="offcanvas">
                                    Batal
                                </button>

                                <button type="submit" class="btn btn-primary rounded-pill px-4">
                                    <div class="d-flex align-items-center">

                                        Simpan
                                    </div>
                                </button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editData" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">
            Edit Data
        </h5>
        <hr>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Edit Ruangan</h4>
                    <form class="form" id="edit">
                        <input type="hidden" name="id" id="id_edit" value="">
                        <div class="mb-3 mt-3">
                            <label for="fullname">Nama Ruangan</label>
                            <input type="text" class="form-control " name="nama" id="nama_edit" placeholder="Nama Ruangan">
                        </div>
                        <div class="mb-3">
                            <label for="fullname">Kelas</label>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_1" id="kelas_1_edit">
                                <label class="form-check-label" for="kelas_1_edit">Kelas 1</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_2" id="kelas_2_edit">
                                <label class="form-check-label" for="kelas_2_edit">Kelas 2</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_3" id="kelas_3_edit">
                                <label class="form-check-label" for="kelas_3_edit">Kelas 3</label>
                            </div>
                            <br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input success check-outline outline-success" type="checkbox" name="kelas_vip" id="kelas_vip_edit">
                                <label class="form-check-label" for="kelas_vip_edit">VIP</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="fullname">Status</label>
                            <select class="form-select" name="status" id="status_edit">
                                <option value="Y">Aktif</option>
                                <option value="T">Tidak Aktif</option>
                            </select>
                        </div>
                        <div class="form-actions">
                            <div class="card-body border-top">
                                <button type="button" class="
                            btn btn-outline-secondary
                            rounded-pill
                            px-4
                            ms-2
                           
                          " data-bs-dismiss="offcanvas">
                                    Batal
                                </button>

                                <button type="submit" class="btn btn-primary rounded-pill px-4">
                                    <div class="d-flex align-items-center">

                                        Simpan
                                    </div>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>



    </div>
</div>




    @endsection
    @section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

    <script src="{{ asset('back') }}/extra-libs/prism/prism.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>

    <script src="{{ asset('back') }}/libs/nestable/jquery.nestable.js"></script>
    <script>
        //Aksi Tambah

        var offCanvasTambahData = document.getElementById("tambahData");
        var offCanvasTambah = new bootstrap.Offcanvas(offCanvasTambahData, {
            backdrop: true
        });

        function tambahData() {
            offCanvasTambah.show()
        }

        const tambah = document.getElementById('tambah');

        tambah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = tambah.nama.value;
            var kelas_1 = $('#kelas_1_tambah');
            var kelas_2 = $('#kelas_2_tambah');
            var kelas_3 = $('#kelas_3_tambah');
            var kelas_vip = $('#kelas_vip_tambah');
            const status = tambah.status.value;
            const _token = "{{ csrf_token() }}";

            if (kelas_1.prop("checked") == true) {
                kelas_1 = 'Y';
            }else{
                kelas_1 = 'T';
            }

            if (kelas_2.prop("checked") == true) {
                kelas_2 = 'Y';
            }else{
                kelas_2 = 'T';
            }

            if (kelas_3.prop("checked") == true) {
                kelas_3 = 'Y';
            }else{
                kelas_3 = 'T';
            }

            if (kelas_vip.prop("checked") == true) {
                kelas_vip = 'Y';
            }else{
                kelas_vip = 'T';
            }

            let formData = new FormData();
            formData.append("nama", nama);
            formData.append("status", status);
            formData.append("kelas_1", kelas_1);
            formData.append("kelas_2", kelas_2);
            formData.append("kelas_3", kelas_3);
            formData.append("kelas_vip", kelas_vip);

            try {
                let response = await fetch("{{ route('ref-ruangan.store-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_status = datasend.data.status;
                    var res_badge = 'success';

                    var res_kelas_1 = datasend.data.kelas_1;
                    var res_kelas_2 = datasend.data.kelas_2;
                    var res_kelas_3 = datasend.data.kelas_3;
                    var res_kelas_vip = datasend.data.kelas_vip;

                    var res_kelas_1_value = '<i class="bi bi-check"></i>';
                    var res_kelas_2_value = '<i class="bi bi-check"></i>';
                    var res_kelas_3_value = '<i class="bi bi-check"></i>';
                    var res_kelas_vip_value = '<i class="bi bi-check"></i>';
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    if (res_kelas_1 == 'T') {
                        res_kelas_1_value = '<i class="bi bi-close"></i>';
                    }

                    if (res_kelas_2 == 'T') {
                        res_kelas_2_value = '<i class="bi bi-close"></i>';
                    }

                    if (res_kelas_3 == 'T') {
                        res_kelas_3_value = '<i class="bi bi-close"></i>';
                    }

                    if (res_kelas_vip == 'T') {
                        res_kelas_vip_value = '<i class="bi bi-close"></i>';
                    }

                    var last_count = $('#lastCount').text() ? $('#lastCount').text() : 0;
                    var number = parseInt(last_count) + 1;

                    var row = '<tr id="'+res_id+'"> <td>'+number+'</td> <td>'+res_nama+'</td> <td class="text-center">'+res_kelas_1_value+'</td> <td class="text-center">'+res_kelas_2_value+'</td>';
                    row += '<td class="text-center">'+res_kelas_3_value+'</td> <td class="text-center">'+res_kelas_vip_value+'</td>';
                    row += '<td><span class="badge bg-light-'+res_badge+' text-'+res_badge+'">'+res_status_value+'</span></td><td> <a href="javascript:void(0)"  onclick="editData('+res_id+')">';
                    row += '<i class="fa fa-edit text-info"> </i></a> <a href="javascript:void(0)" onclick="deleteData('+res_id+')"> <i class="fa fa-trash text-danger"> </i> </a> </tr>';

                    $('#nama_tambah').val("");
                    $('#kelas_1_tambah').prop('checked', false);
                    $('#kelas_2_tambah').prop('checked', false);
                    $('#kelas_3_tambah').prop('checked', false);
                    $('#kelas_vip_tambah').prop('checked', false);
                    $('#list').append(row);
                    offCanvasTambah.hide()
                    Swal.fire('Ref. Ruangan berhasil ditambahkan', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        //Aksi Edit

        var offCanvasEditData = document.getElementById("editData");
        var offCanvasEdit = new bootstrap.Offcanvas(offCanvasEditData, {
            backdrop: true
        });

        function editData(id) {

            fetch("{{ url('ref-ruangan-detail') }}/" + id).then(function(response) {
                response.json().then(function(resp) {
                    var res = resp;
                    var nama = res.data.nama;
                    var kelas_1 = res.data.kelas_1;
                    var kelas_2 = res.data.kelas_2;
                    var kelas_3 = res.data.kelas_3;
                    var kelas_vip = res.data.kelas_vip;
                    var status = res.data.status;

                    if (kelas_1 == 'Y') {
                        $('#kelas_1_edit').attr('checked', true);
                    }else{
                        $('#kelas_1_edit').attr('checked', false);
                    }

                    if (kelas_2 == 'Y') {
                        $('#kelas_2_edit').attr('checked', true);
                    }else{
                        $('#kelas_2_edit').attr('checked', false);
                    }

                    if (kelas_3 == 'Y') {
                        $('#kelas_3_edit').attr('checked', true);
                    }else{
                        $('#kelas_3_edit').attr('checked', false);
                    }

                    if (kelas_vip == 'Y') {
                        $('#kelas_vip_edit').attr('checked', true);
                    }else{
                        $('#kelas_vip_edit').attr('checked', false);
                    }

                    $('#id_edit').val(id);
                    $('#nama_edit').val(nama);
                    $('#status_edit').val(status);
                });
            });

            offCanvasEdit.show();
        }

        const edit = document.getElementById('edit');

        edit.addEventListener('submit', async (e) => {
            e.preventDefault();

            const id = edit.id.value;
            const nama = edit.nama.value;
            var kelas_1 = $('#kelas_1_edit');
            var kelas_2 = $('#kelas_2_edit');
            var kelas_3 = $('#kelas_3_edit');
            var kelas_vip = $('#kelas_vip_edit');
            const status = edit.status.value;
            const _token = "{{ csrf_token() }}";

            if (kelas_1.prop("checked") == true) {
                kelas_1 = 'Y';
            }else{
                kelas_1 = 'T';
            }

            if (kelas_2.prop("checked") == true) {
                kelas_2 = 'Y';
            }else{
                kelas_2 = 'T';
            }

            if (kelas_3.prop("checked") == true) {
                kelas_3 = 'Y';
            }else{
                kelas_3 = 'T';
            }

            if (kelas_vip.prop("checked") == true) {
                kelas_vip = 'Y';
            }else{
                kelas_vip = 'T';
            }

            let formData = new FormData();
            formData.append("id", id);
            formData.append("nama", nama);
            formData.append("status", status);
            formData.append("kelas_1", kelas_1);
            formData.append("kelas_2", kelas_2);
            formData.append("kelas_3", kelas_3);
            formData.append("kelas_vip", kelas_vip);

            try {
                let response = await fetch("{{ route('ref-ruangan.update-modal') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {

                    var res_id = datasend.data.id;
                    var res_nama = datasend.data.nama;
                    var res_status = datasend.data.status;

                    var res_kelas_1 = datasend.data.kelas_1;
                    var res_kelas_2 = datasend.data.kelas_2;
                    var res_kelas_3 = datasend.data.kelas_3;
                    var res_kelas_vip = datasend.data.kelas_vip;

                    var res_kelas_1_value = '<i class="bi bi-check"></i>';
                    var res_kelas_2_value = '<i class="bi bi-check"></i>';
                    var res_kelas_3_value = '<i class="bi bi-check"></i>';
                    var res_kelas_vip_value = '<i class="bi bi-check"></i>';
                    var res_badge = 'success';
                    var res_status_value = 'Aktif';

                    if (res_status == 'T') {
                        res_badge = 'danger';
                        res_status_value = 'Tidak Aktif';
                    }

                    if (res_kelas_1 == 'T') {
                        res_kelas_1_value = '<i class="bi bi-close"></i>';
                    }

                    if (res_kelas_2 == 'T') {
                        res_kelas_2_value = '<i class="bi bi-close"></i>';
                    }

                    if (res_kelas_3 == 'T') {
                        res_kelas_3_value = '<i class="bi bi-close"></i>';
                    }

                    if (res_kelas_vip == 'T') {
                        res_kelas_vip_value = '<i class="bi bi-close"></i>';
                    }

                    var last_count = $('#lastCount').text() ? $('#lastCount').text() : 0;
                    var number = parseInt(last_count) + 1;

                    var row = '<tr id="'+res_id+'"> <td>'+number+'</td> <td>'+res_nama+'</td> <td class="text-center">'+res_kelas_1_value+'</td> <td class="text-center">'+res_kelas_2_value+'</td>';
                    row += '<td class="text-center">'+res_kelas_3_value+'</td> <td class="text-center">'+res_kelas_vip_value+'</td>';
                    row += '<td><span class="badge bg-light-'+res_badge+' text-'+res_badge+'">'+res_status_value+'</span></td><td> <a href="javascript:void(0)"  onclick="editData('+res_id+')">';
                    row += '<i class="fa fa-edit text-info"> </i></a> <a href="javascript:void(0)" onclick="deleteData('+res_id+')"> <i class="fa fa-trash text-danger"> </i> </a> </tr>';

                    $('#nama_edit').val("");
                    $('#kelas_1_edit').attr('checked', false);
                    $('#kelas_2_edit').attr('checked', false);
                    $('#kelas_3_edit').attr('checked', false);
                    $('#kelas_vip_edit').attr('checked', false);
                    $('#list_'+res_id).replaceWith(row);
                    offCanvasEdit.hide()
                    Swal.fire('Ref. Ruangan berhasil diubah', '', 'success')
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        function deleteData(id) {
        Swal.fire({
            title: 'apakah kamu yakin menghapus Ref.Ruangan ini?',
            icon: 'info',
            confirmButtonText: `Ya, Hapus !`,
        }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('ref-ruangan.delete-modal') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "id": id
                    },

                    success: function(result) {
                        Swal.fire('Ref.Ruangan berhasil dihapus', '', 'success')
                        $('#list_' + id).remove();
                    }
                });
            } else {

            }
        });
    }
    </script>


    @endsection