@extends('layouts.admin')

@section('title', "$title ·")

@push('css')
    <style>
        .image-upload-container {
            position: relative;
            width: 200px;
            height: 200px;
        }
        .image-upload-container label {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px dashed #ccc;
        }
        .image-upload-container:hover label {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px dashed #aaa;
        }
        .image-upload-container input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        .image-upload-container .preview {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 2px;
        }
        .image-upload-container .preview img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
@endpush

@section('breadcrumb')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ $title }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <form action="{{ route('settings.update') }}" id="form" method="post" class="col-md-9 form-item">
                <div class="card shadow">
                    <div class="card-header">
                        <h4 class="card-title">Ubah Pengaturan</h4>
                    </div>
                    <div class="card-body">
                        <section>
                            <div class="form-group form-row form-input mb-4">
                                <div class="col-md-3 text-right pr-3">
                                    <label for="input-company_name" class="text-dark">Nama Perusahaan</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" name="company_name" class="form-control" id="input-company_name" value="{{ $settings[0]->value }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="form-group form-row form-input mb-4">
                                <div class="col-md-3 text-right pr-3">
                                    <label for="input-company_address" class="text-dark">Alamat Perusahaan</label>
                                </div>
                                <div class="col-md-9">
                                    <input type="text" name="company_address" class="form-control" id="input-company_address" value="{{ $settings[1]->value }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="form-group form-row form-input">
                                <div class="col-md-3 text-right pr-3">
                                    <label for="input-company_logo" class="text-dark">Logo Perusahaan</label>
                                </div>
                                <div class="col-md-9">
                                    <div class="image-upload-container">
                                        <label for="image" class="d-flex align-items-center justify-content-center flex-column">
                                            <div><span class="fa fa-fw fa-2x fa-download"></span></div>
                                            <div>Pilih gambar</div>
                                        </label>
                                        <div class="preview d-flex justify-content-center align-items-center">
                                            <img src="/storage/{{ $settings[2]->value ? $settings[2]->value : '' }}" alt="">
                                        </div>
                                        <input type="file" name="image" id="image">
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex">
                            <button class="btn btn-primary ml-auto">Simpan</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop

@push('js')
    <script>
        const oFReader = new FileReader();

        function upload(data, callback) {
            const formData = new FormData();
            formData.append('image', data)

            $.ajax({
                headers: {
                    'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`,
                    'Accept': 'application/json'
                },
                url: '{{ route('uploads.store') }}',
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: (data) => {
                  return callback(data.data.url);
                },
                error: (e) => {
                    toastr.error(e.statusText, 'Error', {
                        progressBar: !0,
                        timeOut: 0
                    });

                    return callback(e)
                }
            });

            return callback;
        }

        $(document).ready(() => {
            $('#form').on('submit', function() {
                $('input').blur();
                event.preventDefault();

                $('.custom-loading').fadeIn();

                if ($('#image').get(0).files) {
                    upload($('#image').get(0).files[0], function (data) {
                        $.ajax({
                            headers: {
                                'Authorization': `Bearer ${$('meta[name="bearer-token"]').attr('content')}`,
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            },
                            url: '{{ route('settings.update') }}',
                            type: 'PUT',
                            data: JSON.stringify({
                                company_name: $('#input-company_name').val(),
                                company_address: $('#input-company_address').val(),
                                company_logo: data
                            }),
                            dataType: "json",
                            contentType: false,
                            processData: false,
                            cache: false,
                            async: true,
                            timeout: 40000,
                            beforeSend:() => {
                                $('.btn-submit').attr("disabled", true);
                                $('.btn-spinner').removeClass("d-none");
                                $('.btn-text').addClass("d-none");
                                $('.custom-loading').fadeIn();
                            },
                            complete:() => {
                                $('.btn-submit').attr("disabled", false);
                                $('.btn-spinner').addClass("d-none");
                                $('.btn-text').removeClass("d-none");
                                $('.custom-loading').fadeOut();
                            },
                            success:(data) => {
                                if ($.isEmptyObject(data.errors)) {
                                    Swal.fire({
                                        title: "Berhasil",
                                        html: data.message,
                                        icon: "success",
                                        timer: 2000,
                                        showConfirmButton: false,
                                        timerProgressBar: true,
                                        heightAuto: false,
                                        willOpen: () => {
                                            Swal.showLoading()
                                        }
                                    }).then(() => {
                                        if ($.isEmptyObject(data.url)) {
                                            location.reload();
                                        } else {
                                            location = data.url
                                        }
                                    });
                                } else {
                                    Swal.fire({
                                        title: "Gagal",
                                        html: data.errors,
                                        icon: "error",
                                        heightAuto: false
                                    });
                                }
                            },
                            error:(xhr, status, error) => {
                                const {responseJSON:response} = xhr;
                                if(response.errors) {
                                    for(let form_data in response.errors) {
                                        $('#input-' + form_data).addClass('is-invalid');
                                        $('#input-' + form_data).parents('.form-input').find('.invalid-feedback').html(response.errors[form_data][0]);
                                    }
                                } else {
                                    Swal.fire({
                                        title: "Error",
                                        text: response.message,
                                        icon: "error",
                                        heightAuto: false
                                    });
                                }
                            }
                        });
                    })
                }
            });

            $('#image').on('change', function () {
                oFReader.readAsDataURL(this.files[0]);
            });

            oFReader.onloadstart = function (e) {
                $('.custom-loading').fadeIn();
            }

            oFReader.onloadend = function (e) {
                $('.custom-loading').fadeOut();
                $('.preview img').show().attr('src', e.target.result);
            }
        });
    </script>
@endpush