@extends('admin.layouts.app-setting')
@section('app-setting-content')
<div id="gs-title">
    <div class="grid grid-cols-12">
        <div class="col-span-12">
            <h6 class="mb-4 text-15">{{ translate('General Settings') }}</h6>
        </div>
    </div>

</div>
<div id="gs-content">
    <div class="grid grid-cols-12 my-5">
        <div class="col-span-4">
            <label for="system_name">{{ translate('System Name') }}</label>
        </div>
        <div class="col-span-8">
            <input type="text" id="system_name" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" required>
        </div>
    </div>

    <div class="grid grid-cols-12">
        <div class="col-span-4">
            <label for="system_logo">{{ translate('System Logo') }}</label>
        </div>
        <div class="col-span-8">
            <input type="file" class="cursor-pointer form-file border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500" placeholder="Enter your file">
        </div>
    </div>

    <div class="grid grid-cols-12 mt-5">
        <div class="col-span-4">
            <label for="system_timezone">{{ translate('System Timezone') }}</label>
        </div>
        <div class="col-span-8">
            <select class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices name="choices-single-default" id="choices-single-default">
                <option value="">This is a placeholder</option>
                <option value="Choice 1">Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
            </select>
        </div>
    </div>

    <div class="grid grid-cols-12">
        <div class="col-span-12 mt-5">
            <button type="submit" class="float-right text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Update') }}</button>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script src='{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}'></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>
@endsection