@extends('layouts.admin')
@section('css')
@endsection
@section('content')
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{{ $data->id ?  __('category.edit-category') :  __('category.add-category') }}</p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{__('common.home') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="{{route('category.index')}}">{{ __('category.title') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page"> {{ $data->id ?  __('category.edit-category') :  __('category.add-category') }}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    {{ Form::open(array('route' => $routes, 'method' => 'POST' ,'id' => 'ajaxSave','files' => true))}}
    <div class="row">
        <div class="col-xs-12 col-sm-7">
            <div class="round-white-bg box-shadow">
                <div class="error-msg font-14"></div>
                <div>
                    <div class="custom-input-group colored-field-group custom-input-group-small">
                        {{Form::label('id', __('category.main-category-name'), array('class' => 'control-label'))}}
                        {{ Form::select('main_category', $mainCategories, $data->main_category_id, array('class' => 'form-control ','id'=>'main_category')) }}
                    </div>
                    <div class="custom-input-group colored-field-group custom-input-group-small">
                        {{Form::label('id', __('category.parent'), array('class' => 'control-label'))}}
                        {{ Form::select('category', $parentCategories, $data->parent_id, array('class' => 'form-control ','id'=>'category')) }}
                    </div>

                    @php
                        $selectedStore = isset($data->store_ids) ? explode(',', $data->store_ids) : [];
                    @endphp
                    <div class="custom-input-group colored-field-group">
                        {!! Form::label('stores', __('category.stores'), ['class' => 'control-label mb-2']) !!}
                        {!! Form::select('stores[]', $stores, $selectedStore, [
                            'class' => 'form-control select2',
                            'multiple' => 'true',
                            'data-actions-box' => 'true',
                            'data-width' => '100%',
                        ]) !!}
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="custom-input-group colored-field-group custom-input-group-small">
                                {{Form::label('name', __('category.category-name'), array('class' => 'control-label'))}}
                                {{ Form::text('name', $data->name,array('placeholder' => __('category.category-name'),'class' => 'form-control'))}}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="custom-input-group colored-field-group custom-input-group-small">
                                {{Form::label('show_variation_types', __('category.show_variation_types'), array('class' => 'control-label'))}}
                                {{--{{ Form::checkbox('show_variation_types', $data->show_variation_types )}}--}}
                                <div class="global-item-top-box mt-3">
                                    <label class="yummy-switch-label">
                                        {!! Form::checkbox('show_variation_types',1,$data->show_variation_types == 1 ? true :false) !!}
                                        <span class="yummy-switch-box"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="custom-input-group colored-field-group custom-input-group-small">
                                {{ Form::label('sort', __('category.sort'), array('class' => 'control-label')) }}
                                {{ Form::text('sort', $data->sort ?? 1, ['class' => 'form-control']) }}
                            </div>
                        </div>
                    </div>


                    <div class="custom-input-group colored-field-group row">
                        <div class="col-md-7">
                            <label class="control-label">{{ __('category.image-web')}}</label>
                            <div class="custom-file-upload-control">
                                <div class="custom-file-upload-container font13">
                                    {{ Form::file('image',array('class'=>'custom-file-upload-field image-preview-uploader','data-preview-class'=>'web-preview'))}}
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="#" 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>
                                <p class="text-danger font12 font-medium">{{__('common.file-size')}}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="common-image-preview image-preview-height">
                                <img class="web-preview" src="{{getImagePath($data->photo,"product")}}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="custom-input-group colored-field-group row">
                        <div class="col-md-7">
                            <label class="control-label">{{ __('category.image-kiosk')}}</label>
                            <div class="custom-file-upload-control">
                                <div class="custom-file-upload-container font13">
                                    {{ Form::file('kiosk_image',array('class'=>'custom-file-upload-field image-preview-uploader','data-preview-class'=>'kiosk-preview'))}}

                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="#" 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>
                                <p class="text-danger font12 font-medium">{{__('common.file-size')}}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="common-image-preview image-preview-height">
                                <img class="kiosk-preview" src="{{getImagePath($data->kiosk_image,"product")}}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="custom-input-group colored-field-group d-none">
                        <label class="control-label">{{ __('category.image-kiosk-street')}}</label>
                        <div class="custom-file-upload-control">
                            <div class="custom-file-upload-container font13">
                                {{ Form::file('kiosk_street_image',array('class'=>'custom-file-upload-field image-preview-uploader','data-preview-class'=>'kiosk-street-preview'))}}
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <a href="#" 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="d-none">
                        <p class="text-danger font12 font-medium">{{__('common.file-size')}}</p>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="custom-input-group colored-field-group custom-input-group-small">
                                {{Form::label('status', __('category.status'), array('class' => 'control-label'))}}
                                <div class="global-item-top-box mt-3">
                                    <label class="yummy-switch-label">
                                        {!! Form::checkbox('status',1,$data->status == 1 ? true :false) !!}
                                        <span class="yummy-switch-box"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="custom-input-group colored-field-group custom-input-group-small">
                                {{Form::label('show_half_pizza', __('category.show_half_pizza'), array('class' => 'control-label'))}}
                                <div class="global-item-top-box mt-3">
                                    <label class="yummy-switch-label">
                                        {!! Form::checkbox('show_half_pizza',1,$data->show_half_pizza == 1 ? true :false) !!}
                                        <span class="yummy-switch-box"></span>
                                    </label>
                                </div>
                            </div>
                        </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>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-5">
            <div class="round-white-bg box-shadow mb-3">
                <div class="add_display_mode ml-3">
                  @php
                      $dataJson = $data->data_json;
                      $displayModeData = $dataJson ? json_decode($dataJson) : '';
                      if(!$displayModeData)
                      {
                        $displayModeData = [
                            [
                                'in_rows_products' => isset($data->in_rows_products) ? $data->in_rows_products : 5,
                                'platforms' => [1,2,3],
                                'display_mode' => isset($data->display_mode) ? $data->display_mode : 0,
                                'design' => isset($data->design) ? $data->design : 0,
                                'bg_color' => isset($data->bg_color) ? $data->bg_color : '',
                                'font_color' => isset($data->font_color) ? $data->font_color : ''
                            ]
                        ];
                        $displayModeData = json_decode(json_encode($displayModeData));
                      }
                  @endphp

                  @if($displayModeData)
                    @foreach ($displayModeData as $displayModesKeys => $displayModesValues)
                        <div class="row display_mode" style="{{$displayModesKeys > 0 ? 'border-top: solid 1px #c3c3c333 !important;':'' }}">
                            <div class="col-md-10 mb-3">
                                {!! Form::label('platform', __('category.platform'), ['class' => 'mb-2']) !!}
                                {!! Form::select('platforms['.$displayModesKeys.'][]', itemFor(), $displayModesValues->platforms, ['class' => 'form-control platforms', 'data-width' => '100%', 'multiple' => 'true', 'data-search' => 'true']) !!}
                            </div>
                            <div class="custom-input-group col-md-12 mb-2 d-flex" style="font-size: medium;">
                                {!! Form::label('in_rows_products',__('category.in_rows_products'),['class' => 'mt-3']) !!}
                                <div class="custom-input-group colored-field-group mb-0 ml-4 mt-2 col-md-4">
                                    {{ Form::select('in_rows_products['.$displayModesKeys.']', noOfItemsTobeDisplay(), isset($displayModesValues->in_rows_products) ? $displayModesValues->in_rows_products : 5, array('class'=>'form-control in_rows_products')) }}
                                </div>

                                <div class="col-md-2 pt-2">
                                    <button type="button" class="btn btn-danger __remove_display_mode"><i class="fa fa-minus"></i></button>
                                </div>
                            </div>
                            <div class="custom-input-group col-md-12 d-flex mb-0 mt-3" style="font-size: medium;">
                                {!! Form::label('display_mode',__('category.display_mode'),['class' => 'mb-0']) !!}
                                <div class="custom-input-group colored-field-group d-flex mb-0">
                                    @foreach(categoryDisplayMode() as $key => $value)
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input" name="display_mode[{{$displayModesKeys}}]" id="display_mode_{{ $key }}" value="{{ $key }}" {{ $displayModesValues->display_mode == $key ? 'checked' : '' }} onChange="selectDisplayMode(this)">
                                            <label class="form-check-label" for="display_mode_{{ $key }}">
                                                {{ $value }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="category_colors col-md-12 pr-0 {{$displayModesValues->display_mode == 1 ? 'd-flex' : ''}}" style="display: none;">
                                <div class="custom-input-group col-md-4 pl-0" style="font-size: medium;">
                                    {!! Form::label('design',__('category.design'),['class' => 'control-label mb-2 pl-0']) !!}
                                    <div class="custom-input-group colored-field-group d-flex mb-0">
                                        {{ Form::select('design['.$displayModesKeys.']', itemDisplayDesignMode(), $displayModesValues->design, array('class'=> 'form-control','id'=>'design')) }}
                                    </div>
                                </div>

                                <div class="custom-input-group colored-field-group col-md-4 pl-0">
                                    {!! Form::label('bg_color',__('category.bg_color'),['class' => 'control-label mb-2 ']) !!}
                                    <div class="custom-input-group colored-field-group">
                                        {!! Form::color('bg_color['.$displayModesKeys.']', $displayModesValues->bg_color,['class' => 'form-control']) !!}
                                    </div>
                                </div>
                                <div class="custom-input-group colored-field-group col-md-4 pl-2 pr-0">
                                    {!! Form::label('font_color',__('category.font_color'),['class' => 'control-label mb-2 ']) !!}
                                    <div class="custom-input-group colored-field-group">
                                        {!! Form::color('font_color['.$displayModesKeys.']', $displayModesValues->font_color,['class' => 'form-control']) !!}
                                    </div>
                                </div>
                            </div>
                      </div>
                    @endforeach
                  @endif
                </div>
                <button type="button" class="btn btn-primary __add_display_mode ml-3 {{$displayModeData && count($displayModeData)< 3 ? '' : 'd-none'}}"><i class="fa fa-plus"></i> Add </button>

            </div>


            <div class="round-white-bg box-shadow">
                <p class="font-medium">{{__('category.konto_accounts')}}</p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('id', __('category.standard_konto'), array('class' => 'control-label'))}}
                            {{ Form::select('standard_konto_account', kontoFoodTypesAccount(), $data->standard_konto_account, array('class' => 'form-control ','id'=>'standard_konto')) }}
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="custom-input-group colored-field-group custom-input-group-small">
                            {{Form::label('id', __('category.inside_konto'), array('class' => 'control-label'))}}
                            {{ Form::select('inside_konto_account', kontoFoodTypesAccount(), $data->inside_konto_account, array('class' => 'form-control ','id'=>'inside_konto')) }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="round-white-bg box-shadow mt-3">
                <div class="row">
                    <div class="col-12 mb-3">
                        @php
                            $uid = '';
                            if(isset($data->related_items)) $uid = "?uids=" . $data->related_items;
                        @endphp
                        <p class="font-medium">{{__('category.related_items')}}</p>
                        {!! Form::select('related_items[]', [], [], [
                            'class' => 'form-control select2-ajax-search',
                            'multiple' => 'true',
                            'data-actions-box' => 'true',
                            'data-width' => '100%',
                            'data-url' => route('global-items.select2-options').$uid
                        ])!!}
                    </div>
                </div>
            </div>
            <div class="round-white-bg box-shadow mt-3 px-0">
                <div class="col-md-4">
                    @php
                    $scheduleStyle = (isset($data) && $data->is_schedule == 1) ? '' : 'style="display:none"';
                    @endphp
                    <div class="custom-input-group colored-field-group custom-input-group-small">
                        {{Form::label('is_schedule',__('item.is_schedule'), array('class' => 'control-label'))}}
                        <div class="global-item-top-box mt-3">
                            <label class="yummy-switch-label">
                                {!! Form::checkbox('is_schedule',1,$data->is_schedule == 1 ? true :false,['class' => 'is_schedule']) !!}
                                <span class="yummy-switch-box"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="scheduled col-md-12">
                    <div class="custom-input-group colored-field-group schedule-date mb-0 pl-0 col-5" {!! $scheduleStyle !!}>
                        <label class="control-label mb-2">{!! __('item.start_date') !!}</label>
                        <div class="custom-input-group colored-field-group">
                                                        {!! Form::text('start_date', $startDate, ['class' => 'form-control datepicker-input']) !!}
                        </div>
                    </div>
                    <div class="custom-input-group colored-field-group schedule-date pl-0 col-5 mb-0" {!! $scheduleStyle !!}>
                        <label class="control-label mb-2">{!! __('item.end_date') !!}</label>
                        <div class="custom-input-group colored-field-group">
                            {!! Form::text('end_date',$endDate, ['class' => 'form-control datepicker-input']) !!}
                        </div>
                    </div>
                    <div class="custom-input-group colored-field-group schedule-date col-12 pl-0" {!! $scheduleStyle !!}>
                        <label class="control-label mb-2  @if(!isset($data->schedule_time) && $data->schedule_time == "") d-none @endif label_time">{!! __('item.time') !!}</label>
                        <div class="custom-input-group colored-field-group add_time">
                            @if(isset($data->schedule_time) && $data->schedule_time !="")
                                @php $scheduleTime = json_decode($data->schedule_time);@endphp
                                @foreach($scheduleTime as $key => $stime)
                                    @php
                                       $weekDaysSelected =  isset($stime->schedule_weekdays) && $stime->schedule_weekdays ? $stime->schedule_weekdays : [] ?? [];
                                    @endphp
                                    <div class="row pt-4 {{$key == 0 ? 'mt-2' : 'mt-4'}}" style="border-top: solid 1px #C3C3C3 !important;">
                                        <div class="col-md-5">
                                            {!! Form::text('start_time['.$key.']', $stime->start_time , ['class' => 'form-control time-picker start_time', 'placeholder' => 'From', 'autocomplete' => 'off']) !!}
                                        </div>
                                        <div class="col-md-5">
                                            {!! Form::text('end_time['.$key.']', $stime->end_time , ['class' => 'form-control time-picker end_time', 'placeholder' => 'To', 'autocomplete' => 'off']) !!}
                                        </div>
                                        <div class="col-md-10 mt-2">
                                            {!! Form::label('platform', __('category.platform'), ['class' => 'control-label mb-2']) !!}
                                            {!! Form::select('schedule_platform_'.$key.'[]', itemFor(), (isset($stime->platform) && $stime->platform != "") ? $stime->platform : null, [
                                                                'class' => 'form-control schedule_platforms',
                                                                'multiple' => 'true',
                                                                'data-width' => '100%',
                                                                'data-search' => 'true'
                                            ]) !!}
                                        </div>
                                        <span class="col-md-2 mt-4">
                                            <button type="button" class="btn btn-danger __remove_time"><i class="fa fa-minus"></i></button>
                                       </span>
                                        <div class="col-md-10 mt-2">
                                            {{Form::label('weekdays', __('item.weeks'), array('class' => 'control-label'))}}
                                            <div class="weekdays-list-custom">
                                            @foreach($weekdays as $dayNo => $days)
                                                <label class="custom-control custom-small-control custom-white-control">
                                                    {!! Form::checkbox('schedule_weekdays_'.$key.'[]', $dayNo,(in_array($dayNo,$weekDaysSelected)) ? true:false, ['class' => 'form-control']) !!}
                                                    <span class="weekdays-day-custom {{(in_array($dayNo,$weekDaysSelected)) ? 'day-selected':''}}" style="padding : 4px 0px 4px 4px; width: 55px;">
                                                        <i class="fa fa-check green green-check font-10" {{(in_array($dayNo,$weekDaysSelected)) ? '':'style=display:none'}}></i>
                                                        {!! $days !!}
                                                    </span>
                                                </label>
                                            @endforeach
                                            </div>
                                        </div>

                                    </div>
                                    @endforeach
                                @endif
                        </div>
                        <button type="button" class="btn btn-primary __add_time float-left mt-3"><i class="fa fa-plus"></i> Add Time</button>
                    </div>
                </div>
            </div>



            <div class="round-white-bg box-shadow mt-3 d-none">
                <p class="font-medium">{{__('category.image-view-street')}}</p>
                <div class="common-image-preview image-preview-height">
                    <img class="kiosk-street-preview" src="{{getImagePath($data->kiosk_street_image,"product")}}" alt="">
                </div>
            </div>

        </div>
        {{ Form::token()}}
        {{ Form::close()}}
    </div>
</div>
<div class="__add_display_mode_template d-none">
    <div class="row display_mode" style="border-top: solid 1px #C3C3C3 !important;">
        <div class="col-md-10 mb-2">
            {!! Form::label('platform', __('category.platform'), ['class' => 'mb-2']) !!}
            {!! Form::select('platforms[]', itemFor(), [], [
                                'class' => 'form-control platforms',
                                'multiple' => 'true',
                                'data-width' => '100%',
                                'data-search' => 'true'
            ]) !!}
        </div>
        <div class="custom-input-group col-md-12 d-flex" style="font-size: medium;">
            {!! Form::label('in_rows_products',__('category.in_rows_products'),['class' => 'mt-3']) !!}
            <div class="custom-input-group colored-field-group mb-0 ml-4 mt-2 col-md-4">
                {{ Form::select('in_rows_products[]', noOfItemsTobeDisplay(), null, array('class'=>'form-control in_rows_products')) }}
            </div>

            <div class="col-md-2 pt-2">
                <button type="button" class="btn btn-danger __remove_display_mode"><i class="fa fa-minus"></i></button>
            </div>
        </div>


        <div class="custom-input-group col-md-12 d-flex mb-0 mt-3" style="font-size: medium;">
            {!! Form::label('display_mode',__('category.display_mode'),['class' => 'mb-0']) !!}
            <div class="custom-input-group colored-field-group d-flex mb-0">
                @foreach(categoryDisplayMode() as $key => $value)
                    <div class="form-check">
                        <input type="radio" class="form-check-input display_mode" name="display_mode[]" id="display_mode_{{ $key }}" value="{{ $key }}" {{ 0 == $key ? 'checked' : '' }} onChange="selectDisplayMode(this)">
                        <label class="form-check-label" for="display_mode_{{ $key }}">
                            {{ $value }}
                        </label>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="category_colors col-md-12 pr-0" style="display: none;">
            <div class="custom-input-group col-md-4 pl-0" style="font-size: medium;">
                {!! Form::label('design',__('category.design'),['class' => 'control-label mb-2 pl-0']) !!}
                <div class="custom-input-group colored-field-group d-flex mb-0">
                    {{ Form::select('design[]', itemDisplayDesignMode(), $data->design, array('class'=> 'form-control design')) }}
                </div>
            </div>

            <div class="custom-input-group colored-field-group col-md-4 pl-0">
                {!! Form::label('bg_color',__('category.bg_color'),['class' => 'control-label mb-2 ']) !!}
                <div class="custom-input-group colored-field-group">
                    {!! Form::color('bg_color[]', $data->bg_color,['class' => 'form-control bg_color']) !!}
                </div>
            </div>
            <div class="custom-input-group colored-field-group col-md-4 pl-2 pr-0">
                {!! Form::label('font_color',__('category.font_color'),['class' => 'control-label mb-2 ']) !!}
                <div class="custom-input-group colored-field-group">
                    {!! Form::color('font_color[]', $data->font_color,['class' => 'form-control font_color']) !!}
                </div>
            </div>
        </div>

  </div>
</div>

<div class="__add_time_template d-none">
    <div class="row pt-4 mt-4" style="border-top: solid 1px #C3C3C3 !important;">
        <div class="col-md-5">
            {!! Form::text('start_time[]', null, ['class' => 'form-control time-picker start_time', 'placeholder' => 'From', 'autocomplete' => 'off']) !!}
        </div>
        <div class="col-md-5">
            {!! Form::text('end_time[]', null, ['class' => 'form-control time-picker end_time', 'placeholder' => 'To', 'autocomplete' => 'off']) !!}
        </div>
         <div class="col-md-10 mt-2">
            {!! Form::label('platform', __('category.platform'), ['class' => 'control-label mb-2']) !!}
            {!! Form::select('schedule_platform[]', itemFor(), '', [
                                'class' => 'form-control schedule_platforms __hidden_select',
                                'multiple' => 'true',
                                'data-width' => '100%',
                                'data-search' => 'true'
            ]) !!}
        </div>
        <span class="col-md-2  mt-1">
            <button type="button" class="btn btn-danger __remove_time"><i class="fa fa-minus"></i></button>
       </span>
        <div class="col-md-10 mt-2">
            {{Form::label('weekdays', __('item.weeks'), array('class' => 'control-label'))}}
            <div class="weekdays-list-custom">
            @foreach($weekdays as $dayNo => $days)
                <label class="custom-control custom-small-control custom-white-control">
                    {!! Form::checkbox('schedule_weekdays[]', $dayNo, false, ['class' => 'form-control schedule_weekdays']) !!}
                    <span class="weekdays-day-custom" style="padding : 4px 0px 4px 4px; width: 55px;">
                        <i class="fa fa-check green green-check font-10"   style='display:none'></i>
                        {!! $days !!}
                    </span>
                </label>
            @endforeach
            </div>
        </div>

    </div>
</div>
@endsection

@section('script')
<script>
    $('body').on('change', '.is_schedule', function(e) {
        if (this.checked) {
            $(".schedule-date").show();
        } else {
            $(".schedule-date").hide();
        }
    });
    $(document).on("click", ".weekdays-day-custom", function() {
        if($(this).hasClass("day-selected")){
            $(this).removeClass("day-selected");
            $(this).find(".green-check").hide();

        }else{
            $(this).addClass("day-selected");
            $(this).find(".green-check").show();
        }
    });
    $(".time-picker").datetimepicker({
        format: 'HH:mm',
        icons:
        {
            up: 'fa fa-angle-up',
            down: 'fa fa-angle-down'
        }
    });
    let count=100;
    $(".__add_time").click(function() {
        let template = $('.__add_time_template').html();
        var rLen = $('.__remove_time').length;

        if (rLen  < 5) {
            $(".label_time").removeClass("d-none");
            let template = $('.__add_time_template').html();
            let res = $(template);
            res.find('.start_time').attr('name','start_time[' + count + ']');
            res.find('.end_time').attr('name','end_time[' + count + ']');
            res.find('.schedule_weekdays').attr('name','schedule_weekdays_'+ count+'[]').attr('id','schedule_weekdays_'+count);
            res.find('.schedule_platforms').attr('name','schedule_platform_'+ count+'[]').attr('id','schedule_platform_'+count);

            $('.add_time').append(res);
            $('.add_time').find('.start_time:last,.end_time:last').datetimepicker({
                format: 'HH:mm',
                icons: {
                    up: 'fa fa-angle-up',
                    down: 'fa fa-angle-down'
                },
            });
            // $(".schedule_platforms").select2();
            $('.add_time').find('.schedule_platforms[name="schedule_platform_' + count + '[]"]').select2();
            count++;
        }
        if(rLen > 3)
        {
            $(".__add_time").addClass("d-none");
        }
    });

    let displayModeCount = 100;
    $(".__add_display_mode").click(function()
    {
        var rLen = $('.__remove_display_mode').length;
        if (rLen  < 5) {
            $(".label_time").removeClass("d-none");
            let template = $('.__add_display_mode_template').html();
            let res = $(template);
            res.find('.platforms').attr('name', 'platforms[' + displayModeCount + '][]');
            res.find('.display_mode').attr('name','display_mode[' + displayModeCount + ']');
            res.find('.design').attr('name','design[' + displayModeCount + ']');
            res.find('.bg_color').attr('name','bg_color[' + displayModeCount + ']');
            res.find('.font_color').attr('name','font_color[' + displayModeCount + ']');
            res.find('.in_rows_products').attr('name','in_rows_products['+ displayModeCount +']');
            $('.add_display_mode').append(res);
            $('.add_display_mode').find('.platforms[name="platforms[' + displayModeCount + '][]"]').select2();
            displayModeCount++;
        }
        if(rLen > 2)
        {
            $(".__add_display_mode").addClass("d-none");
        }
        hideShowRemoveDisplayModeButton();
    });

    $("body").on('click', '.__remove_time', function() {
        $(this).parent().parent().remove();
        var rLen = $('.__remove_time').length;
        if(rLen == 1){
            $(".label_time").addClass("d-none");
            $(".__add_time").addClass("d-none");
        }
        $(".__add_time").removeClass("d-none");

    });

    $(".schedule_platforms").slice(0, -1).select2();
    $(".platforms").slice(0, -1).select2();

    $("body").on('click', '.__remove_display_mode', function() {
        $(this).parent().parent().parent().remove();
        var rLen = $('.__remove_display_mode').length;
        if(rLen == 1){
            $(".label_time").addClass("d-none");
            $(".__add_display_mode_template").addClass("d-none");
        }
        $(".__add_display_mode").removeClass("d-none");
        hideShowRemoveDisplayModeButton();
    });


    function selectDisplayMode(event)
    {
        var value = parseInt(event.value);
        // Find the closest parent with the class 'category_colors'
        var $closestRow = $(event).closest('.row');
        // Now find the category_colors class within that row
        var $closestCategoryColors = $closestRow.find('.category_colors');
        if (value) {
            $closestCategoryColors.addClass('d-flex').show();  // Show the category_colors element
        } else {
            $closestCategoryColors.removeClass('d-flex').hide();  // Hide the category_colors element
        }
    }

    function validatePlatformSelection(currentSelect)
    {
        let selectedValues = [];
        let duplicatePlatforms = [];

        // Reset any previous error styles for the current select box
        $(currentSelect).removeClass('is-invalid');

        // Collect all selected values across the platform selects
        $('.platforms').not(currentSelect).each(function() {
            let selected = $(this).val();
            if (selected) {
                selectedValues = selectedValues.concat(selected); // Collect selections except current
            }
        });

        // Check for duplicates in the current select box
        let currentSelected = $(currentSelect).val();
        if (currentSelected) {
            currentSelected.forEach(function(value) {
                if (selectedValues.includes(value)) {
                    duplicatePlatforms.push(value); // Track duplicates only in the current select
                }
            });
        }

        // If duplicates exist, show alert and unselect them from the current select box
        if (duplicatePlatforms.length > 0)
        {
            alert("Duplicate platforms selected! Please ensure all platform selections are unique.");

            // Remove duplicate platforms from the current select box
            let newSelection = currentSelected.filter(val => !duplicatePlatforms.includes(val));
            $(currentSelect).val(newSelection).trigger('change'); // Unselect duplicates and trigger change
            return false;
        }
        return true;
    }

    function hideShowRemoveDisplayModeButton()
    {
        if($('.__remove_display_mode')){
            var removeButtonCount = $('.__remove_display_mode').length-1;
            if (removeButtonCount > 1) {
                $('.__remove_display_mode').show(); // Show the remove buttons
            } else {
                $('.__remove_display_mode').hide(); // Hide the remove buttons
            }
        }

   }

    // Validate only on the currently changed platform select
    $(document).on('change', '.platforms', function() {
        validatePlatformSelection(this); // Validate the current select on change
    });
    hideShowRemoveDisplayModeButton();
    // selectDisplayMode(document.querySelector("input[name='display_mode']:checked"));
    </script>

@endsection