@extends('layouts.app')

@section('content')
    <script type="text/javascript">
        $(document).ready(function(){
            $(".date-picker").datepicker({
                format: '{{config('app.date_format_js')}}'
            });
        });
    </script>

    <form id="form" method="post" action="{{route('workDays.store')}}" class="form-horizontal">
        {{ csrf_field() }}
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">{{__('Add new')}}</h2>
            </header>
            <div class="panel-body">
                <div class="form-group">
                    <div class="col-lg-6 @if($errors->has('worker_ids')){{'has-error'}} @endif">
                        <label for="worker_ids">{{__('Employees')}}: <span class="required">*</span></label>
                        <select multiple name="worker_ids[]" id="worker_ids" class="form-control populate" data-plugin-selectTwo>
                            @foreach($users as $user)
                                <option value="{{$user->id}}" @if(in_array($user->id, old('worker_ids', array()))) selected @endif>{{$user->ime.' '.$user->prezime}}</option>
                            @endforeach
                        </select>
                        @if($errors->has('worker_ids'))
                            <label for="worker_ids" class="error">{{$errors->first('worker_ids')}}</label>
                        @endif
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-6 @if($errors->has('start') || $errors->has('end')){{'has-error'}} @endif">
                        <label>{{__('Period')}}</label>
                        <div class="input-daterange input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            <input type="text" class="form-control date-picker" name="start" value="{{old('start')}}">
                            <span class="input-group-addon">{{__("to")}}</span>
                            <input type="text" class="form-control date-picker" name="end" value="{{old('end')}}">
                        </div>
                        @if($errors->has('start'))
                            <label for="start" class="error">{{$errors->first('start')}}</label>
                        @endif
                        @if($errors->has('end'))
                            <label for="end" class="error">{{$errors->first('end')}}</label>
                        @endif
                    </div>
                    <div class="col-lg-6 @if($errors->has('dates')){{'has-error'}} @endif">
                        <label for="dates">{{__('Dates')}}</label>
                        <textarea name="dates" id="dates" class="form-control" rows="4" placeholder="01.07.2026. 02.07.2026. 03.07.2026.">{{old('dates')}}</textarea>
                        <span class="help-block">{{__('Use a period, pasted dates, or both. Separate dates with spaces, commas, semicolons or new lines.')}}</span>
                        @if($errors->has('dates'))
                            <label for="dates" class="error">{{$errors->first('dates')}}</label>
                        @endif
                    </div>
                </div>
            </div>
            <footer class="panel-footer">
                <div class="row">
                    <div class="col-sm-12 btn-confirmation">
                        <button class="btn btn-primary" type="submit">{{__('Add')}} <i class="fa fa-plus"></i></button>
                        <a id="icon-without-border-success" href="{{route('workDays.index')}}" class="btn btn-default">{{__('Cancel')}}</a>
                    </div>
                </div>
            </footer>
        </section>
    </form>
@endsection