@extends('backend.layout')
@section('content')
    <script src="{{asset('libs/ckeditor/ckeditor.js')}}"></script>
    <div class='card-header'>
        <h1>{{$title ?? ''}}</h1>
    </div>
    @if(Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
            @php
                Session::forget('success');
            @endphp
        </div>
    @endif
    @if(Session::has('errors'))
        <div class="alert alert-danger">
            {{ 'Có lỗi xảy ra (' . implode(', ', $errors->all(':message')) . ')'}}
            @php
                Session::forget('errors');
            @endphp
        </div>
    @endif
    <div class='card-body'>
        <form action="{{route('admin/parameter')}}" method="POST" enctype="multipart/form-data">            
            <button type="submit" class="btn btn-primary btn-custom">Cập nhật</button>
            {{ csrf_field() }}
            <div class="row">
            @foreach ($data as $item)
                @if ($item->parameter_key == 'logo_image')                
                    <div class="col-md-6">
                        <p style="text-transform: uppercase; text-align: center;"><b>Logo:</b></p>
                        <div class="custom-file">
                            <input type="file" name="logo_image" class="custom-file-input" id="logo-upload-image">
                            <label class="upload-image-file-label" for="logo-upload-image" id="logo-upload-image-label">
                                <i class='fa fa-camera'></i>
                            </label>
                            <div class="imgPreviewLogo">
                                @if(isset($item->parameter_value) && $item->parameter_value != '')
                                    <img src="{{asset('images/' . $item->parameter_value)}}" />
                                @endif
                            </div>
                            <span class="text-danger" id="logo-image_ErrorMsg"></span>
                        </div>
                    </div>
                @elseif ($item->parameter_key == 'banner_image')              
                    <div class="col-md-6">
                        <p style="text-transform: uppercase; text-align: center;"><b>Banner:</b></p>
                        <div class="custom-file">
                            <input type="file" name="banner_image" class="custom-file-input" id="banner-upload-image">
                            <label class="upload-image-file-label" for="banner-upload-image" id="banner-upload-image-label">
                                <i class='fa fa-camera'></i>
                            </label>
                            <div class="imgPreviewBanner">
                                @if(isset($item->parameter_value) && $item->parameter_value != '')
                                    <img src="{{asset('images/' . $item->parameter_value)}}" />
                                @endif
                            </div>
                            <span class="text-danger" id="banner-image_ErrorMsg"></span>
                        </div>
                        <div class="text-danger text-center">(*) Kích thước khuyến nghị 626 x 401, định dạng hình: PNG, JPG</div>
                    </div>
                @else
                    <div class="form-group">
                        <label for="{{$item->parameter_key ?? ''}}" style="text-transform: uppercase;">
                            <b>{{$item->parameter_name ?? ''}}</b>
                        </label>
                        <textarea class="form-control" name="{{$item->parameter_key ?? ''}}" id="{{$item->parameter_key ?? ''}}"
                            style="height: 10rem;">{{$item->parameter_value ?? ''}}</textarea>
                    </div>
                @endif
            @endforeach
            </div>
            <br>
            <button type="submit" class="btn btn-primary btn-custom">Cập nhật</button>
        </form>
    </div>

    <script>
        CKEDITOR.editorConfig = function (config) {
            config.versionCheck = false;
        };
        var post_content = CKEDITOR.replace('game_rule', {
            filebrowserBrowseUrl: '{{ asset('libs/ckfinder/ckfinder.html') }}',
            filebrowserImageBrowseUrl: '{{ asset('libs/ckfinder/ckfinder.html?type=Images') }}',
            filebrowserFlashBrowseUrl: '{{ asset('libs/ckfinder/ckfinder.html?type=Flash') }}',
            filebrowserUploadUrl: '{{ asset('libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files') }}',
            filebrowserImageUploadUrl: '{{ asset('libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images') }}',
            filebrowserFlashUploadUrl: '{{ asset('libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash') }}'
        });
        post_content.config.height = 800;
        $(document).ready(function () {
            var multiImgPreview = function (input, imgPreviewPlaceholder, className) {
                if (input.files) {
                    $('.' + className).empty();
                    var filesAmount = input.files.length;
                    for (i = 0; i < filesAmount; i++) {
                        var reader = new FileReader();
                        reader.onload = function (event) {
                            $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                        }
                        reader.readAsDataURL(input.files[i]);
                    }
                }
            };
            $('#logo-upload-image').on('change', function () {
                multiImgPreview(this, 'div.imgPreviewLogo', 'imgPreviewLogo');
            });
            $('#banner-upload-image').on('change', function () {
                multiImgPreview(this, 'div.imgPreviewBanner', 'imgPreviewBanner');
            });
        });
    </script>
    <style>
        #logo-upload-image,
        #banner-upload-image {
            display: none;
        }

        #logo-upload-image-label,
        #banner-upload-image-label {
            font-size: 3rem;
        }

        .custom-file {
            text-align: center;
            min-height: 15rem;
        }

        .imgPreviewLogo {
            width: 8rem;
            height: 8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border: 0.1rem solid;
            border-radius: 1rem;
            margin: auto;
        }

        .imgPreviewLogo img {
            width: auto;
            height: auto;
            max-height: 100%;
            max-width: 100%;
        }

        .imgPreviewBanner {
            width: 8rem;
            height: 8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border: 0.1rem solid;
            border-radius: 1rem;
            margin: auto;
        }

        .imgPreviewBanner img {
            width: auto;
            height: auto;
            max-height: 100%;
            max-width: 100%;
        }
    </style>
@endsection