@section('extra_header')@parent<link rel="stylesheet" href="/css/public_style/picture.css" media="screen and (prefers-color-scheme: light)">@stop@section('extra_header')@parent<link rel="stylesheet" href="/css/public_style_dark/picture.css" media="screen and (prefers-color-scheme: dark)">@stop@section('extra_header')@parent<script src="/js/public_js/pic.js"></script>@stop@section('extra_header')@parent<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>@stop@section('extra_header')@parent<link rel="stylesheet" href="/universal/filepond/css/filepond.min.css">@stop@section('extra_header')@parent<link rel="stylesheet" href="/universal/filepond/css/filepond-plugin-image-preview.css">@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-file-validate-type.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-file-validate-size.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-image-crop.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-image-preview.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-image-resize.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-image-transform.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond-plugin-image-exif-orientation.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond.min.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/js/filepond.jquery.js"></script>@stop@section('body_begin')@parent<script src="/universal/filepond/locale/th-TH.js"></script>@stop
<div class="row justify-content-center my-2"><div class="col-xl-8 col-lg-9 col-md-10"><div class="section-title text-center"><div class="container"><h2>อัปโหลดรูปภาพ</h2><p>ฝากรูปภาพในเว็บไซต์ Smilekrub Network (ขนาดไม่เกิน 10MB) รองรับเฉพาะ .jpg .png และ .gif</p></div></div></div></div><div class="container my-5" data-container="file-uploader">
    <p class="note note-info"><strong>วิธีใช้งาน:</strong> หากต้องการแปลงชนิดไฟล์ แปลงสัดส่วน และปรับความละเอียดรูปภาพ กรุณาตั้งค่าก่อนอัปโหลดรูปภาพมายังเว็บไซต์</p>    <button class="btn btn-success btn-lg w-100" data-action="upload-all"><span>เริ่มอัปโหลดไฟล์</span></button>

    <div class="picture-upload-container my-5 row flex-column-reverse flex-lg-row">
        <div class="picture-uploader col-12 col-lg-8 col-xl-9">
            <input name="uploader" type="file" multiple
                   id="uploader"
                   accept="image/jpeg, image/png, image/gif"
                   data-allow-reorder="true"
                   data-max-file-size="4MB">
        </div>
        <div class="picture-settings col-12 col-lg-4 col-xl-3">
            <label for="picture_convert_file" class="form-label">แปลงชนิดไฟล์</label>
            <select class="form-select" title="แปลงชนิดรูปภาพ" id="picture_convert_file">
                <optgroup label="ต้นฉบับ">
                    <option value="DEFAULT">ต้นฉบับ</option>
                </optgroup>
                <optgroup label="อื่นๆ">
                    <option value="JPEG">JPEG</option>
                    <option value="PNG">PNG</option>
                    <option value="WEBP" selected>WEBP</option>
                </optgroup>
            </select>

            <label for="picture_convert_file" class="form-label mt-3">แปลงสัดส่วน</label>
            <select class="form-select" title="แปลงสัดส่วน" id="picture_convert_ratio">
                <optgroup label="ต้นฉบับ">
                    <option value="DEFAULT" selected>ต้นฉบับ</option>
                </optgroup>
                <optgroup label="อื่นๆ">
                    <option value="1:1">1:1</option>
                    <option value="3:2">3:2</option>
                    <option value="4:3">4:3</option>
                    <option value="16:9">16:9</option>
                    <option value="16:10">16:10</option>
                </optgroup>
            </select>

            <label for="picture_resolution" class="form-label mt-3">ปรับความละเอียดรูปภาพลง (Down Scale)</label>
            <select class="form-select" title="ความละเอียดรูปภาพ" id="picture_resolution">
                <optgroup label="ต้นฉบับ">
                    <option value="DEFAULT" selected>ต้นฉบับ</option>
                </optgroup>
                <optgroup label="กำหนดความละเอียด">
                    <option value="720">HD (720p)</option>
                    <option value="1080">Full HD (1080p)</option>
                    <option value="1440">2K (1440p)</option>
                    <option value="2160">UHD (2160p)</option>
                </optgroup>
                <optgroup label="กำหนดเอง">
                    <option value="CUSTOM">กำหนดเอง</option>
                </optgroup>
            </select>

            <div class="custom-resolution-container">
                <label class="form-label mt-3">กำหนดขนาดรูปภาพเอง</label>
                <div class="form-outline" data-mdb-input-init>
                    <input type="number" min="1" id="picture_resizeWidth" class="form-control mb-2">
                    <label class="form-label" for="picture_resizeWidth">ความกว้างที่กำหนดเอง</label>
                </div>
                <div class="form-outline" data-mdb-input-init>
                    <input type="number" min="1" id="picture_resizeHeight" class="form-control mt-2">
                    <label class="form-label" for="picture_resizeHeight">ความสูงที่กำหนดเอง</label>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="row justify-content-center my-2"><div class="col-xl-8 col-lg-9 col-md-10"><div class="section-title text-center"><div class="container"><h2>ผลลัพธ์</h2><p>เมื่ออัปโหลดรูปภาพแล้ว ผลลัพธ์จะแสดงที่นี่</p></div></div></div></div><div class="container my-5" data-container-type="result-list">
    <div class="row my-4 " id="picture_list" data-container-controller="picture-list" data-container-type="masonry" data-masonry='{"percentPosition": true }'></div>

    <template id="picture_template">
        <div class="col-6 col-md-3 mb-4" data-picture-controller="view" data-picture-link="#" data-picture-type="upload" data-picture-id="0">
            <div class="d-flex position-relative justify-content-center">
                <div class="picture-action-container">
                    <button class="picture-action-button" data-picture-controller="copy-link" data-picture-action-type="picture_view" data-picture-link="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                            <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z">
                            <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z">
                        </svg>
                    </button>
                    <button class="picture-action-button" data-picture-controller="copy-link" data-picture-action-type="picture_direct" data-picture-link="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
                            <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z">
                            <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z">
                        </svg>
                    </button>
                    <button class="picture-action-button" data-picture-controller="copy-link" data-picture-action-type="picture_bb_code" data-picture-link="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-braces-asterisk" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z">
                        </svg>
                    </button>
                    <button class="picture-action-button" data-picture-controller="copy-link" data-picture-action-type="picture_html_code" data-picture-link="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-html" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-9.736 7.35v3.999h-.791v-1.714H1.79v1.714H1V11.85h.791v1.626h1.682V11.85h.79Zm2.251.662v3.337h-.794v-3.337H4.588v-.662h3.064v.662H6.515Zm2.176 3.337v-2.66h.038l.952 2.159h.516l.946-2.16h.038v2.661h.715V11.85h-.8l-1.14 2.596H9.93L8.79 11.85h-.805v3.999h.706Zm4.71-.674h1.696v.674H12.61V11.85h.79v3.325Z">
                        </svg>
                    </button>
                </div>
                <img class="img img-fluid" data-picture-controller="preview" alt="" src="">
            </div>
        </div>
    </template>

