@extends('layouts.seller')

@section('css')
    <style>
        div.child-route{
            display: none;
            padding-left: 20px;
            align-items: center;
            flex-wrap : wrap;
        }
        td.label {
            padding: 11px !important;
            width: 50%;
            border-right: 1px solid #f7f7f7;
        }
    </style>
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
    <script src="https://unpkg.com/cropperjs"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/crop-image.css') }}" />
@endsection

@section('content')
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{!! __('employee.add') !!}</p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{!! route('employee.index') !!}">{!! __('employee.title') !!}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{!! __('employee.add') !!}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    <div class="error-msg font-14"></div>
    {!! Form::open(array('route' => $routes, 'method' => 'POST' ,'id' => 'ajaxSave','files' => true)) !!}
    <div class="row">
        <div class="col-12">
            <div class="round-white-bg box-shadow">
                <div>
                    <ul class="list-unstyled space-list">
                        <li><p class="font-medium m-0">&nbsp;</p></li>
                        <li>
                            <ul class="list-inline m-0 d-flex align-items-center">
                                <li class="list-inline-item">
                                    {{Form::label('active', __('employee.active'), ['class' => 'control-label mb-2'])}}
                                </li>
                                <li class="list-inline-item">
                                    <label class="yummy-switch-label">
                                        {{ Form::checkbox('status', 1, true) }}
                                        <span class="yummy-switch-box"></span>
                                    </label>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <!--  main fields -->
                <div class="main-fields">
                    <div class="row">
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('first_name', __('employee.first_name'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('first_name','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('last_name', __('employee.last_name'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('last_name','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        {!! Form::label('mobile', __('employee.mobile'), ['class' => 'control-label mb-2']) !!}
                        <div class="row">
                            <div class="col-md-5">
                                {!! Form::select('mobile_code',$dialCode,null, ['class' => 'form-control select2']) !!}
                            </div>
                            <div class="col-md-7">
                                {!! Form::text('mobile_number','', ['class' => 'form-control']) !!}
                            </div>
                        </div>
                    </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        {!! Form::label('gender', __('employee.gender'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('gender',empGender(),null, ['class' => 'form-control']) !!}
                    </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        {!! Form::label('payroll_setting', __('employee.payroll_setting'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('payroll_setting', $payrollSetting, null, ['class' => 'form-control select2']) !!}
                    </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        {!! Form::label('employee_group', __('employee.employee_group'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('employee_group',$employeeGroup,null, ['class' => 'form-control select2','id'=>'employee_group']) !!}
                    </div>
                      <!-- Employee group wage -->
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3 group-wage" style="display: none">
                            {!! Form::label('wage', __('employee.wage'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('wage','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3 group-wage" style="display: none">
                            {!! Form::label('salary_code', __('employee.salary_code'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('salary_code','', ['class' => 'form-control']) !!}
                        </div>
                        <!-- /Employee group wage -->
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('pin', __('employee.pin'), ['class' => 'control-label mb-2']) !!}
                            <div class="input-group">
                                {!! Form::text('pin','', ['class' => 'form-control type_number __random_pin', 'maxlength' => '4','readonly' => true]) !!}
                                <div class="input-group-append __generate_pin" data-length="4">
                                        <span class="input-group-text" id="basic-addon1">
                                           <i class="fa fa-spinner" aria-hidden="true"></i> <span class="pl-2">Generate Pin</span>
                                        </span>
                                </div>
                            </div>
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3"  style="display: none;">
                        {!! Form::label('internal_pin', __('employee.internal_pin'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::text('internal_pin','', ['class' => 'form-control']) !!}
                    </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        {!! Form::label('email', __('employee.email'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::text('email','', ['class' => 'form-control']) !!}
                    </div>
                    </div>
                </div>

                <!-- extra fields -->
                <div class="extra-fields" style="display: none;">
                    <div class="row">
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('password', __('employee.password'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::password('password',['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('tax_id', __('employee.tax_id'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('tax_id','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('dob', __('employee.dob'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('dob', null, ['class' => 'form-control datepicker-input']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        <div class="custom-file-upload-control mt-4">
                            <div class="custom-file-upload-container font13">
                                {{ Form::file('', array('class' => 'custom-file-upload-field image-preview-uploader image overlay', 'id' => 'upload_image', 'accept' => 'image/png,image/jpg,image/jpeg'))}}
                                <input type="hidden" id="uploaded_image" name="image" />
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <a href="javascript:void(0)" class="btn btn-primary font13">  {{ __('common.choose-file')}}</a>
                                    </li>
                                    <li class="list-inline-item text-muted image-name-placeholder">
                                        {{ __('common.no-file')}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                        {!! Form::label('personal_number', __('employee.personal_number'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::text('personal_number','', ['class' => 'form-control']) !!}
                    </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('tripletex_employee_id', __('employee.tripletex_employee_id'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('tripletex_employee_id','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('tripletex_payroll_account', __('employee.tripletex_payroll_account'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('tripletex_payroll_account','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('tripletex_project_number', __('employee.tripletex_project_number'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('tripletex_project_number','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('tripletex_department_number', __('employee.tripletex_department_number'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('tripletex_department_number','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('bank_account', __('employee.bank_account'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('bank_account','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('hire_date', __('employee.hire_date'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('hire_date', null, ['class' => 'form-control datepicker-input']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3"  style="display: none;">
                            {!! Form::label('hrs_per_month', __('employee.hrs_per_month'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('hrs_per_month','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('country', __('employee.country'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::select('country',$countries,null, ['class' => 'form-control select2']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('city', __('employee.city'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('city','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('pincode', __('employee.pincode'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('pin_code','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('address', __('employee.address'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('address','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3" style="display: none;">
                            {!! Form::label('address2', __('employee.address2'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('address2','', ['class' => 'form-control']) !!}
                        </div>
                        <div class="custom-input-group colored-field-group col-xs-12 col-sm-3">
                            {!! Form::label('description', __('employee.description'), ['class' => 'control-label mb-2']) !!}
                            {!! Form::text('description','', ['class' => 'form-control']) !!}
                        </div>
                    </div>
                </div>

                <!-- show more btn -->
                <div class="btn w-100" style="text-align: end"><a class="btn btn-primary _copy_this" data-field_id="expandFields" id="expandFields">{!! __('common.show_more').'  <i class="fa fa-plus-circle"></i>' !!}</a></div>

                <hr>
                <div class="row">
                    <div class="custom-input-group colored-field-group col-md-3 mt-2">
                        <label class="custom-control custom-small-control custom-white-control">
                            {!! Form::checkbox('is_employee_rider', 1) !!}
                            <span class="custom-control-box"><i class="fas fa-check"></i></span> &nbsp;
                            {!! __('employee.create_employee_rider') !!}?
                        </label>
                    </div>

                    <div class="custom-input-group colored-field-group col-md-3 mt-2">
                        <label class="custom-control custom-small-control custom-white-control">
                            {!! Form::checkbox('access_to_sales', 1) !!}
                            <span class="custom-control-box"><i class="fas fa-check"></i></span> &nbsp;
                            Access to POS Sales?
                        </label>
                    </div>

                    {{--<div class="custom-input-group colored-field-group col-md-3 mt-2">--}}
                        {{--<label class="custom-control custom-small-control custom-white-control">--}}
                            {{--{!! Form::checkbox('allow_franchise_access', 1, false) !!}--}}
                            {{--<span class="custom-control-box"><i class="fas fa-check"></i></span> &nbsp;--}}
                            {{--{!! __('employee.allow_franchise_access') !!}?--}}
                        {{--</label>--}}
                    {{--</div>--}}

                    <div class="custom-input-group colored-field-group col-md-3 mt-2">
                        <label class="custom-control custom-small-control custom-white-control">
                            {!! Form::checkbox('is_seller_user', 1, false, ['class' => '__is_seller_user']) !!}
                            <span class="custom-control-box"><i class="fas fa-check"></i></span> &nbsp;
                            {!! __('employee.create_seller_user') !!}?
                        </label>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 __menu_box" style="display: none;">
                        @include('layouts.menu', [
                            'menus' => $menus,
                            'permission' => isset($permission) ? $permission : [],
                        ])
                    </div>
                </div>

                <div class="form-group mt-2 text-left">
                    <ul class="list-inline">
                        <li class="list-inline-item">
                            {{ Form::submit( __('common.save'), array('class' => 'btn btn-primary width80'));}}
                        </li>
                        {{-- <li class="list-inline-item">
                            {{ Form::reset( __('common.cancel'), array('class' => 'btn btn-default width80'));}}
                        </li> --}}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
</div>
@include('layouts.partials.crop-image-modal')
@endsection
@section('script')
<script src="{{ asset('assets/js/crop-image.js')}}"></script>
    <script>
        $('#employee_group22').on('change', function() {
            let gId = $(this).val();
            if (gId > 0) {
                $('.group-wage').show();
            } else {
                $('.group-wage').hide();
            }
        });

        $('body').on('change', '.__is_seller_user', function () {
            if ($(this).is(':checked')) {
                $('.__menu_box').slideDown();
            } else {
                $('.__menu_box').slideUp();
            }
        });
    </script>

    <script>
        $('#expandFields').click(() => {
            const extraFields = $('.extra-fields');
            if (!extraFields.is(':visible')) {
                $('.extra-fields').slideDown();
                $('#expandFields').html('{!! __('common.show_less').'  <i class="fa fa-minus-circle"></i>' !!}');
            }else{
                $('.extra-fields').slideUp();
                $('#expandFields').html('{!! __('common.show_more').'  <i class="fa fa-plus-circle"></i>' !!}');
            }
        });
    </script>
    @include('layouts.menu-script')
@endsection