@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
@endsection

@section('breadcrumb-title')
<h3>Ticket Detail</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Ticket Detail</li>
@endsection
<style>
    .social-chat .media-body:before {
        content: "";
        position: absolute;
        top: 19px;
        right: 100%;
        border: 7px solid #59667a !important;
        border-right: 7px solid #59667a !important;
    }

    .social-chat .media-body {
        padding: 15px !important
    }
</style>
@section('content')
<div class="container-fluid">
    <div class="row widget-grid">
        <div class="col-xxl-8 col-xl-8 col-md-8 col-sm-8 box-col-8">
            <div class="card height-equal">
                <div class="card-header card-no-border">
                    <div class="header-top">
                        <h5>Discussion</h5>
                    </div>
                </div>
                <div class="card-body pt-3 pb-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="timeline-content">
                                <div class="social-chat" style="height:20rem;overflow-y:scroll">
                                    @if (!empty($replies))
                                    @foreach ($replies as $reply)
                                    <div class="your-msg">
                                        <div class="media"><img class="img-50 img-fluid m-r-20 rounded-circle" alt="" @if(!empty($reply->image))
                                            src="{{ asset('public/storage/uploads/' . $reply->image)}}"
                                            @else
                                            src="{{ asset('assets/dummy_person.jpg')}}"
                                            @endif
                                            >
                                            <div class="media-body" style="border: 2px solid #999999;border-radius: 11px;"><span class="f-w-600"><u>{{$reply->fname}}</u>
                                                    <span>{{$reply->created_at->diffForHumans()}} <i class="fa fa-reply font-primary"></i></span></span>
                                                <p>{{$reply->message}}</p>
                                                <a href="#" class="attachment-link view-doc" onclick="preview_file(this)" data-src="{{ url('/storage/uploads/'.$reply->attachment) }}">{{$reply->attachment}}</a>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                                <div class="text-center">
                                    <button class="show_more" style="border: 0px; background-color:transparent;color:purple;display:none" onclick="show_more(this)">More Commnets</button>
                                    <button class="show_less" style="border: 0px; background-color:transparent;color:purple" onclick="show_less(this)">Show Less</button>
                                </div>
                                <div class="comments-box">
                                    <div class="media"><img class="img-50 img-fluid m-r-20 rounded-circle" alt=""
                                            @if(strtolower(Request::segment(1))==='client' )
                                            @if(isset(Auth::guard('client')->user()->image) && !empty(Auth::guard('client')->user()->image))
                                        src="{{ asset('public/storage/uploads/' . Auth::guard('client')->user()->image)}}"
                                        @else
                                        src="{{ asset('assets/dummy_person.jpg')}}"
                                        @endif
                                        @else
                                        @if(isset(Auth::guard('admin')->user()->image) && !empty(Auth::guard('admin')->user()->image))
                                        src="{{ asset('public/storage/uploads/' . Auth::guard('admin')->user()->image)}}"
                                        @else
                                        src="{{ asset('assets/dummy_person.jpg')}}"
                                        @endif
                                        @endif
                                        >
                                        <div class="media-body w-100">
                                            <div class="input-group text-box">
                                                <input class="form-control" type="text" name="message-to-send" placeholder="Your message....." data-bs-original-title="" title="">
                                                <input type="file" id="attachment" style="display:none;" name="attachment" accept=".png, .jpg, .jpeg, .pdf">
                                                <label for="attachment" type="button"><i class="fa fa-paperclip"
                                                        style="right: 14%;top: 20%;font-size: x-large;color: grey;z-index:7;position:absolute"></i></label>
                                                <div id="file-info" style="display: none; position: absolute;width: 210px;height: 172px;bottom: 100%;right: 0%;">
                                                    <div id="file-preview" style="position: absolute; width: 100%; height: 100%; overflow: hidden; border: 1px solid #ccc; box-sizing: border-box;">
                                                    </div>
                                                    <button type="button" id="remove-file" style="position: absolute; top: 0; right: 0; background: transparent; border: none; color: black; font-size: 20px; cursor: pointer;">&times;</button>
                                                </div>
                                                <div class="input-group-append">
                                                    <button class="btn btn-primary" id="send_msg_btn" type="button" onclick="append_msg()" @if ($data[0]->open_status == 1)
                                                        disabled="disabled"
                                                        @endif
                                                        data-bs-original-title="" title="" style="height: 39px !important;"><i class="fa fa-send" style="color: white;"> </i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-4 col-xl-4 col-md-4 col-sm-4 box-col-4">
            <div class="card height-equal">
                <div class="card-header card-no-border">
                    <div class="header-top">
                        <h5> <span class="fa fa-tag"></span> TKT-# <br> ()</h5>
                    </div>
                </div>
                <div class="card-body pt-3 pb-5">
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <p><b>Created By :</b><br>
                                  </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <p><b>Email :</b><br> </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <p><b>Created On :</b><br>
                                {{ optional($data[0]->created_at)->format('j M Y g:i a') ?? 'N/A' }}
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <p><b>Updated On :</b><br>
                                {{ optional($data[0]->updated_at)->format('j M Y g:i a') ?? 'N/A' }}
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <p id="status_p"><b>Status :</b><br>
                                @if ($data[0]->status == 1)
                                <span class="badge badge-primary p-2">Open</span>
                                @elseif($data[0]->status == 2)
                                <span class="badge badge-warning p-2">Client Replied</span>
                                @elseif($data[0]->status == 3)
                                <span class="badge badge-warning p-2">Awaiting Reply</span>
                                @elseif($data[0]->status == 4)
                                <span class="badge badge-danger p-2">Closed</span>
                                @elseif($data[0]->status == 5)
                                <span class="badge badge-primary p-2">Open</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <p><b>Priority :</b><br></p>
                        </div>
                        <div class="
                        @if ($data[0]->open_status == 1)
                        col-md-12
                        @else
                        col-md-9
                        @endif
                        mb-3 p-r-0">
                            <button type="button" class="btn btn-primary w-100" id="open_btn"
                                @if ($data[0]->open_status == 1)
                                onclick="show_msg('Open')"
                                @endif
                                >Reply</button>
                        </div>

                        <div class="col-md-3 mb-3">
                            <button type="button"
                                @if ($data[0]->open_status == 1)
                                style="display:none"
                                @endif
                                class="btn btn-outline-primary w-100" id="close_btn" onclick="show_msg('Close')" style="padding-right: 10px;padding-left: 10px;">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var session_layout = '{{ session()->get('
    layout ') }}';
