@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="col-lg-8">
                <div class="card p-lg-3">
                    <div class="card-body">
                        <div class="mb-3">
                            <!-- 網域網址 -->
                            <div class="mb-3">
                                <label class="form-label" for="domain">網站網址（正式）</label>
                                <input type="text" class="form-control" id="domain" name="domain"
                                    value="{{ $setting['domain'] ?? '' }}">
                                <div class="invalid-feedback">請輸入項目名稱∕標題</div>
                            </div>
                            <!-- 商家名稱 -->
                            {{-- <div class="mb-3">
                                <label class="form-label" for="brand_name">商家名稱</label>
                                <input type="text" class="form-control" id="brand_name" name="brand_name"
                                    value="{{ $setting['brand_name'] ?? '' }}">
                                <div class="invalid-feedback">請輸入商家名稱</div>
                            </div> --}}
                            <!-- 版權宣告 -->
                            {{-- <div class="mb-3">
                                <label class="form-label" for="copyright_input">版權宣告</label>
                                <textarea class="form-control" id="copyright_input" name="copyright" rows="2">{{ $setting['copyright'] ?? '' }}</textarea>
                                <div class="invalid-feedback">請輸入版權宣告</div>
                            </div> --}}
                            <!-- 頁尾簡介 -->
                            <div class="mb-3">
                                <label class="form-label" for="footer_introduction_input">頁尾簡介</label>
                                <textarea class="form-control" id="footer_introduction_input" name="footer_introduction" rows="10">{{ $setting['footer_introduction'] ?? '' }}</textarea>
                                <div class="invalid-feedback">請輸入頁尾簡介</div>
                            </div>

                            <!-- 簡介 -->
                            <div class="mb-3">
                            <label class="form-label" for="introduction_input">SEO Description</label>
                                <textarea class="form-control" id="introduction_input" name="introduction" rows="10">{{ $setting['introduction'] ?? '' }}</textarea>
                                <div class="invalid-feedback">請輸入SEO Description</div>
                            </div>

                            <!-- 關鍵字 -->
                            <div class="mb-3">
                            <label class="form-label" for="keywords_input">Title Keywords</label>
                                <input type="text" class="form-control" id="keywords_input" name="keywords" value="{{ $setting['keywords'] ?? '' }}"></input>
                                <div class="invalid-feedback">請輸入Title Keywords</div>
                            </div>

                             <!-- GA嵌入碼 -->
                             <div class="mb-3">
                                <label class="form-label" for="gaCode">GA嵌入碼</label>
                                <textarea class="form-control" id="gaCode" name="gaCode" rows="2">{{ $setting['gaCode'] ?? '' }}</textarea>
                                <div class="invalid-feedback">請輸入GA嵌入碼</div>
                            </div>

                            <!-- 全域CSS -->
                            <div class="mb-3">
                                <label class="form-label" for="allCSS_input">自訂CSS</label>
                                <textarea class="form-control" id="allCSS_input" name="allCSS" rows="10">{{ $setting['allCSS'] ?? '' }}</textarea>
                                <div class="invalid-feedback">自訂CSS</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- end card -->
            <div class="col-lg-4">
                
                <div class="card p-lg-3">
                    <div class="card-header">
                        <h5 class="card-title mb-0">LOGO</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="favicon1Upload" class="form-label">favicon.ico</label>
                            <div id="favicon1Upload" class="image_edit_wrapper">
                                <div class="row">
                                    <div class="col-2 d-flex align-items-center me-1">
                                        <div class="image-upload-button" onclick="image_upload_click(this)">
                                            <div class="btn btn-success rounded-circle px-1">
                                                <i class="icon ri-upload-2-fill text-light p-2 w-50"></i>
                                            </div>

                                            <input type="file" name="images[]" class="image-input" accept=".ico"
                                                onchange="icon_upload_change(this)">
                                        </div>
                                    </div>
                                    <div class="preview col-9 d-flex align-items-center">
                                        <div class="image_preview btn btn-light">
                                                <img class="img-fluid"
                                                    src="{{ locale_storage('images/favicon.ico') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="logo1Upload" class="form-label">LOGO1</label>
                            <div id="logo1Upload" class="image_edit_wrapper">
                                <div class="row">
                                    <div class="col-2 d-flex align-items-center me-1">
                                        <div class="image-upload-button" onclick="image_upload_click(this)">
                                            <div class="btn btn-success rounded-circle px-1">
                                                <i class="icon ri-upload-2-fill text-light p-2 w-50"></i>
                                            </div>

                                            <input type="file" name="images[]" class="image-input" accept="image/ico"
                                                onchange="image_upload_change(this)">
                                        </div>
                                    </div>
                                    <div class="preview col-9 d-flex align-items-center">
                                        <div class="image_preview btn btn-light">
                                            @if (isset($setting['logo1_filename']) && file_exists(public_path('assets/' . $setting['logo1_filename'])))
                                                <img class="img-fluid"
                                                    src="{{ locale_storage('images/' . $setting['logo1_filename']) }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="logo2Upload" class="form-label">LOGO2</label>
                            <div id="logo2Upload" class="image_edit_wrapper">
                                <div class="row">
                                    <div class="col-2 d-flex align-items-center me-1">
                                        <div class="image-upload-button" onclick="image_upload_click(this)">
                                            <div class="btn btn-success rounded-circle px-1">
                                                <i class="icon ri-upload-2-fill text-light p-2 w-50"></i>
                                            </div>
                                            <input type="file" name="images[]" class="image-input" accept="image/*"
                                                onchange="image_upload_change(this)">
                                        </div>
                                    </div>
                                    <div class="preview col-9 d-flex align-items-center">
                                        <div class="image_preview btn btn-light">
                                            @if (isset($setting['logo2_filename']))
                                                <img class="img-fluid"
                                                    src="{{ locale_storage('images/' . $setting['logo2_filename']) }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
            </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;
            }

            data['favicon_filename'] = get_favicon() ? get_favicon() : "";
            data['logo1_filename'] = get_Logo1_name() ? get_Logo1_name() : "";
            data['logo2_filename'] = get_Logo2_name() ? get_Logo2_name() : "";

            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_setting') }}", true);
            xhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.send(JSON.stringify(data));
        }



    function get_favicon() {
            var favicon = document.querySelector('#favicon1Upload').querySelector('.image_preview img');
            if (favicon && favicon.dataset.id) {
                return favicon.dataset.id;
            } else {
                return "";
            }
        }

        function get_Logo1_name() {
            var logo1 = document.querySelector('#logo1Upload').querySelector('.image_preview img');
            if (logo1 && logo1.dataset.id) {
                return logo1.dataset.id;
            } else {
                return "";
            }
        }

        function get_Logo2_name() {
            var logo2 = document.querySelector('#logo2Upload').querySelector('.image_preview img');
            if (logo2 && logo2.dataset.id) {
                return logo2.dataset.id;
            } else {
                return "";
            }
        }

        function image_upload_click(dom) {
            dom.querySelector('.image-input').click();
        }

        function icon_upload_change(image_upload) {
            var formData = new FormData();
            formData.append('favicon', image_upload.files[0]);

            var xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.status === 200 && this.responseText) { // 確認狀態碼是 200
                    var response = JSON.parse(this.responseText);
                    var preview_area = image_upload.closest('.image_edit_wrapper').querySelector('.image_preview');
                    var preview_image = make_preview_image(response.file_path, response.file_name + response.extension);
                    preview_area.replaceWith(preview_image);
                } else {
                    alert("上傳失敗");
                }
            }
            xhttp.open("POST", "{{ locale_api('upload_favicon') }}", true);
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.send(formData);

        }

        function image_upload_change(image_upload) {

        var preview = image_upload.closest('.image_edit_wrapper').querySelector('.preview');
        var existing_image_count = preview.querySelectorAll('.image_preview').length;


        for (var i = 0; i < image_upload.files.length; i++) {

            var formData = new FormData();
            formData.append('image', image_upload.files[i]);

            var xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.status === 200 && this.responseText) { // 確認狀態碼是 200
                    var response = JSON.parse(this.responseText);
                    var preview_area = image_upload.closest('.image_edit_wrapper').querySelector('.image_preview');
                    var preview_image = make_preview_image(response.file_path, response.file_name + response
                        .extension);
                    preview_area.replaceWith(preview_image);

                    image_upload.value = '';
                } else {
                    alert("上傳失敗");
                }
            }
            xhttp.open("POST", "{{ locale_api('upload_image') }}", true);
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{ csrf_token() }}");
            xhttp.send(formData);
        }

        }

        function make_preview_image(file_path, file_name) {

        var image_dom = document.createElement('div');
        image_dom.className = "image_preview btn btn-light";
        image_dom.innerHTML = `
        <img class="img-fluid" src="${file_path}" data-id="${file_name}" alt="圖片"> `;
        return image_dom;
        }
    </script>
@endsection