@extends('adminlte::page')
@section('title', 'Transportation')

@section('content')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            color: red;
        }
    </style>
    <div class="top-header">
        <ol class="breadcrumb">
            <li><a href="#" >{{ __('auth.dashboard') }} / </a></li>
            <li><a href="{{ route('transportation.index') }}"> {{ __('auth.transportation') }} / </a></li>
            <li><a href="#"> {{ __('auth.create') }}</a></li>
        </ol>
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{__('auth.transportation')}}</h3>
                        </div>
                        {!! Form::open(array('route'=>'transportation.store','method'=>'POST','enctype'=>'multiple/form-data')) !!}
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.group')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        {!! Form::select('group_id',$group,null,['class' => 'form-control select2','placeholder' => __('auth.please_select'), 'required']) !!}  
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-success btn-flat create_group"><i class="fa fa-plus text-white"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.date')}}</label>
                                <div class="col-sm-10">
                                    {!! Form::text('date', date('d-m-Y'), array('id'=>'date','class' => 'form-control date_picker','required')) !!}
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.tracking_no')}}</label>
                                <div class="col-sm-10">
                                    <select name="item_code[]" class="item_code[] select2 select2-hidden-accessible tags" multiple="" data-placeholder="Select a transportation" style="width: 100%;" data-select2-id="7" tabindex="-1" aria-hidden="true"></select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.remark')}}</label>
                                <div class="col-sm-10">
                                    <textarea id="remark" name="remark" class="form-control" rows="3"></textarea>
                                </div>
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-danger float-left" onClick="javascript:history.go(-1)"><i class="fa fa-arrow-circle-left"></i> {{ __('auth.back')}}</button>
                                <button type="submit" class="btn btn-info float-right"><i class="fa fa-save"></i> {{ __('auth.save')}}</button>
                            </div>
                        </div>
                        {!! Form::close() !!}
                        
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script type="text/javascript">
        $(".tags").select2({
            tags: true,
            tokenSeparators: [" ", " ",","],
        });
        $(document).on('click','.create_group',function(){
            $.confirm({
                title   : "{{__('auth.create')}}",
                content : `
                            <label class="required" style="float: left">{{__('auth.group_name')}}</label>
                            <input type="text" name="group_name" class="form-control border-red" required placeholder="{{__('auth.group_name')}}" maxlength="50" autocomplete="off">
                        `,
                columnClass    : 'medium',
                type           : 'blue',
                typeAnimated   : true,
                closeAnimation : 'zoom',
                buttons: {
                    cancel: {
                        text     : "{{__('auth.cancel')}}",
                        btnClass : 'btn-red close_form',
                        keys     : ['esc'],
                        action   : function () {
                        }
                    },
                    submit: {
                        text     : 'Save',
                        btnClass : 'btn-blue',
                        action: function () {

                            let data       = this;
                            let group_name = data.$content.find('input[name=group_name]').val();

                            data.buttons.submit.disable();

                            $.ajax({
                                url      : "{{ route('groups.store') }}",
                                dataType : 'json',
                                method   : 'POST',
                                data: {
                                    "_token"   : "{{ csrf_token() }}",
                                    group_name : group_name,
                                },
                            }).done(function (response) {
                                $('select[name=group_id]').append('<option value="' + response.id + '" selected>' + response.group_name + '</option>');
                                notifier(response.status, response.msg);
                            });
                        }
                    }
                }
            });
        });
    </script>
@endsection