@extends('manager.layouts.app')
@section('page_title')
    {{ !empty($page_title) && isset($page_title) ? $page_title : 'Blogs Category' }}
@endsection
@push('head-scripts')
@endpush
@section('content')
    <div class="card mt-3">
        <div class="card-body">
            {{-- Start: Page Content --}}
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">Blogs category</h4>
                    <div class="small text-medium-emphasis">Add New Blog Category
                    </div>
                </div>
                <div class="btn-toolbar d-none d-md-block" role="toolbar" aria-label="Toolbar with buttons">
                    @can('manager_news-event_category-list')
                        <a href="{{ route('manager.blog.category.index') }}"
                            class="btn btn-sm btn-primary">View All</a>
                    @endcan
                </div>
            </div>
            <hr>
            {{-- Start: Form --}}
            <form method="POST" action="{{ route('manager.blogs.category.store') }}">
                @csrf

                <div class="mb-3">
                    <label class="form-label" for="name">Category Name</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                        id="name" onkeyup="listingslug(this.value)" placeholder="e.g., Technology, Lifestyle, Business"
                        value="{{ old('name') }}" required>
                    @error('name')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="slug">Slug (URL)</label>
                    <input type="text" class="form-control @error('slug') is-invalid @enderror" name="slug"
                        id="slug" placeholder="auto-generated-from-name" value="{{ old('slug') }}">
                    <small class="text-muted">Leave empty to auto-generate from category name</small>
                    @error('slug')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="description">Description</label>
                    <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror"
                        rows="3" placeholder="Brief description of this category (optional)">{{ old('description') }}</textarea>
                    @error('description')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="color">Category Color</label>
                    <div class="d-flex align-items-center gap-3">
                        <input type="color" name="color" id="color"
                            class="form-control form-control-color @error('color') is-invalid @enderror"
                            value="{{ old('color', '#0d6efd') }}" style="width: 80px; height: 40px;" required>
                        <div class="flex-grow-1">
                            <input type="text" class="form-control" id="color_hex" value="{{ old('color', '#0d6efd') }}"
                                readonly>
                        </div>
                    </div>
                    <small class="text-muted">Choose a color to represent this category in the frontend</small>
                    @error('color')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="order">Display Order</label>
                    <input type="number" class="form-control @error('order') is-invalid @enderror" name="order"
                        id="order" placeholder="0" value="{{ old('order', 0) }}" min="0">
                    <small class="text-muted">Lower numbers appear first</small>
                    @error('order')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="status">Status</label>
                    <select class="form-control @error('status') is-invalid @enderror" name="is_active" id="status">
                        <option value="1" {{ old('is_active', '1') == '1' ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>In-Active</option>
                    </select>
                    @error('is_active')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <button type="submit" class="btn btn-sm btn-success">
                    <i class="fas fa-check me-1"></i>Submit
                </button>
                <a href="{{ route('manager.blog.category.index') }}" class="btn btn-sm btn-secondary">
                    Cancel
                </a>
            </form>
            {{-- End: Form --}}
            {{-- Page Description : Start --}}
            @if (!empty($p_description) && isset($p_description))
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 mb-sm-2 mb-0">
                            <p>{{ !empty($p_description) && isset($p_description) ? $p_description : '' }}</p>
                        </div>
                    </div>
                </div>
            @endif
            {{-- Page Description : End --}}
            {{-- End: Page Content --}}
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script>
        // Auto-generate slug from name
        function listingslug(text) {
            const slug = text
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim();
            document.getElementById('slug').value = slug;
        }

        // Update hex color input when color picker changes
        document.getElementById('color').addEventListener('input', function() {
            document.getElementById('color_hex').value = this.value.toUpperCase();
        });

        // Update color picker when hex input changes
        document.getElementById('color_hex').addEventListener('input', function() {
            const hex = this.value;
            if (/^#[0-9A-F]{6}$/i.test(hex)) {
                document.getElementById('color').value = hex;
            }
        });
    </script>
    {{-- Toastr : Script : Start --}}
    @if (Session::has('messages'))
        <script>
            noti({!! json_encode(Session::get('messages')) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
@endpush