@extends('layouts.default')

@section('title', 'Data Ruangan')

@push('css')
<link href="{{ asset('assets/plugins/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/buttons/buttons.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/responsive/responsive.bootstrap4.css') }}" rel="stylesheet" />
@endpush

@section('content')
<ol class="breadcrumb pull-right">
    <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
    <li class="breadcrumb-item"><a href="javascript:;">Master</a></li>
    <li class="breadcrumb-item active">Ruangan</li>
</ol>

<h1 class="page-header">Data Ruangan <small>Manajemen Data Ruangan & Lantai</small></h1>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
                <h4 class="panel-title">Data Ruangan</h4>
            </div>

            <div class="panel-body">
                <table id="data-table-buttons" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th width="1%">#</th>
                            <th>Nama Ruangan</th>
                            <th>Lantai</th>
                            <th width="15%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <!-- Modal Form -->
                <div class="modal fade" id="modal-form">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="modal-title">Tambah Ruangan</h4>
                                <button type="button" class="close" data-dismiss="modal" onclick="reset_form()" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">
                                @include('pages.ruangan.form')
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Detail -->
                <div class="modal fade" id="modal-detail">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Detail Ruangan</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">
                                @include('pages.ruangan.detail')
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/datatables/js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/dataTables.buttons.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/vfs_fonts.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.html5.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.print.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/dataTables.responsive.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/responsive.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>

<script>
$(document).ready(function () {
    // Init DataTable
    var table = $('#data-table-buttons').DataTable({
        dom: 'Bfrtipl',
        buttons: [
            {
                text: '<i class="fas fa-plus fa-sm"></i> Tambah Data',
                className: 'btn btn-sm btn-success',
                action: function () {
                    reset_form();
                    $('#modal-form').modal('show');
                    $('#modal-title').html("Tambah Ruangan");
                    $('#btnSave-title').html("Simpan");
                    $('#_method').val('POST');
                }
            },
            {
                text: '<i class="fas fa-sync fa-sm"></i>',
                className: 'btn btn-sm btn-warning',
                action: function (e, dt, node, config) {
                    dt.ajax.reload();
                }
            },
            { extend: 'copy', className: 'btn-sm btn-success' },
            { extend: 'csv', className: 'btn-sm btn-success' },
            { extend: 'excel', className: 'btn-sm btn-success' },
            { extend: 'pdf', className: 'btn-sm btn-success' },
            { extend: 'print', className: 'btn-sm btn-success' }
        ],
        ajax: '{{ route("ref-ruangan.index") }}',
        responsive: true,
        processing: true,
        serverSide: false,
        order: [[2, 'asc'], [1, 'asc']], // Order by Lantai then Nama
        columns: [
            { data: 'id_ruangan' },
            { data: 'nama_ruangan' },
            { data: 'lantai' },
            {
                data: null,
                orderable: false,
                render: function (data, type, row) {
                    return `
                        <div class="btn-group">
                            <button onclick="detail_action(${row.id_ruangan})" class="btn btn-xs btn-info" title="Detail"><i class="fa fa-eye"></i></button>
                            <button onclick="edit_action(${row.id_ruangan})" class="btn btn-xs btn-warning" title="Edit"><i class="fa fa-edit"></i></button>
                            <button onclick="delete_action(${row.id_ruangan})" class="btn btn-xs btn-danger" title="Hapus"><i class="fa fa-trash"></i></button>
                        </div>`;
                }
            }
        ]
    });
});

// Reset Form
function reset_form() {
    $('#RefRuanganForm').trigger("reset");
    $('#id_ruangan').val('');
    $('#_method').val('POST');
    if ($('#RefRuanganForm').parsley) {
        $('#RefRuanganForm').parsley().reset();
    }
}

// Edit Action
function edit_action(id) {
    reset_form();
    $('#modal-form').modal('show');
    $('#modal-title').html("Edit Ruangan");
    $('#btnSave-title').html('<i class="fa fa-spinner fa-spin"></i> Loading...');
    
    $.ajax({
        url: `{{ url('ref-ruangan') }}/${id}`,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            if(res.status) {
                let d = res.data;
                $('#id_ruangan').val(d.id_ruangan);
                $('#nama_ruangan').val(d.nama_ruangan);
                $('#lantai').val(d.lantai);
                
                $('#_method').val('PUT');
                $('#btnSave-title').html('Update');
            }
        },
        error: function() {
            $('#modal-form').modal('hide');
            Swal.fire('Error', 'Gagal memuat data.', 'error');
        }
    });
}

// Detail Action
function detail_action(id) {
    Swal.fire({
        title: 'Memuat Data...',
        text: 'Mohon tunggu sebentar',
        allowOutsideClick: false,
        showConfirmButton: false,
        willOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: `{{ url('ref-ruangan') }}/${id}`,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            Swal.close();
            if(res.status) {
                let d = res.data;
                let html = `
                    <table class="table table-bordered">
                        <tr><th width="30%">Nama Ruangan</th><td>${d.nama_ruangan}</td></tr>
                        <tr><th>Lantai</th><td>${d.lantai}</td></tr>
                    </table>
                `;
                $('#detail-content').html(html);
                $('#modal-detail').modal('show');
            } else {
                 Swal.fire('Gagal', res.error, 'error');
            }
        },
        error: function() {
            Swal.close();
            Swal.fire('Error', 'Gagal memuat data.', 'error');
        }
    });
}

// Delete Action
function delete_action(id) {
    Swal.fire({
        title: 'Yakin hapus data ini?',
        text: "Data yang dihapus tidak bisa dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Hapus!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ url('ref-ruangan') }}/${id}`,
                type: 'POST',
                data: {
                    _method: 'DELETE',
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    if(res.status) {
                        Swal.fire('Terhapus!', res.message, 'success');
                        $('#data-table-buttons').DataTable().ajax.reload();
                    } else {
                        Swal.fire('Gagal!', res.error, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error');
                }
            });
        }
    });
}
</script>
@endpush