@extends('manager.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')

@endpush
@section('content')
    <div class="card mt-3">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h4>
                    <div
                        class="small text-medium-emphasis">{{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</div>
                </div>
                <div class="btn-toolbar d-none d-md-block" role="toolbar" aria-label="Toolbar with buttons">
                    @can('manager_master-data_book-category-list')

                        <a href="{{(!empty($url) && isset($url)) ? $url : ''}}"
                           class="btn btn-sm btn-primary">{{(!empty($url_text) && isset($url_text)) ? $url_text : ''}}</a>
                    @endcan
                </div>
            </div>
            <hr>
            <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="category_name">Category Name</label>

                        <input type="text"
                               class="form-control @error('category_name') is-invalid @enderror"
                               name="category_name"
                               id="category_name"
                               onkeyup="syncSlug(this.value)"
                               placeholder="Category Name"
                               value="{{ old('category_name', $data->category_name) }}">

                        @error('category_name')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="slug">Slug</label>

                        <input type="text"
                               class="form-control @error('slug') is-invalid @enderror"
                               name="slug"
                               id="slug"
                               value="{{ old('slug', $data->slug) }}">

                        @error('slug')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="is_active">Status</label>

                        <select name="is_active"
                                id="is_active"
                                class="form-control @error('is_active') is-invalid @enderror">

                            <option value="1"
                                {{ old('is_active', $data->is_active) == 1 ? 'selected' : '' }}>
                                Active
                            </option>

                            <option value="0"
                                {{ old('is_active', $data->is_active) == 0 ? 'selected' : '' }}>
                                In Active
                            </option>

                        </select>

                        @error('is_active')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label">Is Parent Category?</label>

                        <select name="is_parent_category"
                                id="is_parent_category"
                                class="form-control @error('is_parent_category') is-invalid @enderror">

                            <option value="1" {{ old('is_parent_category', $data->is_parent_category) == 1 ? 'selected' : '' }}>
                                Yes
                            </option>

                            <option value="0" {{ old('is_parent_category', $data->is_parent_category) == 0 ? 'selected' : '' }}>
                                No
                            </option>

                        </select>

                        @error('is_parent_category')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                    <div class="mb-3 col-12 col-md-12 col-lg-6"
                         id="parentCategoryDiv"
                         style="{{ old('is_parent_category', $data->is_parent_category) ? 'display:none;' : '' }}">

                        <label class="form-label">Parent Category</label>

                        <select name="parent_category_id"
                                class="form-control @error('parent_category_id') is-invalid @enderror">

                            <option value="">Select Parent Category</option>

                            @foreach($parentCategories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('parent_category_id', $data->parent_category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach

                        </select>

                        @error('parent_category_id')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                </div>
                <button type="submit" class="btn btn-sm btn-success">Submit</button>
            </form>
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script>
        function slugify(text) {
            return text
                .normalize('NFD')
                .toLowerCase()
                .toString()
                .trim()
                .replace(/ /g, '-')
                .replace(/[^\w-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/_+/g, '');
        }

        function syncSlug(text) {
            if (!document.getElementById('slug').dataset.touched) {
                document.getElementById('slug').value = slugify(text);
            }
        }

        document.getElementById('slug').addEventListener('input', function () {
            this.dataset.touched = '1';
        });

        function toggleParentCategory() {

            let isParent = document.getElementById('is_parent_category').value;
            let parentDiv = document.getElementById('parentCategoryDiv');

            if (isParent == '0') {
                parentDiv.style.display = 'block';
            } else {
                parentDiv.style.display = 'none';
                document.querySelector('select[name="parent_category_id"]').value = '';
            }
        }

        document.addEventListener('DOMContentLoaded', function () {

            toggleParentCategory();

            document.getElementById('is_parent_category').addEventListener('change', toggleParentCategory);

        });
    </script>
@endpush