@extends('layouts.base')

@section('content-header')
    <div class="col-12">
        <div class="container" style="display: contents">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3 class="m-0"> Master Data</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Admin</a></li>
                        <li class="breadcrumb-item active">Satuan</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="col-lg-12 col-md-12 col-sm-12 mt-2">
        <div class="container" style="display: contents">
            <div class="card">
                <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                <div class="card-header mt-0 pt-0">
                    <div class="d-flex">
                        <h4>Daftar Satuan</h4>
                        <!-- Button trigger modal -->
                        <div class="ml-auto">
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                data-target="#modal-default-add-satuan">
                                Tambah Satuan
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{-- <h5 class="card-title">Form List Data</h5> --}}
                    <div class="table-responsive mt-3">
                        <table id="tabelsatuan" class="table table-hover display" style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th>Nama Satuan</th>
                                    <th>Simbol</th>
                                    <th class="text-center"><i class="fas fa-cog"></i></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Menu -->
    <div class="modal fade" id="modal-default-add-satuan">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Satuan</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-tambah-satuan" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="nama-satuan" class="col-form-label">Nama Satuan:</label>
                                <input type="text" class="form-control" id="nama-satuan" name="nama_satuan" required>
                            </div>
                            <div class="col-md-6">
                                <label for="simbol" class="col-form-label">Simbol:</label>
                                <input type="text" class="form-control" id="simbol" name="simbol" required>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-tambah">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-edit-satuan">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Satuan</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-edit-satuan" method="put" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <input type="hidden" id="id-edit-satuan" name="id_edit">
                            <div class="col-md-6">
                                <label for="nama-satuan-edit" class="col-form-label">Nama Satuan:</label>
                                <input type="text" class="form-control" id="nama-satuan-edit" name="nama_satuan_edit"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label for="simbol-edit" class="col-form-label">Simbol:</label>
                                <input type="text" class="form-control" id="simbol-edit" name="simbol_edit" required>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-edit-satuan">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-hapus-satuan">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Hapus Satuan</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="button-hapus-satuan">&hellip;</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger button-hapus-satuan">Hapus</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <!-- Toastr -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">

    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">

    <style>
        input.switch {
            -moz-appearance: none;
            -webkit-appearance: none;
            -o-appearance: none;
            appearance: none;
            height: 1em;
            width: 2em;
            border-radius: 1em;
            box-shadow: inset -1em 0px 0px 0px rgba(192, 192, 192, 1);
            background-color: white;
            border: 1px solid rgba(192, 192, 192, 1);
            outline: none;
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }

        input.switch:checked {
            box-shadow: inset 1em 0px 0px 0px rgba(33, 150, 243, 0.5);
            border: 1px solid rgba(33, 150, 243, 1);
        }
    </style>
@endpush

@push('scripts')
    <!-- Toastr -->
    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>

    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>

    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        //Initialize Select2 Elements
        $('.select2').select2({
            dropdownParent: $("#modal-default-add-satuan")
        })
        $('.edit_select2').select2({
            dropdownParent: $("#modal-default-edit-satuan")
        })

        $(document).ready(function() {
            $('#tabelsatuan').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('msatuan.getDataMSatuan') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center'
                    },
                    {
                        data: 'nama_satuan',
                        name: 'nama_satuan'
                    },
                    {
                        data: 'simbol',
                        name: 'simbol'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'text-center'
                    },
                ]
            })
        })

        $(document).ready(function() {
            // ajax tambah satuan
            $('#form-tambah-satuan').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('msatuan.store') }}",
                    type: "POST",
                    dataType: "json",
                    data: $(this).serialize(),
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-add-satuan').modal('hide')
                        $('#form-tambah-satuan')[0].reset()
                        $('#tabelsatuan').DataTable().ajax.reload()
                        // location.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            // ajax edit satuan
            $(document).on('click', '.btn-edit-satuan', function() {
                idEdit = $(this).attr('data-idSatuan')
                $.ajax({
                    url: "{{ url('satuan') }}" + '/' + idEdit + '/edit',
                    type: "GET",
                    success: function(response) {
                        data = response.data.satuan
                        $('#id-edit-satuan').val(data.id)
                        $('#nama-satuan-edit').val(data.nama_satuan)
                        $('#simbol-edit').val(data.simbol)
                        $('#modal-default-edit-satuan').modal('show')
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })

            })

            $('#form-edit-satuan').on('submit', function(e) {
                // id edit
                var idEdit = $('#id-edit-satuan').val()
                e.preventDefault();
                $.ajax({
                    url: "{{ url('satuan/update') }}" + '/' + idEdit,
                    type: "PUT",
                    dataType: "json",
                    data: $(this).serialize(),
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-edit-satuan').modal('hide')
                        $('#form-edit-satuan')[0].reset()
                        idEdit = null
                        $('#tabelsatuan').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        // enable button submit on interval 1 detik
                        setTimeout(function() {
                            $('#simpan-form-edit-satuan').attr('disabled', false)
                        }, 500);
                        idEdit = null
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            // ajax hapus satuan
            $(document).on('click', '.btn-hapus-satuan', function() {
                idEdit = $(this).attr('data-idSatuan')
                $.ajax({
                    url: "{{ url('satuan') }}" + '/' + idEdit + '/edit',
                    type: "GET",
                    success: function(response) {
                        data = response.data.satuan
                        var dataAppend = '<p>Apakah anda yakin ingin menghapus satuan <b>' +
                            data.nama_satuan +
                            ' ' + data.simbol + '</b> ?</p>';
                        $('#button-hapus-satuan').html(dataAppend);
                        $('.button-hapus-satuan').attr('data-id', data.id);
                        $('#modal-default-hapus-satuan').modal('show');
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })

            })

            $(document).on('click', '.button-hapus-satuan', function() {
                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('satuan/delete') }}" + '/' + id,
                    type: "DELETE",
                    dataType: "json",
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-hapus-satuan').modal('hide')
                        $('#tabelsatuan').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })
        })
    </script>
@endpush