@extends('console_layouts.master')
@section('title')
    第三方連結
@endsection
@section('css')
@endsection
@section('content')
    @component('components.breadcrumb')
    @slot('title')
        第三方連結
    @endslot
    @endcomponent
    <form id="setting-form" autocomplete="off">
        <div class="row">
            <div class="">
                <div class="card p-lg-3">
                    <div class="card-body">
                        <div class="mb-3">
                            {{-- <!-- Facebook即時聯絡 -->
                            <div class="mb-3">
                                <div>
                                    <label class="form-label" for="moFBContact">Facebook即時聯絡</label>
                                </div>
                                <input type="text" class="form-control" id="moFBContact" name="moFBContact"
                                    value="{{ $setting['moFBContact'] ?? '' }}"></input>
                                <div class="invalid-feedback">請輸入Facebook即時聯絡</div>
                            </div> --}}
                            <!-- Facebook粉絲專頁 -->
                            <div class="mb-3">
                                <label class="form-label" for="facebook">Facebook粉絲專頁</label>
                                <input type="text" class="form-control" id="facebook" name="facebook"
                                    value="{{ $setting['facebook'] ?? '' }}"></input>
                                <div class="invalid-feedback">請輸入Facebook粉絲專頁</div>
                            </div>

                            <!-- LINE -->
                            <div class="mb-3">
                                <label class="form-label" for="line">LINE</label>   
                                <input type="text" class="form-control" id="line" name="line"
                                    value="{{ $setting['line'] ?? '' }}" ></input>
                                <div class="invalid-feedback">請輸入LINE</div>
                            </div>

                            {{-- <!-- YouTube -->
                            <div class="mb-3">
                                <label class="form-label" for="youtube">YouTube</label>
                                <input type="text" class="form-control" id="youtube" name="youtube"
                                    value="{{ $setting['youtube'] ?? '' }}" ></input>
                                <div class="invalid-feedback">請輸入YouTube</div>
                            </div> --}}

                            {{-- <!-- Instagram -->
                            <div class="mb-3">
                                <label class="form-label" for="instagram">Instagram</label>
                                <input type="text" class="form-control" id="instagram" name="instagram"
                                    value="{{ $setting['instagram'] ?? '' }}" ></input>
                                <div class="invalid-feedback">請輸入Instagram</div>
                            </div> --}}

                            {{-- <!-- WhatsApp -->
                            <div class="mb-3">
                                <label class="form-label" for="whatsapp">Whatsapp</label>
                                <input type="text" class="form-control" id="whatsapp" name="whatsapp"
                                    value="{{ $setting['whatsapp'] ?? '' }}" ></input>
                                <div class="invalid-feedback">請輸入Whatsapp</div>
                            </div> --}}
                            
                           
                            <!-- Google地圖網址 -->
                            <div class="mb-3">
                                <label class="form-label" for="google_map_url_input">Google地圖網址</label>
                                <textarea class="form-control" id="google_map_url_input" name="google_map_url" rows="3">{{ $setting['google_map_url'] ?? '' }}</textarea>
                                <div class="invalid-feedback">請輸入Google地圖網址</div>
                            </div>
                                                        
                                                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end card -->
        </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_thirdPart_setting') }}", true);
            xhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.send(JSON.stringify(data));
        }



    </script>
@endsection