@extends('layouts.master')

@section('content')
<div class="container-xxl py-3">
    <div class="text-center">
        <p class="mb-0">Formulir Ubah</p>
        <h3 class="fw-bolder">PENGATURAN</h3>
    </div>
    <form method="POST" action="{{ route('settings.update') }}">
        @csrf
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow mb-2">
                    <div class="card-body">
                        <div class="form-floating mb-3">
                            <input id="app-name" type="text" class="form-control" name="settings[app][name]" value="{{ settings('app.name') }}" placeholder="Nama Aplikasi"/>
                            <label for="app-name">Nama Aplikasi</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="brand-title" type="text" class="form-control" name="settings[brand][title]" value="{{ settings('brand.title') }}" placeholder="Nama Organisasi"/>
                            <label for="brand-title">Nama Organisasi</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="brand-subtitle" type="text" class="form-control" name="settings[brand][subtitle]" value="{{ settings('brand.subtitle') }}" placeholder="Subjudul Organisasi"/>
                            <label for="brand-subtitle">Subjudul Organisasi</label>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input id="map-center-latitude" type="text" class="form-control" name="settings[map][center][latitude]" value="{{ settings('map.center.latitude') }}" placeholder="Latitude"/>
                                    <label for="map-center-latitude">Latitude</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input id="map-center-longitude" type="text" class="form-control" name="settings[map][center][longitude]" value="{{ settings('map.center.longitude') }}" placeholder="Longitude"/>
                                    <label for="map-center-longitude">Longitude</label>
                                </div>
                            </div>
                        </div>
                        @role('Root')
                        <hr>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-account-id" type="text" class="form-control" name="settings[foxlogger][account][id]" value="{{ settings('foxlogger.account.id') }}" placeholder="id Server GPS" />
                            <label for="foxlogger-account-id">Server GPS ID</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-account-email" type="text" class="form-control" name="settings[foxlogger][account][email]" value="{{ settings('foxlogger.account.email') }}" placeholder="Email Server GPS" />
                            <label for="foxlogger-account-email">Server GPS Email</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-account-password" type="text" class="form-control" name="settings[foxlogger][account][password]" value="{{ settings('foxlogger.account.password') }}" placeholder="Password Server GPS" />
                            <label for="foxlogger-account-password">Server GPS Password</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-api-username" type="text" class="form-control" name="settings[foxlogger][api][username]" value="{{ settings('foxlogger.api.username') }}" placeholder="Server API Username" />
                            <label for="foxlogger-api-username">Server API Username</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-api-otp" type="text" class="form-control" name="settings[foxlogger][api][otp]" value="{{ settings('foxlogger.api.otp') }}" placeholder="Server API OTP" />
                            <label for="foxlogger-api-otp">Server API OTP</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-api-access-token" type="text" class="form-control" name="settings[foxlogger][api][access-token]" value="{{ settings('foxlogger.api.access-token') }}" placeholder="Server API Token" />
                            <label for="foxlogger-api-access-token">Server API Access Token</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input id="foxlogger-api-otp" type="text" class="form-control" name="settings[foxlogger][api][refresh-token]" value="{{ settings('foxlogger.api.refresh-token') }}" placeholder="Server API Refresh Token" />
                            <label for="foxlogger-api-otp">Server API Refresh Token</label>
                        </div>
                        @endrole
                    </div>
                </div>
                <div class="d-flex justify-content-end">
                    @role('Root')
                    <button id="btn-gps-login" type="button" class="btn btn-light shadow me-2">
                        <i class="fa-regular fa-fw fa-save"></i> GET API Username
                    </button>
                    <button id="btn-api-token"  type="button" class="btn btn-light shadow me-2">
                        <i class="fa-regular fa-fw fa-save"></i> GET API Token
                    </button>
                    @endrole
                    <button type="submit" class="btn btn-primary shadow"><i class="fa-regular fa-fw fa-save"></i> Simpan</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('js')
<script>
$(()=>{
    'use strict'

    $(`#btn-gps-login`).click((e)=>{
        e.preventDefault();
        $.get(`{{ route('foxlogger.login') }}`, function(response){
            createAlert({
                status : 'success',
                message : 'Harap tunggu'
            });
            setTimeout(() => {
                window.location.reload();
            }, 3000);
        });
    });

    $(`#btn-api-token`).click((e)=>{
        e.preventDefault();
        $.get(`{{ route('foxlogger.token') }}`, function(response){
            createAlert({
                status : 'success',
                message : 'Harap tunggu'
            });
            setTimeout(() => {
                window.location.reload();
            }, 3000);
        });
    });
});
</script>
@endpush