@include('admin.inc.head')
<div class="app-main__outer">
    <div class="app-main__inner">
        <div class="row">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-header">Add Tool</div>
                    <div class="table-responsive">
                        <div class="col-sm-12">
                            @if (session('success'))
                                <x-success-component :message="session('success')" />
                            @endif
                            @if ($errors->has('error_message'))
                                <x-error-component :message="$errors->first('error_message')" />
                            @endif
                        </div>
                        <form method="POST" action="{{ route('tool.store') }}">
                            @csrf
                            <div class="col-sm-12 row m-auto">
                                <div class="col-sm-6 p-2 m-auto">
                                    <label for="cat_name">Title</label>
                                    <input type="text" class="form-control" name="title" id="title">
                                </div>
                                <div class="col-sm-6 p-2 m-auto">
                                    <label for="meta_title">Meta Title</label>
                                    <input type="text" class="form-control" name="meta_title" id="meta_title">
                                </div>
                                <div class="col-sm-6 p-2 m-auto">
                                    <label for="meta_description">Meta Description</label>
                                    <input type="text" class="form-control" name="meta_description" id="meta_description">
                                </div>
                                <div class="col-sm-6 p-2 m-auto">
                                    <label for="slug">Slug</label>
                                    <input type="text" class="form-control" name="slug" id="slug">
                                </div>
                                <div class="col-sm-6 p-2 m-auto">
                                    <label for="lang">Language</label>
                                    <select class="form-control" name="lang" id="lang">
                                        @foreach (config('constants.languages') as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-6 p-2 m-auto">
                                    <label for="cat_id">Category</label>
                                    <select class="form-control" name="cat_id" id="cat_id" required>
                                        @foreach ($category as $cat)
                                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-12 p-2 m-auto">
                                    <label for="parent">Parent</label>
                                    <select class="form-control" name="parent" id="parent" required>
                                        <option value="0">This is Parent</option>
                                        @foreach ($tools as $tool)
                                            <option value="{{ $tool->id }}">{{ $tool->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="js-span-toggle-content col-sm-12 p-2 m-auto">
                                    <label for="">Content</label>
                                    <div class="tool_content">
                                        <div class="row" id="row01">
                                            <input type="hidden" value="inputField" name="inputType[]">
                                            <div class="col-md-3 mb-3">
                                                <input type="text" name="contentKey[]" class="form-control" placeholder="Key"
                                                    value="">
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <input type="text" name="contentValue[]" class="form-control" placeholder="Value"
                                                    value="">
                                            </div>
                                        </div>
                                    </div>
            
                                    <div class="row">
                                        <div class="col-md-3 mb-3">
                                            <select class="form-control" id="add_more_type" name="add_more_type">
                                                <option selected disabled>Select Input Type</option>
                                                <option value="inputField">Input Fields</option>
                                                <option value="textarea">Text Area</option>
                                                <option value="richText">Rich Text Editor</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3 mr-0 ml-auto mb-3">
                                            <a href="#" class="btn btn-primary waves-effect waves-light w-100" id="addMore">Add
                                                Row</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-auto pt-3 pb-3 pr-2 col-6 ">
                                    <button class="btn btn-success w-100">Add</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@push('admin_script')
    <script>
        $(document).ready(function() {
            $("#title").on("keydown input change", function() {
                let slug = $(this)
                    .val()
                    .replace(/[^a-zA-Z0-9\s]/gi, '')
                    .replace(/[_\s]/g, '-')
                    .toLowerCase();
                $("#slug").val(slug);
            });
        });
    </script>
@endpush
@include('admin.inc.footer')