@extends($activeTemplate . 'layouts.buyer_master')
@section('content')
<div class="container-fluid px-0">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card custom--card">
                <div class="card-body">
                    <form action="{{ route('buyer.ticket.reply', $myTicket->id) }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="register">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form--label required">@lang('Message')</label>
                                    <textarea name="message" required class="form--control"></textarea>
                                </div>
                                <div class="col-md-12 form-group">
                                    <label class="form--label">@lang('Attachments')</label>
                                    <small class="text--info d-block pb-2">@lang('Max 5 files can be uploaded | Maximum upload size is ' . convertToReadableSize(ini_get('upload_max_filesize')) . ' | Allowed File Extensions: .jpg, .jpeg, .png, .pdf, .doc, .docx')</small>
                                    <input type="file" name="attachments[]"
                                        class="form--control form-control custom--file-input"
                                        multiple max="5" accept=".jpg, .jpeg, .png, .pdf, .doc, .docx">
                                    
                                </div>

                                <div class="attach-preview-wrapper input"> </div>

                                <div class="col-md-12 text-end">
                                    <button class="btn btn--base">
                                        <i class="las la-paper-plane"></i> @lang('Submit')</button>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card custom--card pt-2">
                <div class="card-header">
                    <h5 class="card-title mb-0">@lang('Ticket Information')</h5>
                </div>
                <div class="card-body">
                    <div class="ticket-info">
                        <ul class="ticket-info-list">
                            <li class="ticket-info-item">
                                <span class="ticket-info-title">@lang('Status')</span>
                                <span class="ticket-info-text">
                                    @php echo $myTicket->statusBadge; @endphp
                                </span>
                            </li>
                            <li class="ticket-info-item">
                                <span class="ticket-info-title">@lang('Ticket ID')</span>
                                <span class="ticket-info-text">#{{ $myTicket->ticket }}</span>
                            </li>
                            <li class="ticket-info-item">
                                <span class="ticket-info-title">@lang('Priority')</span>
                                <span class="ticket-info-text">
                                    @if ($myTicket->priority == Status::PRIORITY_LOW)
                                        <span class="badge badge--dark">@lang('Low')</span>
                                    @elseif($myTicket->priority == Status::PRIORITY_MEDIUM)
                                        <span class="badge  badge--warning">@lang('Medium')</span>
                                    @elseif($myTicket->priority == Status::PRIORITY_HIGH)
                                        <span class="badge badge--danger">@lang('High')</span>
                                    @endif
                                </span>
                            </li>
                            <li class="ticket-info-item">
                                <span class="ticket-info-title">@lang('Opened At')</span>
                                <small class="ticket-info-text">
                                    <i class="far fa-clock"></i> {{ showDateTime($myTicket->created_at) }}
                                </small>
                            </li>

                            <li class="ticket-info-item">
                                <span class="ticket-info-title">@lang('Last Reply')</span>
                                <small class="ticket-info-text">
                                    <i class="far fa-clock"></i> {{ showDateTime($myTicket->last_reply) }}
                                </small>
                            </li>

                            @if (auth()->guard('buyer')->check() && $myTicket->status !== Status::TICKET_CLOSE)
                                <li class="ticket-info-item  w-100">
                                    <button class="btn btn--danger w-100 confirmationBtn"
                                        data-question="Are you sure to close this ticket ?"
                                        data-action="{{ route('ticket.close', $myTicket->id) }}"><i
                                            class="las la-times-circle"></i> @lang('Close Support')</button>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4">
            <div class="card custom--card">
                <div class="card-header">
                    <h5 class="card-title">
                        @lang('Support Ticket Message')
                    </h5>
                </div>
                <div class="card-body">
                    @foreach ($messages as $message)
                        <div class="chat-item  {{ $message->admin_id == 0 ? 'reply' : '' }}">
                            <span class="chat-item__thumb">
                                @php
                                    if ($message->admin_id) {
                                        $src = getImage(
                                            getFilePath('adminProfile') . '/' . $message->admin->image,
                                            avatar: true,
                                        );
                                    } else {
                                        $src = getImage(
                                            getFilePath('buyerProfile') .
                                                '/' .
                                                @$message->ticket->buyer->image,
                                            avatar: true,
                                        );
                                    }
                                @endphp

                                <img src="{{ $src }}" alt="profle"></a>
                            </span>
                            <div class="chat-item__content">
                                <p class="chat-item__name">
                                    {{ $message->admin ? $message->admin->name : $message->ticket->buyer->fullname }}
                                </p>
                                <p class="chat-item__time">
                                    <small> <i class="far fa-clock"></i>
                                        {{ showdateTime($message->created_at) }}</small>
                                </p>

                                <p class="chat-item__message ">{{ $message->message }}</p>

                                <div class="attach-preview-wrapper m-0">
                                    @foreach ($message->attachments as $attachment)
                                        <div class="atach-preview">
                                            <div class="atach-preview__left">
                                                <div class="atach-preview__image">
                                                    @php $ext = pathinfo($attachment->attachment, PATHINFO_EXTENSION); @endphp
                                                    <img src="{{ getImage(getFilePath('ticket') . '/' . (!in_array($ext, ['jpg', 'jpeg', 'png']) ? 'doc_type.png' : $attachment->attachment)) }}"
                                                        alt="File">
                                                </div>
                                                <div class="atach-preview__contemt">
                                                    <p class="atach-preview__title">@lang('attachments')</p>
                                                    <p class="atach-preview__size">
                                                        {{ fileSizeInB(getFilePath('ticket') . '/' . $attachment->attachment) }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="atach-preview__action">

                                                <a href="{{ route('ticket.download', encrypt($attachment->id)) }}"
                                                    class="atach-icon">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
    

    <x-confirmation-modal />
@endsection


@push('script')
    <script>
        "use strict";
        (function($) {
            const textarea = document.querySelector('.chat-form-input');
            textarea && textarea.addEventListener('input', function() {
                this.style.height = '48px';
                this.style.height = (this.scrollHeight) + 'px';
            });

            const fileInput = $(`[name="attachments[]"]`);
            let filesArray = [];

            fileInput.on('change', function() {
                $('.attach-preview-wrapper.input').empty();
                filesArray = Array.from(this.files); // Store File references


                const fileSize = $(this).attr('max');
                if (filesArray.length > fileSize) {
                    this.value = '';
                    notify('error', `You cannot upload more than ${fileSize} files`);
                    return false;
                }

                filesArray.forEach((file, index) => {
                    const reader = new FileReader();
                    const fileExtension = file.name.split('.').pop().toLowerCase();

                    reader.onload = function(e) {
                        let imageUrl = e.target.result;
                        const nonImageExtensions = ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'txt',
                            'ppt',
                            'pptx'
                        ];

                        if (!['jpg', 'jpeg', 'png'].includes(fileExtension)) {
                            imageUrl =
                                "{{ getImage(getFilePath('ticket') . '/' . 'doc_type.png') }}";
                        }

                        const html = `<div class="atach-preview" data-index="${index}">
                        <div class="atach-preview__left">
                            <div class="atach-preview__image">
                                <img src="${imageUrl}" alt="${file.name}">
                            </div>
                            <div class="atach-preview__contemt">
                                <p class="atach-preview__title">${file.name}</p>
                                <p class="atach-preview__size">${getFileSize(file.size)}</p>
                            </div>
                        </div>
                        <div class="atach-preview__action">
                            <a href="javascript:void(0);" class="atach-icon delete-icon">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </div>
                    </div>`;
                        $('.attach-preview-wrapper.input').append(html);
                    };

                    reader.readAsDataURL(file);
                });

                $(document).on('click', '.delete-icon', function() {
                    const index = $(this).closest('.atach-preview').data('index');
                    filesArray.splice(index, 1);
                    const dataTransfer = new DataTransfer();
                    filesArray.forEach(file => dataTransfer.items.add(file));
                    fileInput[0].files = dataTransfer.files;
                    $(this).closest('.atach-preview').remove();
                });
            });

            function getFileSize(size) {
                if (size >= 1048576) {
                    return (size / 1048576).toFixed(2) + ' MB';
                } else if (size >= 1024) {
                    return (size / 1024).toFixed(2) + ' KB';
                } else {
                    return size + ' bytes';
                }
            }

        })(jQuery);
    </script>
@endpush


@push('style')
    <style>
        .input-group-text:focus {
            box-shadow: none !important;
        }

        .reply-bg {
            background-color: #ffd96729
        }

        .empty-message img {
            width: 120px;
            margin-bottom: 15px;
        }
    </style>
@endpush
