@extends('frontend.layouts.main-profile')

@section('title', $seo['title'] ?? '' )
@section('keywords', $seo['keywords']??'')
@section('description', $seo['description']??'')
@section('abstract', $seo['abstract']??'')
@section('image', $seo['image']??'')
@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/profile/order-history.css') }}">

<style>
    form .account-gr textarea {
        font-size: 14px;
        color: #717173;
        width: 100%;
        border: 1px solid #d8d8d8;
        border-radius: 5px;
        padding: 10px 15px;
        margin-bottom: 10px;
        outline: 0;
    }

    textarea.form-control {
        padding: 1.375rem 0.75rem;
    }

    .error-message {
        color: red;
        font-size: 12px;
    }

    .account-gr {
        display: block !important;
    }

    .customer-left {
        color: #222222;
        margin-bottom: 6px;
        min-width: 100px;
        text-align: left;
        font-weight: 600;
        transform: translateY(2px);
        font-size: 14px;
    }

    .btn-footer {
        margin-top: 20px;
        text-align: center;
    }

    .btn-footer .submit-action {
        font-size: 14px;
        padding: 8px 20px;
    }
</style>

@endsection

@section('content')
<div class="content-wrapper">
    <div class="main">
        <div class="row">
            <div class="col-sm-12">
                <div class="wrap-history" style="font-size:13px;">
                    <div class="card-header">
                        <h3 class="card-title text-center">{{ __('common.Tạo mới yêu cầu hỗ trợ') }}</h3>
                    </div>
                    <div class="card-body mb-5 pb-5">
                        <form action="{{route('profile.createTicket')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="account-gr pl-3">
                                <div class="customer-left">
                                    {{ __('common.Tiêu đề') }}
                                    <i class="required">*</i>
                                </div>
                                <div class="customer-right">
                                    <input type="text" class="tr-valid" name="title"
                                        placeholder="{{ __('common.Tiêu đề') }}">
                                    @error('title')
                                    <span class="error-message" style="">{{ $message }}
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="account-gr pl-3">
                                <div class="customer-left">
                                    {{ __('common.Nội dung') }}
                                    <i class="required">*</i>
                                </div>
                                <div class="customer-right">
                                    <textarea name="content" id="content" class="init-ckeditor"
                                        placeholder="{{ __('common.Nội dung') }}" cols="5" rows="5"
                                        height="200"></textarea>
                                    @error('content')
                                    <span class="error-message" style="">{{ $message }}
                                    </span>
                                    @enderror
                                </div>

                            </div>

                            <div class="account-gr pl-3 wrap-file-image">
                                <div class="customer-left">
                                    {{ __('common.File đính kèm') }}
                                </div>
                                <div class="customer-right">
                                    <small class="mb-1 d-block text-secondary">{{ __('common.Chỉ định 1-5 file') }}
                                        (jpg, jpeg, png,
                                        webp)</small>
                                    <input type="file" id="fileInput" class="form-control-file img-load-input border"
                                        name="files[]" multiple accept=".jpg,.jpeg,.png,.webp">

                                    @error('files')
                                    <span class="error-message" style="">{{ $message }}
                                    </span>
                                    @enderror
                                    <div class="file-load"></div>
                                </div>
                            </div>
                            <div class="btn-footer">
                                <button type="submit" class="btn-primary btn-sm submit-action">{{ __('common.Gửi hỗ trợ') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script src="{{ asset('lib/ckeditor-4/ckeditor.js') }}"></script>
<script>
    $(document).ready(function () {
        let selectedFiles = [];

        $('#fileInput').on('change', function (e) {
            const files = Array.from(e.target.files);
            const $preview = $('.file-load');
            $preview.empty();
            selectedFiles = files.slice(0, 5); // Chỉ lấy tối đa 5 file

            if (files.length > 5) {
                alert('Chỉ được chọn tối đa 5 file.');
            }

            renderPreview();
        });

        function renderPreview() {
            const $preview = $('.file-load');
            $preview.empty();

            selectedFiles.forEach((file, index) => {
                const fileType = file.type;
                const $fileWrapper = $('<div>', { class: 'file-item', css: { position: 'relative', display: 'inline-block', margin: '10px' } });

                const $deleteBtn = $('<span>', {
                    text: '❌',
                    css: {
                        position: 'absolute',
                        top: '-12px',
                        right: '-12px',
                        background: '#fff',
                        color: '#fff',
                        borderRadius: '50%',
                        cursor: 'pointer',
                        fontSize: '12px',
                        padding: '2px 4px',
                        zIndex: 10,
                        border: '1px solid #ccc'
                    },
                    click: function () {
                        selectedFiles.splice(index, 1);
                        renderPreview();
                        updateFileInput();
                    }
                });

                if (fileType.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const $img = $('<img>', {
                            src: e.target.result,
                            alt: file.name,
                            css: { maxWidth: '100px', border: '1px solid #ccc', padding: '2px' }
                        });
                        $fileWrapper.append($img).append($deleteBtn);
                        $preview.append($fileWrapper);
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        function updateFileInput() {
            const dataTransfer = new DataTransfer();
            selectedFiles.forEach(file => dataTransfer.items.add(file));
            $('#fileInput')[0].files = dataTransfer.files;
        }
    });

    const ckeditor4 = (elementId, elementHeight) => {
        if (typeof elementHeight == "undefined") {
            elementHeight = 500;
            }
            CKEDITOR.replace(elementId, {
                height: elementHeight,
                removeButtons: "",
                entities: true,
                allowedContent: true,
                toolbarGroups: [
                    { name: "clipboard", groups: ["undo", "clipboard"] },
                    { name: "basicstyles", groups: ["basicstyles", "cleanup"] },
                    { name: "paragraph", groups: ["list", "align"] },
                    { name: "links" },
                    { name: "insert" },
                    { name: "styles" },
                    { name: "colors" },
                ],
                removeButtons: "Subscript,Superscript,Strike,Anchor,Styles,SpecialChar,Language",
                removePlugins: "exportpdf,forms,flash,iframe",
            });
        };

    if ($(".init-ckeditor").length > 0) {
        $(".init-ckeditor").each((index, element) => {
            let elementId = $(element).attr("id");
            let elementHeight = $(element).attr("height");
            ckeditor4(elementId, elementHeight);
        });
    }
</script>
@endsection