</div>

<div class="row justify-content-center my-2"><div class="col-xl-8 col-lg-9 col-md-10"><div class="section-title text-center"><div class="container"><h2>ข้อมูลการฝากรูปภาพในระบบ<br>(Storage Information)</h2><p>ข้อมูลการฝากรูปภาพในระบบ</p></div></div></div></div><div class="container my-5">
    <table class="table table-responsive bg-transparent">
        <br />
<b>Fatal error</b>:  Uncaught mysqli_sql_exception: Can't connect to Database: Host '192.168.1.29' is not allowed to connect to this MariaDB server in /var/www/sk-web/src/smilekrub/System/Database/SkDB.php:48
Stack trace:
#0 /var/www/sk-web/src/smilekrub/System/Database/SkDB.php(90): Smilekrub\System\Database\SkDB::getConnection(Object(Smilekrub\System\Database\DatabaseConnection))
#1 /var/www/sk-web/src/smilekrub/Utility/SkLogger.php(24): Smilekrub\System\Database\SkDB::getWebsiteLogDb()
#2 /var/www/sk-web/src/smilekrub/Utility/SkLogger.php(13): Smilekrub\Utility\SkLogger::processLog('ERROR', 'Can't connect t...')
#3 /var/www/sk-web/src/SmilekrubInitialize.php(82): Smilekrub\Utility\SkLogger::error('Can't connect t...')
#4 [internal function]: src\SmilekrubInitialize::exceptionHandler(Object(mysqli_sql_exception))
#5 {main}
  thrown in <b>/var/www/sk-web/src/smilekrub/System/Database/SkDB.php</b> on line <b>48</b><br />
<br />
<b>Fatal error</b>:  Uncaught mysqli_sql_exception: Can't connect to Database: Host '192.168.1.29' is not allowed to connect to this MariaDB server in /var/www/sk-web/src/smilekrub/System/Database/SkDB.php:48
Stack trace:
#0 /var/www/sk-web/src/smilekrub/System/Database/SkDB.php(90): Smilekrub\System\Database\SkDB::getConnection(Object(Smilekrub\System\Database\DatabaseConnection))
#1 /var/www/sk-web/src/smilekrub/Utility/SkLogger.php(24): Smilekrub\System\Database\SkDB::getWebsiteLogDb()
#2 /var/www/sk-web/src/smilekrub/Utility/SkLogger.php(13): Smilekrub\Utility\SkLogger::processLog('ERROR', 'Fatal Error: Un...')
#3 /var/www/sk-web/src/SmilekrubInitialize.php(113): Smilekrub\Utility\SkLogger::error('Fatal Error: Un...')
#4 [internal function]: src\SmilekrubInitialize::shutdown()
#5 {main}
  thrown in <b>/var/www/sk-web/src/smilekrub/System/Database/SkDB.php</b> on line <b>48</b><br />