@extends("layouts.main-layout")

@section('title')
   {{ config('app.name') }} - Add new data
@endsection

@section('content')

<div class="content-wrap">
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    
                    <x-error-success-messages />

                    <h1 class="text-center mb-5 mt-5">Add new data</h1>

                    <form action="{{ route('addNewData') }}" method="POST">
                        @csrf

                        <div class="form-group mb-3">
                            <label for="Category">Select category</label>
                            <select name="category" class="form-select">
                                <option disabled selected>Choose Category</option>
                                @foreach($category as $cat)
                                    <option value="{{ $cat['categorie_id'] }}"> {{ $cat['categorie_name'] }} </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mt-3">
                            <label for="Custom Category">Doesn't see wanted category?</label><br>
                            <input type="button" value="Add new category" id="addNewCategory" class="btn btn-primary mt-3 @if(old('new_category')) d-none @endif">

                            <div class="row newCategory @if(!old('new_category')) d-none @endif">
                                <div class="col-sm-11">
                                    <input type="text" name="new_category" id="new_category" class="form-control" placeholder="Branding.." value="{{ old('new_category') }}">
                                </div>
                                <div class="col-sm-1 text-center mt-1">
                                    <a href="#" class="text-danger remove_new_category" title="Remove this category"><i class="fa-solid fa-xmark"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <label for="Subcategory">Select subcategory</label>
                            <select name="subcategory" class="form-select">
                                <option disabled selected>Choose Subcategory</option>
                                @foreach($category as $cat)
                                    <optgroup label="{{ $cat['categorie_name'] }}">
                                        @foreach($cat->subcategory as $subcategory)
                                            <option value="{{ $subcategory['sub_categorie_id'] }}">{{ $subcategory['sub_categorie_name'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mt-3">
                            <label for="Custom Subcategory">Doesn't see wanted subcategory?</label><br>
                            <input type="button" id="addNewSubcategory" class="btn btn-primary @if(old('new_subcategory')) d-none @endif" value="Add new subcategory">
                            <div class="row newSubcategory @if(!old('new_subcategory')) d-none @endif">
                                <div class="col-sm-11">
                                    <input type="text" name="new_subcategory" id="new_subcategory" class="form-control" placeholder="Others.." value="{{ old('new_subcategory') }}">
                                </div>
                                <div class="col-sm-1 text-center mt-1">
                                    <a href="#" class="text-danger remove_new_subcategory" title="Remove this subcategory"><i class="fa-solid fa-xmark"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <label for="Question">Question</label>
                            <textarea name="question" cols="30" rows="10" class="form-control" placeholder="Lorem Ipsum.." required>{{ old('question') }}</textarea>
                        </div>

                        <div class="form-group mt-3">
                            <div class="row">
                                <div class="col">
                                    <label for="Design hours">Design hours</label>
                                    <input type="text" class="form-control" name="design_hours" placeholder="12" required value="{{ old('design_hours') }}">
                                </div>
                                <div class="col">
                                    <label for="Development hours">Development hours</label>
                                    <input type="text" class="form-control" name="development_hours" placeholder="4" required value="{{ old('development_hours') }}">
                                </div>
                                <div class="col">
                                    <label for="Others hours">Others hours</label>
                                    <input type="text" class="form-control" name="others_time" placeholder="2" required value="{{ old('others_time') }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <label for="Select where you want to add it">Select where you want to add it</label>
                            <select name="customize_for_client_id" class="form-control">
                                <option value="" selected>Global for all clients except for already customized clients</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client['client_id'] }}">{{ $client['client_firstName'] }} {{ $client['client_lastName'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mt-3 mb-3 text-center">
                            <input type="submit" value="Add new data" class="btn btn-primary">
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#addNewCategory").click(function() {
            $("#addNewCategory").addClass("d-none");
            $(".newCategory").removeClass("d-none");
        });

        $(".remove_new_category").click(function() {
            $("#new_category").val("");
            $(".newCategory").addClass("d-none");
            $("#addNewCategory").removeClass("d-none");
        });

        $("#addNewSubcategory").click(function() {
            $("#addNewSubcategory").addClass("d-none");
            $(".newSubcategory").removeClass("d-none");
        });

        $(".remove_new_subcategory").click(function() {
            $("#new_subcategory").val("");
            $(".newSubcategory").addClass("d-none");
            $("#addNewSubcategory").removeClass("d-none");
        });
    });
</script>
@endsection