@extends('core::layouts.master')
@section('title')
    {{ trans_choice('payroll::general.department',2) }}
@endsection
@section('styles')
@stop
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ trans_choice('payroll::general.department',2) }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a
                                    href="{{url('dashboard')}}">{{ trans_choice('dashboard::general.dashboard',1) }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ trans_choice('payroll::general.department',2) }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="card">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            {!! Form::open(array('route' => 'department.store','method'=>'POST','class'=>'form-horizontal','enctype'=>'multipart/form-data')) !!}
                            <div class="card-header">@lang('message.department')</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-12 col-lg-6">
                                        <div class="form-group row">
                                            <div class="col-sm-12 control-label"><label for="nf-email">@lang('message.department_en')</label> <span class="text-danger">*</span></div>
                                            <div class="col-sm-12 @if($errors->has('name_en')) has-error @endif">
                                                {!! Form::text('name_en', null, array('placeholder' => 'Ex:Inoformation technology','class' => 'form-control')) !!}
                                                @if($errors->first('name_en'))
                                                    <span class="text-danger">{{$errors->first('name_en')}}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-lg-6">
                                        <div class="form-group row">
                                            <div class="col-sm-12 control-label"><label for="nf-email">@lang('message.department_kh')</label> <span class="text-danger">*</span></div>
                                            <div class="col-sm-12 @if($errors->has('name_kh')) has-error @endif">
                                                {!! Form::text('name_kh', null, array('placeholder' => 'Ex: នាយកដ្ឋាន ព័ត៌មានវិទ្យា','class' => 'form-control')) !!}
                                                @if($errors->first('name_kh'))
                                                    <span class="text-danger">{{$errors->first('name_kh')}}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <button class="btn btn-md btn-primary btn-square" type="submit"> @lang('message.save')</button>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <style>
        .select2-container .select2-selection--single{
            height: 34px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 34px !important;
        }
        
        .select2-container--default .select2-search--dropdown .select2-search__field{
            border: 1px solid #dadada !important;
            outline: blanchedalmond;
        }
    </style>
@endsection
@section('scripts')
    <script>
        
        $('.select2').select2();
        $('.province').change(function () {
            var province = $(this).val().replace(/[^0-9]/gi, '');
            $.ajax({
                type: 'GET',
                url: "{{ route('pt.getDistrict') }}",
                data: {'province': province},
                beforeSend: function(){
                    $("#loading").fadeIn();
                },
                success: function (data) {
                    // console.log(data);
                    $('.district').empty();
                    $('.commune').empty();
                    $('.village').empty();
                   // $('.district').append('<option value="0" selected>__please select District__</option>');
                    var selOpts = '';
                     $.each(data, function(k, v) {
                        selOpts += "<option value='"+v.district_id+"'>"+v.name+"</option>";
                    });
                    $('.district').html(selOpts);
                    $('.district').val(null).trigger('change');
                    $('.commune').val(null).trigger('change');
                    $('.village').val(null).trigger('change');

                },
                complete: function(){
                    $("#loading").fadeOut(100);
                },
                error: function (report){
                    console.log(report);
                }
            });
        });

        $('.district').change(function () {
            var district = $(this).val().replace(/[^0-9]/gi, '');
            $.ajax({
                type: 'GET',
                url: "{{ route('pt.getCommune') }}",
                data: {'district': district},
                beforeSend: function(){
                    $("#loading").fadeIn();
                },
                success: function (data) {
                    // console.log(data);
                    $('.commune').empty();
                    $('.village').empty();
                    var selOpts = '';
                     $.each(data, function(k, v) {
                        selOpts += "<option value='"+v.commune_id+"'>"+v.name+"</option>";
                    });
                    $('.commune').html(selOpts);
                    $('.commune').val(null).trigger('change');
                    $('.village').val(null).trigger('change');
                },
                complete: function(){
                    $("#loading").fadeOut(100);
                },
                error: function (report){
                    console.log(report);
                }
            });
        });


        $('.commune').change(function () {
            var commune = $(this).val().replace(/[^0-9]/gi, '');
            $.ajax({
                type: 'GET',
                url: "{{ route('pt.getVillage') }}",
                data: {'commune': commune},
                beforeSend: function(){
                    $("#loading").fadeIn();
                },
                success: function (data) {
                    // console.log(data);
                    var selOpts = '';
                     $.each(data, function(k, v) {
                        selOpts += "<option value='"+v.village_id+"'>"+v.name+"</option>";
                    });
                    $('.village').html(selOpts);
                    $('.village').val(null).trigger('change');
                },
                complete: function(){
                    $("#loading").fadeOut(100);
                },
                error: function (report){
                    console.log(report);
                }
            });
        });

    </script>
@endsection