</script>
@endsection

@section('script')
<script type="text/javascript">
    @if(strtolower(Request::segment(1)) === 'client')
    var user_id = "{{ Auth::guard('client')->user()->id }}";
    var person_name = "{{ Auth::guard('client')->user()->fname }}";
    var person_s_name = "{{ Auth::guard('client')->user()->lname }}";
    var person_img = "{{ Auth::guard('client')->user()->image }}";
    var role = "{{ Auth::guard('client')->user()->role }}";
    @else
    var user_id = "{{ Auth::guard('admin')->user()->id }}";
    var person_name = "{{ Auth::guard('admin')->user()->fname }}";
    var person_s_name = "{{ Auth::guard('admin')->user()->lname }}";
    var person_img = "{{ Auth::guard('admin')->user()->image }}";
    var role = "{{ Auth::guard('admin')->user()->role }}";
    if (role == 3) {
        user_id = 1
    }
    @endif

    $(document).ready(function() {
        $.ajax({
            url: "{{ route('notifications.read') }}",
            type: 'GET',
            data: {
                ticket_id: "{{ request()->get('id') }}",
                user_id: user_id,
                type: "App\\Notifications\\UpdateTicketNotification",
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {}
        });
        $('#attachment').on('change', function() {
            var file = this.files[0]; // Get the selected file
            if (file) {
                var fileType = file.type;

                // Display the file info div
                $('#file-info').show();

                // Handle image file types
                if (fileType.startsWith('image/')) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#file-preview').html('<img src="' + e.target.result + '" alt="Selected File" style="width: 100%; height: 100%; object-fit: cover;">');
                    }
                    reader.readAsDataURL(file);
                }
                // Handle PDF file type
                else if (fileType === 'application/pdf') {
                    $('#file-preview').html('<i class="fa fa-file-pdf-o" style="font-size: 60px; color: grey; display: block; margin: 20px auto;"></i>');
                } else {
                    $('#file-preview').html('<span>' + file.name + '</span>');
                }
            } else {
                $('#file-info').hide(); // Hide if no file is selected
            }
        });

        $('#remove-file').on('click', function() {
            $('#attachment').val(''); // Clear the input:file
            $('#file-info').hide(); // Hide the file info div
            $('#file-preview').html(''); // Clear the file preview
        });
    });

    function scrollToBottom() {
        var messageContainer = document.querySelector('.social-chat');
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }
    $(document).ready(function() {
        scrollToBottom()
    });

    function show_more(obj = null) {
        if (obj != null) {
            $(obj).hide();
            $('.show_less').show();
        }
        $('.your-msg').each(function(i, v) {
            $(v).show();
        });
        scrollToBottom()
    }

    function show_less(obj = null) {
        if (obj != null) {
            $(obj).hide();
            $('.show_more').show();
        }
        $('.your-msg').each(function(i, v) {
            var totalMessages = $('.your-msg').length;
            if (i < totalMessages - 4) {
                $(v).hide();
            }
        });
        scrollToBottom()
    }

    function append_msg() {
        var img = '';
        if (person_img != '') {
            var img = "{{ asset('public/storage/uploads/')}}" + person_img;
        } else {
            var img = "{{ asset('assets/dummy_person.jpg')}}";
        }
        var attachment = $('#attachment')[0].files[0];
        var formData = new FormData();
        if (attachment) {
            formData.append('attachment', attachment);
        }
        var id = "{{ request()->get('id') }}";
        var msg = $('input[name="message-to-send"]').val();
        formData.append('ticket_id', id);
        formData.append('user_id', user_id);
        formData.append('message', msg);
        formData.append('open_by', person_name + " " + person_s_name);
        formData.append('role', role);
        if (msg != '') {
            var html = `<div class="your-msg">
            <div class="media"><img class="img-50 img-fluid m-r-20 rounded-circle" alt="" src="` + img + `">
            <div class="media-body" style="border: 2px solid #999999;border-radius: 11px;"><span class="f-w-600"><u>` + person_name + `</u>
            <span>1 Sec Ago <i class="fa fa-reply font-primary"></i></span></span>
            <p>` + msg + `</p>`
            if (attachment) {
                html += `<br><a href="#" class="attachment-link view-doc" onclick="preview_file(this)" data-src="">` + attachment.name + `</a>`;
            }
            html += `
            </div>
            </div>
            </div>`;
            $.ajax({
                url: "{{ route('insert.ticketReplies') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('.social-chat').append(html);
                    var msg = $('input[name="message-to-send"]').val('');
                    $('#attachment').val('');
                    if (response) {
                        response = JSON.parse(response);
                        var lastLi = $('.social-chat .your-msg').last();
                        lastLi.find('a').html(response)
                        lastLi.find('a').attr('data-src', '{{url("/storage/uploads")}}/' + response)
                    }
                    if (role == 2) {
                        $('#status_p').html(`<b>Status :</b><br><span class="badge badge-warning p-2">Client Replied</span>`)
                    } else {
                        $('#status_p').html(`<b>Status :</b><br><span class="badge badge-warning p-2">Awaiting Reply</span>`)
                    }
                    scrollToBottom()
                }
            });
        }
    }

    function show_msg(obj) {
        var open_status = 0;
        if (obj == 'Close') {
            open_status = 1;
        } else {
            open_status = 0;
        }
        var id = "{{ request()->get('id') }}";
        if (confirm('Are you sure you want to ' + obj + ' this ticket?')) {
            $.ajax({
                url: "{{ route('JSONupdate.ticket') }}",
                type: 'POST',
                data: {
                    id: id,
                    open_status: open_status,
                    open_by: person_name + " " + person_s_name,
                    role: role,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (obj == 'Close') {
                        $('#open_btn').closest('div').removeClass('col-md-9').addClass('col-md-12');
                        $('#open_btn').attr('onclick', "show_msg('Open')")
                        $('#close_btn').hide();
                        $('#send_msg_btn').prop('disabled', true);
                        $('#status_p').html(`<b>Status :</b><br><span class="badge badge-danger p-2">Close</span>`)
                    } else {
                        $('#open_btn').closest('div').removeClass('col-md-12').addClass('col-md-9');
                        $('#open_btn').attr('onclick', "")
                        $('#close_btn').show();
                        $('#close_btn').attr('style', 'padding-right: 10px;padding-left: 10px;');
                        $('#send_msg_btn').prop('disabled', false);
                        $('#status_p').html(`<b>Status :</b><br><span class="badge badge-primary p-2">Open</span>`)
                    }
                }
            });
        }
    }

    function preview_file(obj) {
        var fileUrl = $(obj).data('src');
        $.fancybox.open({
            src: fileUrl,
            loop: true,
            type: 'iframe',
            opts: {
                buttons: [
                    'close'
                ],
                iframe: {
                    css: {
                        width: '90%',
                        height: '90%'
                    }
                }
            }
        });
    }
</script>
@endsection