@extends('manager.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@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_classes-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
                <div class="row">
                    <div class="mb-3 col-12 col-md-12 col-lg-6">
                        <label class="form-label" for="name">Name</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                               id="name"
                               onkeyup="syncSlug(this.value)" placeholder="Name" value="{{old('name')}}">
                        @error('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')}}">
                        @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"
                                class="form-control @error('is_active') is-invalid @enderror">
                            <option value="1">Active</option>
                            <option value="0">In Active</option>
                        </select>
                        @error('is_active')
                        <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                </div>

                <button type="submit" class="btn btn-sm btn-success">Submit</button>
            </form>
        </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';
                });

            </script>
    @endpush