@extends('layouts.member-app')

@section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}

        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal" data-target="#mdl_add_house_rule">Add
            House Rule <i class="fa fa-plus" aria-hidden="true"></i></a>
        <ol class="breadcrumb">
            <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/summernote/dist/summernote.css') }}">

@endpush


@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">


            <div class="table-responsive" id="table_house_rules" style="overflow-y: hidden;">

            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade" id="mdl_add_house_rule" tabindex="-1" role="dialog" aria-labelledby="mdl_add_bast"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create House Rule</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!
            Form::open(['id'=>'createHouseRule','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" name="title" required="" class="form-control clear_after_save">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="summernote_description" name="description" required></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_edit_house_rule" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_house_rule"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit House Rule</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!
            Form::open(['id'=>'editHouseRule','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <input type="hidden" id="edit_id" name="id">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" name="title" required="" class="form-control clear_after_save"
                                id="edit_title">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="summernote_description_edit" name="description" required></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('plugins/bower_components/summernote/dist/summernote.min.js') }}"></script>
<script>
    function getTableHouseRules() {
    $.get('/member/getTableHouseRules', function (res) {
    $('#table_house_rules').html(res)
    })
    }
    getTableHouseRules()
            $('#createHouseRule').on('submit', function (e) {
    $('#mdl_add_house_rule').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.buildings.store_house_rules')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTableHouseRules();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#editHouseRule').on('submit', function (e) {
    $('#mdl_edit_house_rule').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.buildings.edit_house_rules')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTableHouseRules();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $("#mdl_edit_type").on('show.bs.modal', function(e) {
    var x = $(e.relatedTarget);
    $('#edit_id').val(x.data('id'))
            $('#edit_type').val(x.data('type'))
            $('#edit_luas').val(x.data('width'))
            $('#edit_kva_listrik').val(x.data('kva_electric'))
    })
            function delete_data_house_rule(id){
            Swal.fire({
            title: 'Do you want to delete data?',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Delete',
            }).then((result) => {

            if (result.isConfirmed) {
            $.get('/member/delete_house_rules/' + id, function(res){
            if (res.status == 'success') {
            Swal.fire(res.message, '', 'success')
                    getTableHouseRules();
            } else{
            Swal.fire(res.message, '', 'error')
            }
            }, 'json')

            }
            })
            }
            $('#summernote_description').summernote(
        {
        height:250,
                minHeight:null,
                maxHeight:null
        }
        );
$('#summernote_description_edit').summernote(
        {
        height:250,
                minHeight:null,
                maxHeight:null
        }
        );
$("#mdl_edit_house_rule").on('show.bs.modal', function(e) {
    var x = $(e.relatedTarget);
    var id = x.data('id');
    $.get('/member/getDetailHouseRule/'+id, function(res){
        console.log(res)
        $('#edit_id').val(res.id)
        $('#edit_title').val(res.title)
        $('#summernote_description_edit').val(res.description)
    },'json')
    })
</script>
@endpush