@extends('layouts.administrator.master')

@section('title')
    {{ __('Pengarutan Umum') }}
@endsection

@section('content')
    <div class="nk-content-body">
        <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">{{ __('Pengaturan Umum') }}</h3>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('dashboard') }}" class="btn btn-primary btn-sm">
                        <em class="icon ni ni-arrow-left"></em>
                        {{ __('Kembali') }}
                    </a>
                </div>
            </div>
        </div>
        <div class="nk-block">
            <div class="card card-preview">
                <div class="card-inner pt-0">
                    <ul class="nav nav-tabs">
                        <li class="nav-item" role="presentation">
                            <a id="tab1" class="nav-link active" data-bs-toggle="tab" href="#tabWebsite"
                                aria-selected="true" role="tab">
                                <span>Website</span>
                            </a>
                        </li>

                        <li class="nav-item" role="presentation">
                            <a id="tab2" class="nav-link" data-bs-toggle="tab" href="#tabDonasi" aria-selected="false"
                                tabindex="-1" role="tab">
                                <span>Donasi</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tabWebsite" role="tabpanel">
                            <form id="formWebsite" class="form-settings">
                                @csrf
                                <div class="row g-3 align-center">

                                    {{-- Favicon --}}

                                    <div class="col-sm-4">
                                        <div class="row g-3 align-center">
                                            <div class="col-lg-5">
                                                <div class="form-group">
                                                    <label class="form-label" for="site-name">Favicon</label>
                                                    <span class="form-note">Logo favicon full warna</span>
                                                </div>
                                            </div>
                                            <div class="col-lg-7">
                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <div class="form-control-wrap py-2">

                                                            @if ($favicon->value)
                                                                <img id="favicon"
                                                                    src="{{ asset('uploads/setting/general/images/' . $favicon->value) }}"
                                                                    class="logo-preview">
                                                            @else
                                                                <img id="favicon"
                                                                    src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png"
                                                                    class="logo-preview">
                                                            @endif

                                                            <div class="form-file pt-2">
                                                                <input type="file"
                                                                    accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                                    id="customFileFavicon"
                                                                    onchange="document.getElementById('favicon').src = window.URL.createObjectURL(this.files[0])"
                                                                    name="favicon">
                                                            </div>

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

                                    {{-- Logo Default --}}

                                    <div class="col-sm-4">
                                        <div class="row g-3 align-center">
                                            <div class="col-lg-5">
                                                <div class="form-group">
                                                    <label class="form-label" for="site-name">Logo Default</label>
                                                    <span class="form-note">Logo default dengan full warna</span>
                                                </div>
                                            </div>
                                            <div class="col-lg-7">
                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <div class="form-control-wrap py-2">

                                                            @if ($logoDefault->value)
                                                                <img id="logoDefault"
                                                                    src="{{ asset('uploads/setting/general/images/' . $logoDefault->value) }}"
                                                                    class="logo-preview">
                                                            @else
                                                                <img id="logoDefault"
                                                                    src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png"
                                                                    class="logo-preview">
                                                            @endif

                                                            <div class="form-file pt-2">
                                                                <input type="file"
                                                                    accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                                    id="customFileLogoDefault"
                                                                    onchange="document.getElementById('logoDefault').src = window.URL.createObjectURL(this.files[0])"
                                                                    name="logoDefault">
                                                            </div>

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

                                    {{-- Logo Dark --}}

                                    <div class="col-sm-4">
                                        <div class="row g-3 align-center">
                                            <div class="col-lg-5">
                                                <div class="form-group">
                                                    <label class="form-label" for="site-name">Logo Dark Mode</label>
                                                    <span class="form-note">Logo dark mode dengan warna putih</span>
                                                </div>
                                            </div>
                                            <div class="col-lg-7">
                                                <div class="form-group">
                                                    <div class="form-control-wrap py-2 ">

                                                        @if ($logoDark->value)
                                                            <img id="logoDark" style="background-color: gray"
                                                                src="{{ asset('uploads/setting/general/images/' . $logoDark->value) }}"
                                                                class="logo-preview">
                                                        @else
                                                            <img id="logoDark"
                                                                src="https://d30y9cdsu7xlg0.cloudfront.net/png/138926-200.png"
                                                                class="logo-preview">
                                                        @endif

                                                        <div class="form-file pt-2">
                                                            <input type="file"
                                                                accept="image/png, image/gif, image/jpeg, image/svg+xml"
                                                                id="customFileLogoDark"
                                                                onchange="document.getElementById('logoDark').src = window.URL.createObjectURL(this.files[0])"
                                                                name="logoDark">
                                                        </div>

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

                                <br>

                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label class="form-label" for="site-name">Nama Website</label>
                                            <span class="form-note">Nama situs website</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="form-group">
                                            <div class="form-control-wrap">
                                                <input type="text" class="form-control" id="site-name"
                                                    name="web_name" value="{{ $webName->value }}">
                                                <small class="text-danger web_name_err"></small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br>
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label class="form-label" for="site-name">Deskripsi website</label>
                                            <span class="form-note">Informasi deskripsi website.</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="form-group">
                                            <div class="form-control-wrap">
                                                <div class="form-control-wrap">
                                                    <textarea name="web_description" class="form-control" placeholder="Deskripsi">{{ $webDescription->value }}</textarea>
                                                    <small class="text-danger web_description_err"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br>
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label class="form-label" for="site-name">Syarat dan Ketentuan</label>
                                            <span class="form-note">Syarat dan Ketentuan registrasi PERTAPINDO.</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="form-group">
                                            <div class="form-control-wrap">
                                                <div class="form-control-wrap">
                                                    <textarea name="terms_and_conditions" id="" class="summernote-basic" cols="30" rows="10" required>{{ $termsAndConditions->value }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br>
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label class="form-label" for="site-off">Mode Pemeliharaan</label>
                                            <span class="form-note">Aktifkan untuk membuat situs web menjadi
                                                offline.</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="form-group">
                                            <div class="custom-control custom-switch ">
                                                <input type="checkbox"  class="custom-control-input"
                                                    name="maintenance" id="site-off" value="{{ $maintenance->value }}">
                                                <label id="site-off-label" class="custom-control-label maintenance_label"
                                                    for="site-off">Offline</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label class="form-label" for="site-copyright">Versi</label>
                                            <span class="form-note">Informasi versi situs </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="form-group">
                                            <div class="form-control-wrap">
                                                <span class="text-primary fw-bold">Versi 1.0</span> - Pembaruan terakhir 01
                                                Desember 2023
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label class="form-label" for="site-copyright">Pembuat</label>
                                            <span class="form-note">Informasi pembuat website </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="form-group">
                                            <div class="form-control-wrap">
                                                <span class="text-primary fw-bold"><span class="fw-bold">PT
                                                        ELCI Digital Indonesia</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <div class="col-lg-7">
                                        <div class="form-group mt-2">
                                            <button onclick="btn_update_web()" type="button"
                                                class="btn btn-lg btn-primary">Update</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="tabDonasi" role="tabpanel">
                            <form id="formDonasi">
                                @csrf
                                <div class="row mb-3">
                                    <div class="col-12 col-lg-6">
                                        <div class="form-group">
                                            <label class="mb-1">{{ __('Minimum Donasi') }}</label>
                                            <div class="form-control-wrap">
                                                <div class="form-icon form-icon-left">{{ __('Rp.') }}</div>
                                                <input type="text" class="form-control" name="minimum_donasi"
                                                    value="{{ number_format($minimum_donasi->value, 0, '.', '.') }}"
                                                    required>
                                            </div>
                                            <small class="text-danger minimum_donasi_err"></small>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-6">
                                        <div class="form-group">
                                            <label class="mb-1">{{ __('Maximum Donasi') }}</label>
                                            <div class="form-control-wrap">
                                                <div class="form-icon form-icon-left">{{ __('Rp.') }}</div>
                                                <input type="text" class="form-control" name="maximum_donasi"
                                                    value="{{ number_format($maximum_donasi->value, 0, '.', '.') }}"
                                                    required>
                                            </div>
                                            <small class="text-danger maximum_donasi_err"></small>
                                        </div>
                                    </div>
                                </div>
                                <button onclick="btn_update_donasi()" class="btn btn-primary"
                                    type="button">Proses</button>
                            </form>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <link rel="stylesheet" href="{{ asset('') }}src/assets/css/editors/summernote.css?ver=3.1.3">
    <script src="{{ asset('') }}src/assets/js/libs/editors/summernote.js?ver=3.1.3"></script>
    <script src="{{ asset('') }}src/assets/js/editors.js?ver=3.1.3"></script>
@endpush

@push('script')
    <script>
        $(document).ready(function() {
            $('[name=minimum_donasi], [name=maximum_donasi]').on('input', function() {
                var cleanValue = $(this).val().replace(/[^0-9]/g, '');
                var formattedValue = cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                $(this).val(formattedValue);
            });
        });

        $('#site-off').change(function() {
            $(this).val((this.checked) ? '1' : '0');
            $('#site-off-label').html((this.checked) ? "Online" : "Offline");
        })

        function btn_update_web() {
            var formData = new FormData($('#formWebsite')[0]);
            $.ajax({
                url: '{{ route('admin.generalSetting.website.process') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(r) {
                    NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                        position: "top-right"
                    });
                },
                error: function(error) {
                    Swal.fire({
                        title: 'Error!',
                        text: error.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        function btn_update_donasi() {
            var formData = new FormData($('#formDonasi')[0]);
            $.ajax({
                url: '{{ route('admin.generalSetting.donasi.process') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(r) {
                    NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                        position: "top-right"
                    });
                },
                error: function(error) {
                    Swal.fire({
                        title: 'Error!',
                        text: error.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        // $("#formDonasi").submit(function(e) {
        //     e.preventDefault();
        //     $.ajax({
        //         url: "{{ route('admin.generalSetting.donasi.process') }}",
        //         type: "POST",
        //         data: $('#formDonasi').serialize(),
        //         beforeSend: function() {
        //             loadSpin(true, '#formDonasi');
        //         },
        //         complete: function() {
        //             loadSpin(false, '#formDonasi');
        //         },
        //         dataType: "jSON",
        //         error: function(request, status, error) {
        //             showResponseHeader(request);
        //         },
        //         success: function(r) {
        //             NioApp.Toast(r.message, (r.success ? "success" : "error"), {
        //                 position: "top-right"
        //             });

        //             if (r.success) {
        //                 setTimeout(() => {
        //                     location.href =
        //                         "{{ route('admin.settings.generalSettings.index') }}?tab=donasi";
        //                 }, 2000);
        //             }
        //         }
        //     })
        // });
    </script>
@endpush