@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">
                    <div class="card-header">
                        <a href="{{route($route.'.update')}}" id="btn-add" class="btn btn-primary">
                            <i class="mdi mdi-upload"></i> Upload
                        </a>
                    </div>
                    <div class="card-body">
                        <div id="toolbar" class="">
                            <div class="d-flex gap-1">
                                <div>
                                    <select name="tahun" class=" select2" id="">
                                        <option value=""> PILIH TAHUN </option>
                                        @for ($i = date('Y')-5; date('Y') > $i; $i++)
                                            <option value="{{$i}}">{{$i}}</option>
                                        @endfor
                                        <option value="{{date('Y')}}">{{date('Y')}}</option>
                                    </select>
                                </div>
                                <div>
                                    <select name="sektor" class=" select2" id="sektor">
                                        <option value=""> PILIH SEKTOR </option>
                                        @foreach ($sektor as $datasektor )
                                            <option value="{{encode_id($datasektor->MsSektorId)}}">{{$datasektor->nama}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <select name="subsektor" class=" select2" id="subsektor">
                                        <option value=""> PILIH SUB SEKTOR </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <table class="table w-100" 
                            data-search="true"
                            data-toggle="table"
                            data-pagination="true"
                            data-toolbar="#toolbar"
                            data-show-refresh="false"
                            data-url="{{route($route.'.grid')}}"
                            data-ajax-options='{"xhrFields": {"withCredentials": true}}'
                            data-sort-name="ids"
                            data-sort-order="desc"
                            data-page-size="10"
                            data-query-params="queryParams"
                            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="sektor">Sektor</th>
                                <th data-field="tahun">Tahun</th>
                                <th data-field="nama">Nama</th>
                                <th data-field="file">File</th>
                                <th data-field="created_at">Tanggal Upload</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript">
function clear(elementId) {
    $('#' + elementId).empty();
    $('#' + elementId).select2();
}

$('select').on("select2:selecting", function(e) {
    var selectorOrigin = this.id;
    var id = e.params.args.data.id;
    
    
    if(selectorOrigin=='sektor'){
        $('#loading-spinner').show();
        clear('subsektor');
        selector = 'subsektor';
        url_to = 'subsektor';
        getSelect(id, selector, url_to);
    }
});

function getSelect(id, selectTo, urlTo, selected = "") {
    id = id;
    var base_url = "{{url('/')}}";
    //alert(id);
    destino = "#" + selectTo;
    valor = $('#' + id).find(":selected").val();

    $.ajax({
        method: "POST",
        url: base_url + "/get/" + urlTo,
        data: {
        _token: '{{csrf_token()}}',
        id: id
        }
    })
    .done(function(msg) {
        obj = msg.data;

        if (obj.length > 0) {
        //Clear the current options
        $(destino).empty();
        
        if(selectTo=='subsektor'){
            $(destino).append('<option value="">-PILIH SUBSEKTOR-</option>');


            
            $.each(obj, function(index) {
                value = obj[index].id;
                text = obj[index].name;
                $(destino).append('<option value=' + value + '>' + text + '</option>');
            });
            console.log(selected)
            if (selected) {
                $(destino).val(selected).trigger('change');
                selected = "";
            }
        }

        
        } else {

        if(selectTo=='subsektor'){
            $(destino).empty().append('<option value="">-PILIH SUBSEKTOR-</option>');
        }
        }
        $('#loading-spinner').hide();
    });
    return false;
}

function queryParams(params) {
    $('#toolbar').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)
    })
}

$("#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