@extends('backend::layouts.app')

@section('content')
    <div class="container">
        <x-ui.breadcrumb title="Settings">
            <span>Settings</span>
        </x-ui.breadcrumb>

        <div class="text-end mb-3">
            <a class="btn btn-outline-dark ms-2" href="{{ route('backend.developer.index') }}">
                <i class="fa fa-cog fa-fw me-1"></i>Developer Tool
            </a>
            <a class="btn btn-outline-dark ms-2" href="{{ route('backend.cron.index') }}">
                <i class="fa fa-clock-o fa-fw me-1"></i>Tasks
            </a>
        </div>

        @include('backend-setting::settings.inc.nav')
    </div>
@endsection

@push('inline-scripts')
    <script>
        const rules = JSON.parse('{!! json_encode($rules) !!}');
        const messages = {};

        function submitHandler(form) {
            const $form = $(form);
            const $btn = $form.find('button[type=submit]');

            $.ajax({
                type: 'POST',
                url: $form.attr('action'),
                data: $form.serialize(),
                async: true,
                success: (resp) => {
                    const {status, message} = resp;

                    if (status) {
                        $.toast({icon: 'success', text: message});
                    } else {
                        $.toast({icon: 'error', text: message});
                    }
                },
                error: (resp) => {
                    $.toast({icon: 'error', text: 'Error while updated'});
                },
                beforeSend: () => {
                    $btn
                        .text('Updating...')
                        .addClass('disabled')
                        .attr('disabled', true)

                },
                complete: () => {
                    $btn
                        .text('Update')
                        .removeClass('disabled')
                        .attr('disabled', false)
                },
            });
        }

        $('#form-setting').validate({
            rules,
            messages,
            submitHandler,
            errorPlacement: function (e, a) {
                $(a).closest(".form-group").find('.error-placement').append(e)
            },
        });
    </script>
@endpush