@extends('layouts.seller')

@section('content')
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>
                {!! __('schedule.schedule_add') !!}
                <div><small>{!! $title !!}</small></div>
            </p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{!! route('schedule.index') !!}">{!! __('schedule.schedule') !!}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{!! __('schedule.schedule_add') !!}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    {!! Form::open(array('route' => 'schedule.store', 'method' => 'POST' ,'id' => 'ajaxSave','files' => true)) !!}
    <div class="row">
        <div class="col-12">
            <div class="error-msg font-14 mt-2"></div>

            <div class="round-white-bg box-shadow">
                <div class="row">
                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('shift_date', __('schedule.shift_date'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::text('shift_date', dateFormat($schDt, SHOW_DATE), ['class' => 'form-control datepicker-input']) !!}
                    </div>

                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('shift_from', __('schedule.shift_from'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::text('shift_from', null, ['class' => 'form-control t-picker']) !!}
                    </div>

                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('shift_to', __('schedule.shift_to'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::text('shift_to', null, ['class' => 'form-control t-picker']) !!}
                    </div>

                    <div class="custom-input-group colored-field-group col-md-3 d-none">
                        {!! Form::label('shift_type', __('schedule.shift_type'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('shift_type', $shiftType, null, ['class' => 'form-control select2']) !!}
                    </div>
                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('break', __('schedule.break'), ['class' => 'control-label mb-2']) !!}
                        <div class="d-flex">
                        {!! Form::select('break', $pauser, null, ['class' => 'form-control select2']) !!}
                        <a href="{{route('seller.pauser.create')}}" class="btn btn-success p-2 ml-2 font-16" title="Add break" style="border-radius:5px;">+</a>
                        </div>
                        {!! Form::hidden('from_create', 1) !!}
                    </div>
                </div>

                <div class="row">
                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('employee', __('schedule.employee'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('employee', $employee, $eId, ['class' => 'form-control select2 __employee']) !!}
                    </div>

                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('employee_group', __('schedule.employee_group'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('employee_group', [], null, ['class' => 'form-control select2']) !!}
                    </div>



                    <div class="custom-input-group colored-field-group col-md-3 d-none">
                        {!! Form::label('payroll', __('schedule.payroll_approved'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('payroll', yesNo(false), 0, ['class' => 'form-control select2']) !!}
                    </div>
                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('vakttype', __('schedule.vakttype'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('vakttype', vaktType(), 1, ['class' => 'form-control select2']) !!}
                    </div>
                    <div class="custom-input-group colored-field-group col-md-3 mt-4">
                        <label class="custom-control custom-small-control custom-white-control">
                            {!! Form::checkbox('send_notification', 1) !!}
                            <span class="custom-control-box"><i class="fas fa-check"></i></span> &nbsp;
                            {!! __('schedule.send_notification') !!}
                        </label>
                    </div>

                </div>

                <div class="row d-none">
                    <div class="custom-input-group colored-field-group col-md-3">
                        {!! Form::label('vakttype', __('schedule.vakttype'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('vakttype', vaktType(), 1, ['class' => 'form-control select2']) !!}
                    </div>

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

                <div class="row">
                    <div class="col-12">
                        <div class="round-white-bg box-shadow">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="comment-tab" data-toggle="tab" href="#comment" role="tab" aria-controls="comment" aria-selected="true">{!! __('schedule.comment') !!}</a>
                                </li>

                                {{-- <li class="nav-item">
                                    <a class="nav-link" id="wage-tab" data-toggle="tab" href="#wage" role="tab" aria-controls="wage" aria-selected="false">{!! __('schedule.wage') !!}</a>
                                </li> --}}
                            </ul>

                            <div class="tab-content mt-2" id="myTabContent">
                                <div class="tab-pane fade show active" id="comment" role="tabpanel" aria-labelledby="comment-tab">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="custom-input-group colored-field-group">
                                                {!! Form::label('comment', __('schedule.comment'), ['class' => 'control-label']) !!}
                                                {!! Form::textarea('comment', null, ['class' => 'form-control', 'size' => '5x3']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                               {{--  <div class="tab-pane fade" id="wage" role="tabpanel" aria-labelledby="wage-tab">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="custom-input-group colored-field-group">
                                                {!! Form::label('wage_rate', __('schedule.wage_rate'), ['class' => 'control-label']) !!}
                                                {!! Form::text('wage_rate', null, ['class' => 'form-control']) !!}
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="custom-input-group colored-field-group">
                                                {!! Form::label('wage_type', __('schedule.wage_type'), ['class' => 'control-label']) !!}
                                                {!! Form::select('wage_type', wageType(), null, ['class' => 'form-control select2']) !!}
                                            </div>
                                        </div>

                                        <div class="col-md-6" id="default_wage_div" style="display: none;">
                                            <div class="custom-input-group colored-field-group">
                                                {!! Form::label('default_wage', __('schedule.default_wage'), ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group mt-3 text-left col-12">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <input type="submit" class="btn btn-primary width80" value="{!! __('seller.save') !!}">
                            </li>
                            {{-- <li class="list-inline-item">
                                <input type="reset" class="btn btn-default width80 width80" value="{!! __('seller.cancel') !!}">
                            </li> --}}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
</div>
@endsection

@section('script')
    <script>

        $(document).ready(function (){
            let empId = $('#employee').val();
            getSelectedEmployeeGroups(empId);
        });

        $('body').on('change', '#employee', function(e) {
            let empId = $(this).val();
            getSelectedEmployeeGroups(empId);
        });

        function getSelectedEmployeeGroups(empId){
            $('#employee_group').html('<option value="">Select Option</option>').selectpicker('refresh');
            $('#default_wage_div').html('').hide();
            // let employee_id = $(this).val();
            let route = "{!! route('seller.employee-group.service') !!}";

            ajaxFire(route, { employee_id: empId }, function(response) {
                response =  (response.status == 1 ) ? response :  JSON.parse(response);
                if(response.status == 1) {
                    $('#employee_group').html(response.options).selectpicker('refresh');
                }
            });
        }

        $('body').on('change', '#employee_groupS', function(e) {
            let employee_id = $("#employee").val();
            let employee_group_id = $(this).val();
            let group_name = $(this).find('option:selected').text();

            $('.subbtn').attr('disabled','disabled');
            $('#default_wage_div').hide();

            if (employee_group_id > 0) {
                $('.subbtn').removeAttr('disabled');
                let route = "{!! route('seller.employee-group.get-rate') !!}";

                ajaxFire(route, { employee_id: employee_id, employee_group_id: employee_group_id }, function(response) {
                    if(response.status == 1) {
                        let rate = response.rate;
                        if(rate > 0) {
                            $('#default_wage_div').html(`Default wage ${group_name} <br> ${rate} kr per hour`).show();
                        }
                    }
                });
            }
        });
    </script>
@endsection