@extends('admin.layout.layout')
@section('content')
<main class="main">
    <section class="section-box shop-template mt-60">
        <div class="container">
            <div class="row mb-100">
                <div class="col-lg-1"></div>
                <div class="col-lg-5">
                    {{-- <h3>Categories</h3> --}}
                    <p class="font-md color-gray-500">{{ $title }}</p>
                    @if (Session::has('error_message'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Error! </strong> {{ Session::get('error_message')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif
                    @if (Session::has('success_message'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Well done! </strong> {{ Session::get('success_message')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    @if ($errors->any())

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    @endif
                    <form action="{{ route('save-category-params')}}" method="post">@csrf
                        <div class="form-register mt-30 mb-30">
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Select Category *</label><br>
                                <select name="category_id"  class="form-maker">
                                    <option value="">Select</option>
                                    @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"> {{ $category->section->name ?? "" }} - {{ $category->category_name ?? ""}} </option>
                                    @endforeach

                                </select>
                            </div>
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Select Section *</label><br>
                                <select name="display" required class="form-maker">
                                    <option value="basic">Basic</option>
                                    <option value="more">More</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Field name *</label>
                                <input type="text" name="name" class="form-control" id="name" required>
                            </div>

                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Field Type *</label><br>
                                <select name="type" id="type" required class="form-maker">
                                    <option value="text">Text</option>
                                    <option value="number">Number</option>
                                    <option value="select">Select</option>
                                    <option value="file">File</option>
                                </select>
                            </div>
                            <div class="form-group" id="optionsField" style="display:none;">
                                <label class="mb-5 font-sm color-gray-700" for="options">Options (comma separated)</label>
                                <input type="text" name="options" class="form-control" id="options">
                            </div>
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700" for="label">Field Label *</label>
                                <input type="text" name="label" class="form-control" id="label" required>
                            </div>
                            <div class="form-group" id="holderField" style="display:none;">
                                <label class="mb-5 font-sm color-gray-700" for="label">Field Place Holder</label>
                                <input type="text" name="place_holder" class="form-control" id="label" >
                            </div>
                            <input type="hidden" name="required" value="0">
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700" for="required">Required</label>
                                <input type="checkbox" name="required" id="required" value="1">
                            </div>
                            <div class="form-group">
                                <input class="font-md-bold btn btn-buy" type="submit" value="Submit">
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </section>
    <section class="section-box box-newsletter">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-7 col-sm-12">
                    <h3 class="color-white">Subscrible &amp; Get <span class="color-warning">10%</span> Discount</h3>
                    <p class="font-lg color-white">Get E-mail updates about our latest shop and <span class="font-lg-bold">special offers.</span></p>
                </div>
                <div class="col-lg-4 col-md-5 col-sm-12">
                    <div class="box-form-newsletter mt-15">
                        <form class="form-newsletter">
                            <input class="input-newsletter font-xs" value="" placeholder="Your email Address">
                            <button class="btn btn-brand-2">Sign Up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

@endsection

@section('js')
<script>
    document.getElementById('holderField').style.display = 'block';
    document.getElementById('type').addEventListener('change', function() {
        if (this.value === 'select') {
            document.getElementById('optionsField').style.display = 'block';
            document.getElementById('holderField').style.display = 'none';
        } else {
            document.getElementById('optionsField').style.display = 'none';
            document.getElementById('holderField').style.display = 'block';
        }
    });
</script>
@endsection