@extends('layouts.app')
@section('content')
    <div class="container">
            {!! Form::model($cat,
                [
                    'method' => 'PATCH',
                    'route' => array ('admin.services.update', $cat->id)
                ]
            ) !!}
            <div class="row">
                <div class="col-md-3">
                    <label>
                        Category
                    </label>
                </div>
                <div class="col-md-9">

                    <input type="text" id="service_name" name="service_name" class="form-control required editor-profile" maxlength="50" value="{{{$cat->name}}}">
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label>
                        Allowed Provider Services
                    </label>
                </div>
                <div class="col-md-9">
                    @foreach ($provider_svcs as $svc)
                        <input type="checkbox" name="allowed_provider_services[]" @if ($allowed_provider_services->contains('provider_svc_id', $svc->id)) checked @endif value="{{ $svc->service }}">
                        <label for="">{{ $svc->service }}</label>
                    @endforeach
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label>
                        Sub Categories
                    </label>
                </div>
                <div class="col-md-9">
                    <button id="btnAddSubService" type="button" class="btn knowmad_btn_blue knowmad_btn">Add Sub Category</button>
                </div>
            </div>
            
            <div class="mt-2 row">
                <ul style="list-style: none;" id="subCats">
                    @foreach ($sub_cats as $index => $s)
                        <li class="row">
                            <div class="col-md-5">
                                Sub Category {{ $index + 1 }}
                            </div>
                            <div class="col-md-7">
                                <input type="text" id="subCat{{ $index }}" name="subCats[]" class="form-control" value="{{$s->name}}">
                            </div>
                        </li>
                    @endforeach
                </ul>
                
            </div>
             
               
            
            <div class="row">

                <div class="col-md-8 text-center mb-2">
                    <a href="{{ route('admin.services.index') }}" class="btn btn-default documentLink">Cancel</a>
                    <button type="submit" class="btn knowmad_btn_blue knowmad_btn width_fitContent">Save</button>
                </div>
            </div>
        {!! Form::close() !!}
    </div>
    <script id="serviceTemplate" type="text/template">

        <li class="row">
       
             <div class="col-md-5">
                Sub Category .count.
            </div>
            <div class="col-md-7">
                <input type="text" name="subCats[]" class="form-control" value="">
            </div>
        </li>
    </script>
@endsection
@push('footer_js')
    <script type="text/javascript">
        
        $("#btnAddSubService").on("click", function (evt) {
        
            /** grab UL from DOM */
            let list = document.getElementById('subCats');
            
            /** grab innerhtml of serviceTemplate */
            let $template = $("#serviceTemplate").html(),

            $target = $(list),
            /** get count of all 'li' tags in list */
            _count = list.getElementsByTagName('li').length;

            /** append new list item to target, replacing 'count' with _count number */
            $target.append($template.replace(/.count./g, _count + 1));
            
            // list.appendChild(newItem);
       
        });
        
      </script>
    {{-- <script>jQuery(AdminServices.buildList({{ $sub_cats }}));</script> --}}
@endpush