@extends('console_layouts.master')
@section('title')
    聯絡資訊
@endsection
@section('css')
    <link href="{{ asset('assets/libs/@ckeditor/ckeditor5.css') }}" rel="stylesheet">
    <style>
        .image-input {
            display: none;
        }
    </style>
    <link href="{{ asset('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet">
@endsection
@section('content')
    @component('components.breadcrumb')
    @slot('title')
        聯絡資訊
    @endslot
    @endcomponent
    <form id="setting-form" autocomplete="off">
        <div class="row">
            <!-- 聯絡資訊 -->
            <div class="card p-lg-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">聯絡資訊</h5>
                </div>
                <div class="card-body">
                    <!-- 地址 -->
                    <div class="mb-3">
                        <label class="form-label" for="address_input">地址</label>
                        <textarea class="form-control" id="address_input" name="address" rows="2">{{ $setting['address'] ?? '' }}</textarea>
                        <div class="invalid-feedback">請輸入地址</div>
                    </div>
                    <!-- 電話 -->
                    <div class="mb-3">
                        <label class="form-label" for="telephone_input">電話</label>
                        <textarea class="form-control" id="telephone_input" name="telephone" rows="2">{{ $setting['telephone'] ?? '' }}</textarea>
                    </div>
                    <!-- 信箱 -->
                    <div class="mb-3">
                        <label class="form-label" for="email_input">信箱</label>
                        <input type="text" class="form-control" id="email_input" name="email"
                            value="{{ $setting['email'] ?? '' }}" maxlength="100"></input>
                        <div class="invalid-feedback">請輸入信箱</div>
                    </div>
                    
                    <!-- 營業時間 -->
                    {{-- <div class="mb-3">
                        <label class="form-label" for="opening_hours_input">營業時間</label>
                        <input type="text" class="form-control" id="opening_hours_input" name="opening_hours"
                            value="{{ $setting['opening_hours'] ?? '' }}" ></input>
                        <div class="invalid-feedback">請輸入營業時間</div>
                    </div> --}}
                </div>
            </div>
        </div>
        <div class="text-end mb-3">
            <button type="submit" id="save-button" class="btn btn-primary w-sm" onclick="save(event)">儲存</button>
        </div>
        <!-- end row -->
    </form>
@endsection
@section('script')
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <script>

    window.onload = function(){
        var setting_form = document.querySelector('#setting-form');
        setting_form.addEventListener('submit',function(){
            event.preventDefault();
        })
    }

    function save(event) {
            event.preventDefault();

            var form = document.querySelector('#setting-form');
            var form_data = new FormData(form);
            var data = {};

            for (let [key, value] of form_data.entries()) {
                data[key] = value;
            }
            var xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    if (response.success) {
                        successSwal(response.message, function(){ 
                            location.reload();
                        });                        
                    }else{
                        errorSwal(response.message, function(){
                            location.reload();
                        });        
                    }
                }
                else{
                    errorSwal("發生未知的錯誤");  
                }
            }
            xhttp.open("POST", "{{ locale_api('update_contact') }}", true);
            xhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.send(JSON.stringify(data));
        }


    </script>
@endsection