@extends('admin.layouts.app')

@section('content')
    <div class="card shadow">
        <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 }} Tambah</h2>
                </div>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route($route.'create_action') }}" class="form-global-handle" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label for="title"> Title <span class="text-danger">*</span> </label>
                    <input type="text" name="title" value="{{ old('title') }}" class="form-control" required id="title" >
                </div>
                <div class="form-group">
                    <label for="content"> Content <span class="text-danger">*</span> </label>
                    <textarea class="form-control" name="content" id="summernote"></textarea>
                </div>
                <div class="form-group">
                    <label for="category"> Category <span class="text-danger">*</span> </label>
                    <select name="category" id="category" class="form-control" required>
                        <option value="">-- Pilih Category --</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="keterangan_kirim">Kirim ke <span class="text-danger">*</span> </label>
                    <select name="keterangan_kirim" id="keterangan_kirim" class="form-control pilih_penerima" required>
                        <option value="semua">Semua User</option>
                        <option value="pilih_user">Pilih User</option>
                    </select>
                </div>
                <div class="form-group hide select-user-form-input">
                    <label for="pilih_user"> Pilih User <span class="text-danger">*</span> </label>
                    <select  name="pilih_user[]" multiple data-metode_id="" data-route="{{route($route.'select_user') }}" class="select-user 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>
@endsection

 {{-- load JS yang lu perluin, selain itu no --}}
@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') }}/vendor/datetimepicker/moment.min.js"></script>
    <script src="{{ asset('assets') }}/vendor/datetimepicker/tempusdominus-bootstrap-4.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script src="{{ asset('assets') }}/js/select2.min.js"></script>

    <script>
        $('#summernote').summernote({
            height: 200
        });
        $('.pilih_penerima').on('change', function() {
        var value = $(this).val()
            if(value == 'pilih_user'){
                $('.select-user-form-input').removeClass('hide')
            }else{
                $('.select-user-form-input').addClass('hide')
            }
        });

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