@extends('admin.layouts.app')

@section('content')
   {{-- start patern --}}
    <div class="card shadow mt-2">
        <div class="card-header bg-transparent">
            <div class="row align-items-center">
                <div class="col">
                    <h6 class="text-uppercase text-muted ls-1 mb-1">{{ $sub_header }}</h6>
                    <h2 class="mb-0">{{ $header }}</h2>
                </div>
                <div class="col text-right">

                </div>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route($route.'add_kelompok_driver') }}" class="form-global-handle" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="organisasi_id" value="{{ $data->id }}">
                <div class="form-group">
                    <label for="start_date"> Pilih Kelompok Driver <span class="text-danger">*</span> </label>
                    <select  name="kelompok_driver_id" required data-metode_id="" data-route="{{route($route.'select_kelompok_driver') }}" class="select-kelompok-driver w-100">
                    </select>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success">Simpan</button>
                    <a class="btn btn-default bg-back" href="{{ route($route.'index') }}">Kembali</a>
                </div>
            </form>
        </div>
        <div class="card-body table-responsive">
            <table class="table align-items-center border"  id="data-table">
                <thead class="thead-light">
                    <tr>
                        <th width="5%" scope="col">No</th>
                        <th scope="col">nama</th>
                        <th scope="col">Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {{-- end pattern- --}}

@endsection

@push('js')
    <script src="{{ asset('assets') }}/js/blockUI.js"></script>
    <script src="{{ asset('assets') }}/js/sweetalert2.js"></script>
    <script src="{{ asset('assets') }}/js/custom.js"></script>
    <script src="{{ asset('assets') }}/js/custom_datatable.js"></script>
    <script src="{{ asset('assets') }}/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            var id_datatable = "#data-table";
            var url_ajax = '{!! $route_get_data !!}';
            var column = [
                        { data: 'DT_RowIndex', searchable: false, orderable: false, className: 'dt-center' },
                        { data: 'nama', name: 'nama' },
                        { data: 'aksi', name: 'aksi' },
                    ];
        global.init_datatable(id_datatable, url_ajax, column);
        });

        var nama_route = 'route'
        var id = '.select-kelompok-driver';
        var event_organisasi_id = '{{ $data->id }}';
        var route = $(id).data(nama_route);
        $('.select-kelompok-driver').select2({
            placeholder: "Pilih Kelompok Driver",
            ajax: {
                    url: route,
                    dataType: 'json',
                    data: function (params) {
                                return {
                                nama: $.trim(params.term),
                                e_o_id: event_organisasi_id,
                                not_in : $(this).val(),
                                };
                            },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                }
        });
    </script>
@endpush
