@extends('admin.layouts.master')

@section('title')
    Create Product's Category
@endsection

@section('content')

<div class="container">

    <div class="text-center mb-5">
        <h2>
            <u>Product's Category Create</u>
        </h2>
    </div>

    <form method="POST" action="{{ route('admin.category.store') }}">
        @csrf
        <div class="row justify-content-center">
            <div class="col-4">
                <div class="form-group">
                    <label for="name_sr">Name @php renderFlag('sr') @endphp</label>
                    <input name="name_sr" type="text" class="form-control" placeholder="Enter category name">
                </div>
            </div>
            <div class="col-4">
                <div class="form-group">
                    <label for="name_en">Name @php renderFlag('en') @endphp</label>
                    <input name="name_en" type="text" class="form-control" placeholder="Enter category name">
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-4">
                <div class="form-group">
                    <label for="is_main_cat">Main</label>
                    <select name="is_main_cat" id="is_main_cat" class="form-control">
                        <option value="1"
                            {{ old('is_main_cat') === '1' ? 'selected' : '' }}
                        >
                            Yes
                        </option>
                        @if (count($main))
                            <option value="0"
                                {{ old('is_main_cat') === '0'  ? 'selected' : '' }}
                            >
                                No
                            </option>
                        @endif
                    </select>
                </div>
            </div>
            <div class="col-4" id="main_cat_div" hidden>
                <div class="form-group">
                    <label for="parent_id">Main Category</label>
                    <select name="parent_id" id="main_cat" class="form-control">
                        <option selected disabled>Pick</option>
                        @foreach ($main as $category)
                            <option
                                value="{{ $category->id }}"
                                {{ old('parent_id') ? (old('parent_id') == $category->id ? 'selected' : '') : '' }}
                            >
                                {{ $category->name_sr }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-6">
                @include('errors')
            </div>
        </div>

        <div class="row justify-content-center">
            <button type="submit" class="btn btn-primary">Add New Category</button>
        </div>
    </form>

</div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            let target = $('#is_main_cat');

            target.on('change', function () {
               let value = parseInt( $(this).val() ) ? true : false;

               $('#main_cat_div').prop('hidden', value);
            });

            target.trigger('change');
        });
    </script>
@endsection