@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('master/master.holiday_master')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/holidayListMaster">{{trans('master/master.holiday_list_master')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/holidayMaster?holiday_list_id=">{{trans('master/master.holiday_master')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($holidayList) && ($holidayList->id))
                        {{trans('master/master.edit_holiday_master')}}
                    @else
                        {{trans('master/master.add_new_holiday_master')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
{!! Form::model($holidayList, ['method' => isset($holidayList) && $holidayList->id ? 'put' : 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.holiday_master_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_holiday_master_details')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#custom-holiday-vertical" role="tab" id="custom-holiday-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.custom_holiday')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_custom_holiday')}}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.holiday_master_details')}}</h5>
                        <small class="text-muted">{{trans('master/master.enter_holiday_master_details')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('holiday_list_id') ? 'has-error' : '' }}}">
                                <label class="form-label" for="holiday_list_id">{{trans('master/master.holiday_list')}} <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-select select2" name="holiday_list_id" id="holiday_list_id">
                                    @foreach($holidayListMaster as $val)
                                        <option value="{{$val->id}}" @if(isset($_GET['holiday_list_id']) && ($_GET['holiday_list_id'] == $val->id) || (old('holiday_list_id') == $val->id)) selected @endif>{{$val->name}}</option>
                                    @endforeach
                                </select>
                                {!! $errors->first('holiday_list_id', '<label class="error" for="holiday_list_id">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    @foreach($holidaysArray as $key => $holidayData)
                        <div class="row">
                            <div class="col-md-3">
                                <div class="demo-inline-spacing">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="{{ $holidayData }}{{ $key }}" name="office_holiday_days[]" value="{{ $key }}" type="checkbox" onchange="dayselection()" />
                                        <label class="form-check-label" for="{{ $holidayData }}{{ $key }}">{{ $holidayData }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-1">
                                    <label class="form-label">Occasion</label>
                                    <input type="text" class="form-control" name="office_holiday_days_occassion[]" value="" placeholder="{{trans('master/master.occassion')}}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-1">
                                    <label class="form-label" for="weekoff{{ $key }}">{{trans('master/master.is_week_off')}} Type <span class="mendatory-field text-danger">*</span></label>
                                    <select class="form-select" name="office_holiday_days_weekoff[]" id="weekoff{{ $key }}">
                                        @foreach($holidayTypes as $key => $val)
                                            <option value="{{$key}}" @if($key == 1) selected @endif>{{$val}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    @foreach ($extraHolidays as $key => $extraHoliday)
                        <div class="row">
                            <div class="col-md-3">
                                <div class="demo-inline-spacing">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="extra-holiday-{{$key}}" name="{{$extraHoliday['name']}}[{{$extraHoliday['name_key']}}]" value="{{$extraHoliday['value']}}" type="checkbox" onchange="dayselection()" />
                                        <label class="form-check-label" for="extra-holiday-{{$key}}">{{$extraHoliday['label']}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-1">
                                    <label class="form-label">Occasion</label>
                                    <input type="text" class="form-control" name="{{$extraHoliday['name']}}_occ[{{$extraHoliday['name_key']}}]" value="" placeholder="{{trans('master/master.occassion')}}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-1">
                                    <label class="form-label" for="extra-holiday-type-{{$key}}">{{trans('master/master.is_week_off')}} Type <span class="mendatory-field text-danger">*</span></label>
                                    <select class="form-select" name="{{$extraHoliday['name']}}_weekoff[{{$extraHoliday['name_key']}}]" id="extra-holiday-type-{{$key}}">
                                        @foreach($holidayTypes as $key => $val)
                                            <option value="{{$key}}" @if($key == 1) selected @endif>{{$val}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <br>
                    <br>
                    <br>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                                <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                    </div>
                </div>


                <div id="custom-holiday-vertical" class="content position-relative" role="tabpanel" aria-labelledby="custom-holiday-vertical-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.custom_holiday')}}</h5>
                        <small class="text-muted">{{trans('master/master.add_custom_holiday')}}</small>
                    </div>
                    <div class="row dateselection">
                        <div class="col-md-3">
                            <div class="mb-1">
                                <label class="form-label" for="date">{{trans('master/master.date')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::date('date[]', isset($holidayList) && $holidayList->date ? $holidayList->date : '',
                                    ['class' => 'form-control', 'id' => 'date','onchange'=>"dateselection()"]) !!} 
                                {{-- {!! $errors->first('date', '<label class="error" for="date">:message</label>')!!} --}}
                                @if ($errors->has('date.0'))
                                    <label class="error" for="date">
                                        {{ $errors->first('date.0') }}
                                    </label>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-1">
                                <label class="form-label" for="occassion">{{trans('master/master.occassion')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('occassion[]', (isset($holidayList) && $holidayList->occassion ? $holidayList->occassion : ''),
                                    ['class' => 'form-control', 'id' => 'occassion','onchange'=>"dateselection()", 'placeholder'=>'Occasion']) !!} 
                                {!! $errors->first('occassion', '<label class="error" for="occassion">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-1">
                                <label class="form-label" for="custom_is_week_off_0">{{trans('master/master.is_week_off')}} Type <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-select" name="is_week_off[]" id="custom_is_week_off_0">
                                    @foreach($holidayTypes as $key => $val)
                                        <option value="{{$key}}" @if($key == 0) selected @endif>{{$val}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    <div>
                        <div id="insertBefore"></div>
                        
                        <div class="clearfix">
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button" id="plusButton" class="btn btn-md btn-primary mt-2" style="">
                                Add More <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    <br><br><br>
                    
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                                <button type="button" class="btn btn-outline-secondary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                                </button>
                                <button type="submit" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('common/common.submit')}}</button>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

<script>
    var $insertBefore = $('#insertBefore');
    var $i = 0;

    function dayselection() {
        //$('.dateselection').addClass('hide')
        //$('input[type="checkbox"]').each(function() {

        // if(this.checked==true){
        //     $('.dateselection').addClass('hide')
        // }else{
        //     $('.dateselection').removeClass('hide')
        // }
        //})

    }

    function dateselection() {
        // $('.dayselection').addClass('hide');

        // $('input[type="checkbox"]').each(function() {
        //     this.checked = false;
        // })
    }

    $('input[type=radio][name=holiday_type]').change(function() {

        $('.form-input-type').hide();
        $('#' + (this.value)).show();
    });

    $("#addMoreBox1 .select2").select2();

    // Add More Inputs
    $('#plusButton').click(function() {

        $i = $i + 1;
        var indexs = $i + 1;
        var data = '<div class="row dateselection" id ="addMoreBox' + indexs +'"><div class="col-md-3"><div class="mb-1"><label class="form-label" for="date">{{trans("master/master.date")}} <span class="mendatory-field text-danger">*</span></label><input class="form-control ' + $i + '" id="dateField' + indexs + '" name="date[' + $i + ']" data-date-format="dd/mm/yyyy" type="date" value="" /></div></div>';
        data += '<div class="col-md-3"><div class="mb-1"><label class="form-label" for="occassion">{{trans("master/master.occassion")}} <span class="mendatory-field text-danger">*</span></label><input class="form-control " name="occassion[' + $i + ']" type="text" value="" placeholder="Occasion"/></div></div>';
        data += '<div class="col-md-3"><div class="mb-1"><label class="form-label" for="custom_is_week_off_' + $i + '">{{trans('master/master.is_week_off')}} Type <span class="mendatory-field text-danger">*</span></label><select class="form-select" name="is_week_off[]" id="custom_is_week_off_' + $i + '">@foreach($holidayTypes as $key => $val)<option value="{{$key}}"  @if($key == 0) selected @endif>{{$val}}</option>@endforeach</select></div></div>';
        data += '<div class="col-md-2"><button type="button" onclick="removeBox(' + indexs + ')" class="btn btn-danger mt-2">'+feather.icons['trash'].toSvg({ class: 'font-4' })+'</button></div></div>';

        $(data).insertBefore($insertBefore);

        // Recently Added date picker assign
        // jQuery('#dateField' + indexs).datepicker({
        //     autoclose: true,
        //     todayHighlight: true,
        //     weekStart: '1',
        //     format: 'dd-mm-yyyy',
        // });
    });
    // Remove fields
    function removeBox(index) {
        console.log(index);
        $('#addMoreBox' + index).remove();
    }

    $(document).ready(function() {
        var hid = '';
        $("#holiday_list_id").val(hid);
    })
</script>

@endpush