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

@section('title', 'Chi tiết yêu cầu hỗ trợ' )
@section('keywords', 'Chi tiết yêu cầu hỗ trợ')
@section('description', 'Chi tiết yêu cầu hỗ trợ')
@section('abstract', 'Chi tiết yêu cầu hỗ trợ')
@section('image', 'Chi tiết yêu cầu hỗ trợ')
@section('css')
<link rel="stylesheet" href="{{ asset('frontend/css/profile/order-history.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/profile/ticket.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<style>
    .customer-right img {
        width: 100px;
    }
</style>
@endsection

@section('content')
<div class="content-wrapper">
    <div class="main">
        <div class="ticket-container">
            <!-- Ticket Header for Desktop and Tablet -->
            <div class="ticket-header">
                <table>
                    <thead>
                        <tr>
                            <th>Mã câu hỏi</th>
                            <th>Trạng thái</th>
                            <th>Người gửi</th>
                            <th>Người xử lý</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $ticket->ticket_code }}</td>
                            <td>
                                @foreach ($ticket->listStatus as $status)
                                @if ($status['status']==$ticket->status)
                                <span class="badge badge-{{ $ticket->status <= 1 ? 'danger' : $ticket->status }}">
                                    {{ $status['name'] }}
                                </span>
                                @endif
                                @endforeach
                            </td>
                            <td>{{ $ticket->user->name ?? '' }}</td>
                            <td>{{ $ticket->admin->name ?? '' }}</td>
                        </tr>
                    </tbody>
                </table>

                <!-- Mobile view with cards layout -->
                <div class="ticket-header-mobile" style="display: none;">
                    <div class="header-item">
                        <span class="header-label">{{ __('common.Mã câu hỏi') }}:</span>
                        <span>{{ $ticket->ticket_code }}</span>
                    </div>

                    <div class="header-item">
                        <span class="header-label">{{ __('common.Trạng thái') }}:</span>
                        <span>
                            @foreach ($ticket->listStatus as $status)
                            @if ($status['status']==$ticket->status)
                            {{ $status['name'] }}
                            @endif
                            @endforeach
                        </span>
                    </div>

                    <div class="header-item">
                        <span class="header-label">{{ __('common.Người gửi') }}:</span>
                        <span>{{ $ticket->user->name ?? '' }}</span>
                    </div>

                    <div class="header-item">
                        <span class="header-label">{{ __('common.Người xử lý') }}:</span>
                        <span class="employee-name">{{ $ticket->admin->name ?? '' }} </span>
                    </div>
                </div>
            </div>

            <!-- Ticket Content First-->
            <div class="ticket-content">
                <div class="ticket-title">
                    <h3>
                        <i class="fas fa-question-circle"></i>
                        {{ __('common.NỘI DUNG YÊU CẦU') }} - <span class="status-failed">{{ $ticket->title }}</span>
                    </h3>
                </div>
                <div class="issue-description">
                    {!! $ticket->responses->first()->content!!}

                    @if (count($ticket->responses->first()->attachments) > 0)
                    <p class="pb-1">
                        <strong>{{ __('common.File đính kèm') }}:</strong>
                    </p>
                    <div class="d-flex gap-3">
                        @foreach ($ticket->responses->first()->attachments as $attachment)
                        <div class="product-gallery boxlazy-img gallery-item mr-3" data-image="{{ $attachment->path }}">
                            <div class="boxlazy-img__insert lazy-img__prod">
                                <span class="boxlazy-img__aspect">
                                    <a class="product-gallery__item" data-fancybox="gallery"
                                        href="{{ $attachment->path }}">
                                        <img width="100px" class="img-thumbnail" src="{{ $attachment->path }}"
                                            alt="{{ $ticket->title }}">
                                    </a>
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>

            @if ($ticket->responses->count() >= 2)
            @foreach ($ticket->responses->skip(1) as $response)
            @php
            $isUser = $response->user_id == $ticket->user_id;
            $responseClass = $isUser ? 'user' : 'admin';
            $name = $isUser ? $ticket->user->name : $ticket->admin->name;
            @endphp

            <div class="response {{ $responseClass }}">
                <div class="response-header">
                    {{ $name }} [{{ $response->created_at->format('d/m/Y - H:i') }}]
                </div>
                <div class="response-content">
                    {!! $response->content !!}

                    @if (count($response->attachments) > 0)
                    <p class="pb-1 pt-3"><strong>{{ __('common.File đính kèm') }}:</strong></p>
                    <div class="d-flex gap-3">
                        @foreach ($response->attachments as $attachment)
                        <div class="product-gallery boxlazy-img gallery-item mr-3" data-image="{{ $attachment->path }}">
                            <div class="boxlazy-img__insert lazy-img__prod">
                                <span class="boxlazy-img__aspect">
                                    <a class="product-gallery__item" data-fancybox="gallery"
                                        href="{{ $attachment->path }}">
                                        <img width="100px" class="img-thumbnail" src="{{ $attachment->path }}"
                                            alt="{{ $ticket->title }}">
                                    </a>
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
            @endif

            @if ($ticket->status != -1)
            <div class="response user">
                <div class="response-header text-uppercase">
                    <i class="fas fa-question-circle mr-2"></i> {{ $ticket->user->name ?? '' }}
                </div>
                <div class="response-content">
                    <form action="{{route('profile.replyTicket', $ticket->id)}}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="account-gr pl-3">
                            <div class="customer-left">
                                {{ __('common.Nội dung phản hồi') }}
                                <i class="required">*</i>
                            </div>
                            <div class="customer-right">
                                <textarea name="content" id="content" class="init-ckeditor"
                                    placeholder="Nhập nội dung hỗ trợ" 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="button-footer">
                            <div class="btn-wrap">
                                <input type="submit" name="submit_action" class="btn-primary btn-sm submit-action"
                                    value="{{ __('common.Gửi đi') }}">
                                <input type="submit" name="submit_action" class="btn-secondary btn-sm submit-action"
                                    value="{{ __('common.Đóng câu hỏi') }}">

                            </div>
                            <p class="text-success">
                                {{ __('common.Nếu quý khách có câu hỏi hay vấn đề mới, vui lòng không phản hồi xin hãy')
                                }} <a href="{{ route('profile.newTicket') }}">{{ __('common.gửi yêu cầu mới')
                                    }}</a>
                                {{ __('common.sẽ giúp chúng tôi hỗ trợ nhanh hơn') }}</p>
                        </div>
                    </form>
                </div>
            </div>
            @endif


        </div>
    </div>
</div>
@endsection


@section('js')
<script src="{{ asset('lib/ckeditor-4/ckeditor.js') }}"></script>
<script>
    function handleResponsiveLayout() {
        const table = document.querySelector('.ticket-header table');
        const cardView = document.querySelector('.ticket-header-mobile');

        if (window.innerWidth <= 480) {
            table.style.display = 'none';
            cardView.style.display = 'block';
        } else {
            table.style.display = 'table';
            cardView.style.display = 'none';
        }
    }

    // Initial call
    handleResponsiveLayout();

    // Add event listener for window resize
    window.addEventListener('resize', handleResponsiveLayout);

    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);
        });
    }

    $(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;
        }
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
    $(document).ready(function() {
            $("[data-fancybox]").fancybox();
        });
</script>
@endsection