@extends('layouts.master')

@section('title')
Solution & Service Category
@endsection

@section('extra-css')

@endsection

@section('index')
<div class="content">
    <div class="col-md-12">
        <div class="card card-user">
            <div class="card-header">
                <h5 class="card-title">Solution & Service Category</h5>
            </div>
            <div class="card-body">
                <form id="form_validation" method="POST" action="{{ route('solution_n_service_categories.store') }}" file="true" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label">Main Category</label>
                            <select class="form-control" name="parent_id" id="parentId">
                                <option value="">-- Select Main Category --</option>
                                @foreach($main_categories as $main_category)
                                <option value="{{$main_category->id}}">{{ $main_category->name }}</option>
                                @endforeach
                            </select>
                            @error('main_category_id')
                            <label id="main_category_id-error" class="error" for="main_category_id">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-line">
                            <label class="form-label" id="lbl_category">Main Category Name</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="cat_name" placeholder="Main Category Name" value="{{old('name')}}" required>
                            @error('name')
                            <label id="name-error" class="error" for="name">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                    
                    <button class="btn btn-primary waves-effect" type="submit">SUBMIT</button>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
@endsection
@section('extra-script')
<script>
     $("#parentId").change(function (){     
         var tmp = $(this).val();
         if ($(this).val() != '') {
            $('#lbl_category').text('Sub Category Name');     
            $('#cat_name').attr("placeholder", "Sub Category Name");
         }else{
            $('#lbl_category').text('Main Category Name');
            $('#cat_name').attr("placeholder", "Main Category Name");
         }
        
     });
</script>
@endsection