@extends('layouts.app')
@section('title_header')
    Settings
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Settings', '/settings']]" />
@endsection

@push('style')
@endpush

@section('content')
    <section>
        <form id="form-settings">
            @csrf
            <div class="card card-border bg-white">
                <div class="card-body">
                    <div class="grid lg:grid-cols-2 grid-cols-1 gap-3">
                        <div>
                            <div class="mb-2">
                                <label for="name-app" class="label">Name App</label>
                            </div>
                            <input type="text" class="input w-full" name="name_app" id="name-app">
                        </div>
                        <div>
                            <div class="mb-2">
                                <label for="description-app" class="label">Description App</label>
                            </div>
                            <input type="text" class="input w-full" name="description_app" id="description-app">
                        </div>
                    </div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-info text-white"> <i data-lucide="check"></i>
                            Submit</button>
                        <button type="button" class="btn btn-error text-white" id="btn-cancel"> <i
                                data-lucide="x"></i> Cancel</button>
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            fetchAppSettings();

            function fetchAppSettings() {
                $.get('/api/app-settings', function(res) {
                    if (res.data) {
                        $('#name-app').val(res.data.name_app);
                        $('#description-app').val(res.data.description_app);
                    }
                }).fail(() => {
                    toastr.error('Gagal memuat data settings.');
                });
            }

            $('#form-settings').on('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);

                $.ajax({
                    url: '/api/app-settings/create-or-update',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        toastr.success(res.message || 'Berhasil menyimpan!');
                        fetchAppSettings();
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON?.message || 'Gagal menyimpan data.');
                    }
                });
            });

            $('#btn-cancel').on('click', function() {
                $('#form-settings')[0].reset();
            });
        });
    </script>
@endpush