@extends('layouts.admin')

@section('css')
    <style>
        .child{
            display: grid;
            margin-left: 20px;
            padding-top: 10px;
        }
        .__permission_module{
            cursor: pointer;
            border-radius: 12px;
            min-height: 120px;
        }
    </style>
@endsection

@section('content')

<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{{ $data->id ?  __('module.edit') :  __('module.add') }}</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('master-admin.module.index') }}">{{ __('module.module') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page"> {{ $data->id ?  __('module.edit') :  __('module.add') }}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    <div class="row employee-list-view">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 employee-list-full">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <div class="error-msg font-14"></div>
                </div>
                {{ Form::open(array('route' => $routes, 'method' => 'POST', 'id' => 'ajaxSave')) }}
                @if($data->id) @method('PUT') @endif
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
                        <div class="row">

                            <div class="custom-input-group colored-field-group col-12">
                                {{ Form::label('title', __('module.title'), array('class' => 'control-label')) }}
                                {{ Form::text('title', $data->title, array('class' => 'form-control')) }}
                            </div>

                            <div class="custom-input-group colored-field-group col-12">
                                {{ Form::label('description', __('module.description'), array('class' => 'control-label')) }}
                                {{ Form::textarea('description', $data->description, array('class' => 'form-control','size' => '2x2')) }}
                            </div>
                            <div class="custom-input-group colored-field-group col-12">
                                {{ Form::label('module_type', __('company-menu.module_type'), array('class' => 'control-label')) }}
                                {{ Form::select('module_type', [''=>__('company-menu.select_type')]+moduleType() ,$data->module_type ?? '', array('class' => 'form-control')) }}
                            </div>
                            <div class="custom-input-group colored-field-group col-12">
                                <ul class="list-unstyled space-list align-items-center">
                                    <li>
                                        <p class="font-medium">{{__('global_extra_master.image')}}</p>
                                        <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'))}}

                                                <ul class="list-inline">
                                                    <li class="list-inline-item">
                                                        <a href="#" class="btn btn-primary font13">{{__('store.choose-file')}}</a>
                                                    </li>
                                                    <li class="list-inline-item text-muted image-name-placeholder">
                                                        {{__('store.no-choosen-file')}}
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                    <li style="padding: 10px">
                                        <div class="image-preview-container">
                                            <img src="{{ getImagePath($data->image,'product',false)}}" class="img-fluid" alt="" />
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="row col-12">
                                <div class="custom-input-group colored-field-group col-4">
                                    {{ Form::label('is_paid', __('module.is_paid'), array('class' => 'control-label')) }}
                                    {{ Form::checkbox('is_paid', $data->is_paid ?? 0,$data->is_paid,array()) }}
                                </div>
                                <div class="custom-input-group colored-field-group col-8" @if(!$data->is_paid) style="visibility: hidden;" @endif>
                                    {{ Form::label('price', __('module.price'), array('class' => 'control-label')) }}
                                    {{ Form::text('price', $data->price, array('class' => 'form-control')) }}
                                </div>
                            </div>

                            <div class="row col-12">
                                <div class="col-6">
                                    {{ Form::label('status', __('module.status'), array('class' => 'control-label')) }}
                                    <div class="global-item-top-box">
                                        <label class="yummy-switch-label">
                                            {!! Form::checkbox('status', 1, $data->status ?? false,['class' => '__checkbox' ]) !!}
                                            <span class="yummy-switch-box"></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    {{ Form::label('featured', __('module.featured'), array('class' => 'control-label')) }}
                                    <div class="global-item-top-box">
                                        <label class="yummy-switch-label">
                                            {!! Form::checkbox('featured', 1,$data->featured ?? false) !!}
                                            <span class="yummy-switch-box"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-input-group colored-field-group mt-4 col-12">
                                <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 class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <label for="">Choose Module</label>
                        <div class="row">
                        @foreach($menus as $menu)
                            @php
                                $checked = false;
                                $color = 'b1a5a5';
                                if(isset($permission)){
                                    $checked  = in_array($menu->id,$permission) ? true : false;
                                    $color = $checked ? 'e26314' : 'b1a5a5' ;
                                }
                            @endphp
                            <div class="col-xs-6 col-md-3 mt-3">
                                <div class="card __permission_module" style="border: 2px solid #{!! $color !!};background: #{!! $menu->colour !!};">
                                    <div class="text-center p-2 ">
                                        <h6 class="mt-2">{!! $menu->title !!}</h6>
                                        <span class="font-11" style="font-size: 12px;">{!! $menu->description !!}</span>
                                        {!! Form::checkbox('permission_module[]',$menu->id,$checked ,['class' => '' , 'style' => 'display:none']) !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        </div>
                    </div>

                </div>
                {{ Form::close()}}
            </div>
        </div>

    </div>
</div>
@endsection

@section('script')
    <script>
        document.addEventListener('change', function(event) {
            if (event.target.name === 'is_paid') {
                event.target.value = (event.target.checked ? '1' : '0');
                var priceElem = document.querySelector('input[name="price"]');
                priceElem.parentElement.style.visibility = event.target.checked ? 'visible' : 'hidden';
            }
        });

        $(document).on('click','.__permission_module',function(){
            let checkboxElem = $(this).children().find('input[name="permission_module[]"]');
            if(checkboxElem.is(':checked')){
                checkboxElem.prop('checked',false);
                this.style.border = '2px solid #b1a5a5';
            }else{
                checkboxElem.prop('checked',true);
                this.style.border = '2px solid #e26314';
            }
        });

        $('.__checkbox').click(function(){
           let elem = $(this);
           elem.val(elem.is(':checked') ? '1' : '0');
        });
    </script>

@endsection