@extends('layouts.main')

@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>
@endsection

@section('content')
    <div class="main-wrapper">
        <div class="row justify-content-between Header mb-5">
            <div class="col-md-8 d-flex flex-column justify-content-center justify-content-md-start Header-breadcrumbs">

                {{ Breadcrumbs::render('createsetting') }}
                <h2 class="page-title">Create New Setting</h2>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end Header-buttons">

            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('settings.store') }}" method="POST">
            @csrf
            @method('PUT')

            <div class="form-inner-container">
                @csrf
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" name="name" class="form-control name" placeholder="Name">
                </div>

                <div class="form-group">
                    <label>Description:</label>
                    <textarea class="form-control description" style="height:150px" name="description"
                              placeholder="Detail"></textarea>
                </div>

                <div class="form-group">
                    <label for="type">Choose a setting value type:</label>
                    <select class="form-select name" name="type" id="type">
                        <option value="String">String</option>
                        <option value="Boolean">Boolean</option>
                        <option value="Numeric">Numeric</option>
                    </select>
                </div>

                <div class="form-group">
                    <input class="input-string" type="text" placeholder="start typing" name="value" id="input-text">
                    <input class="input-number" type="number" placeholder="type or use the buttons" min="0" name="value"
                           id="input-numeric">
                    <select class="form-select name" name="value" id="input-boolean">
                        <option value="0">false</option>
                        <option value="1">true</option>
                    </select>
                </div>

                <div class="btn-container">
                    <button type="submit" class="btn">Submit</button>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('javascripts')
    <script>

        const inputText = document.querySelector('#input-text')
        const inputNumber = document.querySelector('#input-numeric')
        const inputBoolean = document.querySelector('#input-boolean')
        inputNumber.style.display = 'none'
        inputBoolean.style.display = 'none'
        document.querySelector('#type').addEventListener('change', (e) => {


            const type = e.target.value
            inputText.style.display = 'none'
            inputNumber.style.display = 'none'
            inputBoolean.style.display = 'none'
            if (type === 'Numeric') {
                inputNumber.style.display = 'initial'
            }
            if (type === 'Boolean') {
                inputBoolean.style.display = 'initial'
            }
            if (type === 'String') {
                inputText.style.display = 'initial'
            }
        })

    </script>
@endsection