@extends('layouts.master')
@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">
                        <i class="mdi mdi-account"></i> {{$title}}
                    </div>
                    <form action="{{route($route.'.store')}}" method="POST" class="" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="secure_id" value="{{@$keyId}}">
                            </div>

                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Sektor</label>
                                    <div class="col-12 ">
                                        <select name="sektor" class="select2" id="sektor" required>
                                            <option value=""> PILIH SEKTOR </option>
                                            @foreach ($sektor as $datasektor )
                                                <option {{ @$item->ms_sektor_id == $datasektor->MsSektorId ? 'selected' : '' }} value="{{encode_id($datasektor->MsSektorId)}}">{{$datasektor->nama}}</option>
                                            @endforeach
                                        </select>
                                        @error('sektor')
                                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Sektor</label>
                                    <div class="col-12 ">
                                        <select name="subsektor" class=" select2" id="subsektor">
                                            <option value=""> PILIH SUB SEKTOR </option>
                                        </select>
                                        @error('subsektor')
                                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Tahun</label>
                                    <div class="col-12 ">
                                        <select name="tahun" class=" select2" id="">
                                            <option value=""> PILIH TAHUN </option>
                                            @for ($i = date('Y')-5; date('Y') > $i; $i++)
                                                <option {{ @$item->tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>
                                            @endfor
                                            <option {{ @$item->tahun == date('Y') ? 'selected' : '' }} value="{{date('Y')}}">{{date('Y')}}</option>
                                        </select>
                                        @error('tahun')
                                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Nama</label>
                                    <div class="col-12 ">
                                        <input type="text" value="{{@$item->nama ? @$item->nama :  old('nama')}}" name="nama"  class="form-control @error('nama') is-invalid @enderror" placeholder="Masukan Nama" required>
                                        @error('nama')
                                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label">Deskripsi</label>
                                    <div class="col-12 ">
                                        <textarea name="deskripsi" class="form-control @error('deskripsi') is-invalid @enderror" placeholder="Masukan Deskripsi" id="" cols="30" rows="10">{{@$item->deskripsi ? @$item->deskripsi :  old('deskripsi')}}</textarea>
                                        @error('deskripsi')
                                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label class="col-xl-12 form-label d-flex justify-content-between align-items-center">
                                        <span>File Dokumen</span>
                                        @if(@$item->file)
                                            <a download href="{{ asset($item->file) }}"  class="btn btn-sm btn-success">Download File <i class="mdi mdi-download text-white"></i></a>
                                        @endif

                                    </label>
                                    <div class="col-12 ">
                                        <input type="file" accept=".pdf,.xls,.xlsx,.docx,.png,.jpg,.jpeg" value="{{@$item->file ? @$item->file :  old('file')}}" name="file"  class="form-control @error('file') is-invalid @enderror" required>
                                        <small class="text-danger"><i>Max File : 2MB</i></small>
                                        @error('file')
                                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <a href="{{route($route.'.index')}}" class="btn btn-danger"><i class="mdi mdi-cancel"></i> Batal</a>
                                <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">
    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)
        })
    }
</script>
@endsection