@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">
        @if ($user->cans('add_type'))
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal" data-target="#mdl_add_type">Add Type
            <i class="fa fa-plus" aria-hidden="true"></i></a>
        @endif
        <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') }}">


@endpush


@section('content')

<div class="row">

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


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

            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade" id="mdl_add_type" 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 Type</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createType','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>Type</label>
                            <input type="number" name="type" required="" class="form-control clear_after_save">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Luas m2</label>
                            <input type="number" name="width" required="" class="form-control clear_after_save">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Kva Listrik</label>
                            <input type="number" name="kva_electric" required="" class="form-control clear_after_save">
                        </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_type" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_type"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Type</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'editType','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="id" id="edit_id">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Type</label>
                            <input type="number" name="type" required="" class="form-control clear_after_save"
                                id="edit_type">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Luas</label>
                            <input type="text" name="width" required="" class="form-control clear_after_save"
                                id="edit_luas">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Kva Listrik</label>
                            <input type="number" name="kva_electric" required="" class="form-control clear_after_save"
                                id="edit_kva_listrik">
                        </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>
@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>
    function getTableTypes() {
    $.get('/member/getTableTypes', function (res) {
    $('#table_type').html(res)
    })
    }
    getTableTypes()
            $('#createType').on('submit', function (e) {
    $('#mdl_add_type').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.buildings.store_type')}}',
            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) => {
            getTableTypes();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#editType').on('submit', function (e) {
    $('#mdl_edit_type').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.buildings.edit_type')}}',
            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) => {
            getTableTypes();
            })
            }
            },
            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_type(id){
            Swal.fire({
            title: 'Do you want to delete data?',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Delete',
            }).then((result) => {

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

            }
            })
            }
</script>
@endpush