@extends('backend.dashboard.layout.master')
@section('content')

@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="container-xxl">


        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">

                        @if (isset($method) && $method == 'PUT')
                        {{ translate('Edit Settings') }}
                        @else
                        {{ translate('Create Settings') }}
                        @endif

                    </h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->

            </div>
            <!--end::Toolbar container-->
        </div>

        <div class="col-lg-12">
            <div class="card">

                <div class="card-body">
                    <form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
                        {{ csrf_field() }}
                        @if (isset($method))
                        @method('PUT')
                        @endif


                        <div class="row">
                            <div class="col-4">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="validationTooltipUsername">{{ translate('Key') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="key" id="validationTooltipUsername" value="{{ old('key', $Setting->key) }}" required>
                                        <div class="invalid-tooltip">
                                            {{ translate('Please provide a valid key') }} .
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-4">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="validationTooltipStatus">{{ translate('Type') }}</label>
                                    <div class="input-group">
                                        <select name="type" class="form-control" required>
                                            <option value="text">{{ translate('Text') }}</option>
                                            <option value="email">{{ translate('Email') }}</option>
                                            <option value="number">{{ translate('Number') }}</option>
                                            <option value="date">{{ translate('Date') }}</option>
                                            <option value="file">{{ translate('File') }} (Image/Logo)</option>
                                            <option value="radio">{{ translate('Radio') }}</option>
                                            <option value="checkbox">{{ translate('Checkbox') }}</option>
                                            <option value="textarea">{{ translate('Textarea') }}</option>
                                        </select>

                                        <div class="invalid-tooltip">
                                            {{ translate('Please select a valid type') }} .
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-4">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="validationTooltipUsername">{{ translate('Value') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="value" id="validationTooltipUsername" value="{{ old('value', $Setting->value) }}" required>
                                        <div class="invalid-tooltip">
                                            {{ translate('Please provide a valid value') }} .
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>




                        <button onclick="location.href='{{route('Setting.index')}}'" class="btn btn-dark"  type="button">{{ translate('Back') }}</button>

                        <button class="btn btn-primary" id="submitBtn" type="submit">{{ translate('Submit form') }}</button>
                    </form>



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


</div>
<script>
    document.getElementById('submitBtn').addEventListener('click', function(event) {
        var form = document.getElementById('myForm');
        if (!form.checkValidity()) {
            event.preventDefault();
            form.classList.add('was-validated');
            return;
        }

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = 'Loading...';

        setTimeout(function() {
            form.submit();
        }, 1000);

        event.preventDefault();
    });









    function previewImage(event) {
        var file = event.target.files[0];
        var previewContainer = document.getElementById('imagePreviewContainer');
        var imagePreview = document.getElementById('imagePreview');

        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                previewContainer.style.display = 'block';
            };

            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }

</script>


@endsection