@extends('admin.main')

@section('main')
<div class="card">
    <!--begin::Card header-->
    <div class="card-header">
        <!--begin::Card title-->
        <div class="card-title fs-3 fw-bolder">New Category</div>
        <!--end::Card title-->
    </div>
    <!--end::Card header-->
    <!--begin::Form-->
    <form method="POST" action={{ route('admin.categories.new.action') }} class="form fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
        @csrf
        <!--begin::Card body-->
        <div class="card-body p-9">

            <!--begin::Row-->
            <div class="row mb-8">
                <!--begin::Col-->
                <div class="col-xl-3">
                    <div class="fs-6 fw-bold mt-2 mb-3">Category Title</div>
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-xl-9 fv-row fv-plugins-icon-container">
                    <input type="text" class="form-control form-control-solid" name="category_title">
                <div class="fv-plugins-message-container invalid-feedback"></div></div>
            </div>
            <!--end::Row-->

            <!--begin::Row-->
            <div class="row mb-8">
                <!--begin::Col-->
                <div class="col-xl-3">
                    <div class="fs-6 fw-bold mt-2 mb-3">Subcategory</div>
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-xl-9 fv-row fv-plugins-icon-container">
                    <select class="form-control form-control-solid" name="category_id_parent" id="">
                        <option value="">No Category</option>
                        @foreach ($categories as $category)
                            <option value="{{$category->id}}">{{$category->category_title}}</option>
                            @foreach ($category->childs as $child)
                                <option disabled value="{{$child->id}}">---{{$child->category_title}}</option>
                            @endforeach
                        @endforeach
                    </select>
                <div class="fv-plugins-message-container invalid-feedback"></div></div>
            </div>
            <!--end::Row-->

            <!--begin::Row-->
            <div class="row mb-8">
                <!--begin::Col-->
                <div class="col-xl-3">
                    <div class="fs-6 fw-bold mt-2 mb-3">Slug</div>
                </div>
                <!--end::Col-->
                <!--begin::Col-->
                <div class="col-xl-9 fv-row fv-plugins-icon-container">
                    <input type="text" class="form-control form-control-solid" name="category_slug" id="category_slug" readonly>
                <div class="fv-plugins-message-container invalid-feedback"></div></div>
            </div>
            <!--end::Row-->

        </div>
        <!--end::Card body-->
        <!--begin::Card footer-->
        <div class="card-footer d-flex justify-content-end py-6 px-9">
            <button type="submit" class="btn btn-primary" id="kt_project_settings_submit">Save</button>
        </div>
        <!--end::Card footer-->
    </form>
</div>
@endsection

@push('js')
    <script src="{{ asset('admin/js/myCustomCategory.js') }}"></script>
    <script>
        category.init()
    </script>
@endpush