@extends('layouts.app')
@section('content')
    <div class="container">
        {!! Form::model($cat, ['action' => 'Admin\ServicesController@store']) !!}
        <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">
            </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">
                <a href="{{ route('admin.services.index') }}" class="btn btn-default documentLink">Cancel</a>
                <button type="submit" class="btn knowmad_btn_blue knowmad_btn">Save</button>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
    <script id="serviceTemplate" type="text/template">

        <div class="service col-md-12">
            <div class="col-md-5 push-top">
                Sub Service .count.
            </div>
            <div class="col-md-7 push-top">
                <input type="text" id="subCat.count." name="subCats[]" class="form-control" value="">
            </div>
        </div>

    </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>
@endpush