@extends('layouts.master')

@section('css')
@endsection
@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form action="{{route($route.'.store')}}" method="POST" class="">
                        {{csrf_field()}}
                        <div class="card-body">
                            <div class="col-lg-3" id="pencarian">
                                <select name="kategori_id" class="form-control choices kategori_id @error('kategori_id') is-invalid @enderror select2" id="" required>
                                    <option value="">- PILIH KATEGORI -</option>
                                    @foreach ( $kategori as $dataKat)
                                        <option {{ $dataKat->KategoriId == decode_id(@request()->kategori_id) ? 'selected' : '' }} value="{{ encode_id($dataKat->KategoriId)}}">{{ $dataKat->nama  }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="toolbar">
                                <div class="d-flex flex-row d-none">
                                    <div class="col-12">
                                        <a href="{{route($route.'.update')}}" id="btn-add" class="btn d-flex justify-content-center align-items-center w-100 h-100 btn-primary">
                                            <i class="mdi mdi-plus"></i> Tambah Data
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <table class="table w-100" 
                                data-search="true"
                                data-toggle="table"
                                data-pagination="false"
                                data-toolbar="#toolbar"
                                data-show-refresh="false"
                                data-url="{{route($route.'.grid',['kategori_id' => @request()->kategori_id])}}"
                                data-ajax-options='{"xhrFields": {"withCredentials": true}}'
                                data-sort-name="ids"
                                data-sort-order="desc"
                                data-page-size="10"
                                data-id-field="id"
                                id="grid-data">
                                <thead class="table-secondary text-primary">
                                <tr>
                                    {{-- <th data-width="15%" class="text-center" data-field="action">#</th> --}}
                                    <th data-field="nama">Nama</th>
                                    @foreach ($unit as $dataUnit)
                                        <th class="commandInput" data-field="input" data-key="{{ encode_id($dataUnit->UnitId) }}" data-formatter="commandInput">
                                            {{ $dataUnit->kode }}
                                            <input type="hidden" id="to" data-key="{{ encode_id($dataUnit->UnitId) }}" value="{{ $dataUnit->kode }}" name="to[]">
                                        </th>
                                    @endforeach
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-md-12 text-right">
                                    <button type="submit" class="btn btn-success"><i class="mdi mdi-content-save-outline"></i> Simpan</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript">
var $table = $('#grid-data')
var $ok = $('#ok')
$(function() {
    $('.kategori_id').on('change',function(){
        var kategori = $(this).val();
        window.location.href="{{ url('pengaturan/unit-conversion?kategori_id=') }}"+kategori;
        // $table.bootstrapTable('refresh');
    });
})
function queryParams(params) {
    $('#pencarian').find('input[name], select').each(function() {
        params[$(this).attr('name')] = $(this).val()
    })

    return params
}

function ajaxRequest(params) {
    var url = "{{ route($route.'.grid') }}";
    $.get(url + '?' + $.param(params.data)).then(function (res) {
        params.success(res)
    })
}

        function commandInput(value, row) {
            var kategoriID = row['kategoriID'];
            var unitID     = row['UnitId'];
            var to         = $('.commandInput').attr('data-key');
            var key        = "{{ url('pengaturan/unit-conversion/value') }}/"+kategoriID + '/' + unitID + '/' + to;
            var input      = '';
            var val        = 0;

            $.get(key, function(res){
                val = res.value;
            });

            input += '<input type="text" value="'+val+'" name="val_'+row['UnitId']+'[]" class="form-control">';
            
            return input;
        }

$("#grid-data").on("click", ".remove_data", function() {
        var base_url = $(this).attr('data-href');
        var id = $(this).attr('data-id');
            Swal.fire({
            title: "Hapus Data!",
            text: "Apa anda yakin ingin menghapus data ini ?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Ya Hapus Sekarang",
            cancelButtonText: "Tidak"
        }).then((result) => {

            if (result.isConfirmed) {

                request = $.ajax({
                    url: base_url,
                    xhrFields: {
                        withCredentials: true
                    },
                    type: "GET",
                });

                // Callback handler that will be called on success
                request.done(function(response, textStatus, jqXHR){
                    console.log(response);
                    alertify.success("Berhasil Menhapus Data");
                    $('#grid-data').bootstrapTable('refresh');
                });

                // Callback handler that will be called on failure
                request.fail(function (jqXHR, textStatus, errorThrown){
                    alertify.error("Gagal " + textStatus, errorThrown);
                });

            }

        });

    return false;
});
</script>
@endsection