@extends('Users.app')
@section('content')
@php
$int_team = 0;
$external_team_id = 0;
$team_id_assign = $order->assign_project_team;
if ($team_id_assign == $external_team_id) {
$project_file_upload_by_team = 1; //external
} else {

$project_file_upload_by_team = 0;
}
@endphp
<div class="card mb-3" id="ordersTable" data-list="">
    <div class="card-header">
        <div class="row flex-between-center">
            <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Feedback</h5>
            </div>
            <div class="col-8 col-sm-auto ms-auto text-end ps-0">
                <div id="orders-actions">
                    <!-- <button class="btn btn-falcon-default btn-sm" onclick="Addorder()" type="button"><span
                            class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span
                            class="d-none d-sm-inline-block ms-1">Create Order</span></button> -->
                    <!-- <button class="btn btn-falcon-default btn-sm mx-2" type="button"><span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">Filter</span></button>
                    <button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">Export</span></button> -->
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="row top">
              <form action="{{ route('orders') }}" method="POST" class="form-inline d-flex justify-content-between" style="margin-top:10px;">
@csrf
                <div class="col-md-4">               
                        <input type="search"  id="" value="{{ old('term', request('term')) }}" class="search_id form-control" placeholder="Search By Name,Phone,Email,Order Code,Topic,Sort Name" aria-controls="myTable" name="term" value="{{ old('term', request('term')) }}">            
                    <button class="account-search" type="button"> <i class="fa fa-search"></i> </button>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <select name="status" class="form-select form-group" style="padding:6px 0 6px 6px;width:100%;">
                            <option value="">Select Internal Status</option>
                            <option value="TBA" {{ request('status') == 'TBA' ? 'selected' : '' }}>TBA</option>
                            <option value="Not Accepted" {{ request('status') == 'Not Accepted' ? 'selected' : '' }}>Not Accepted</option>
                            <option value="Cancelled" {{ request('status') == 'Cancelled' ? 'selected' : '' }}>Cancelled</option>                           
                            <option value="In Process" {{ request('status') == 'In Process' ? 'selected' : '' }}>In Process</option>
                            <option value="Ready" {{ request('status') == 'Ready' ? 'selected' : '' }}>Ready</option>
                            <option value="Checked" {{ request('status') == 'Checked' ? 'selected' : '' }}>Qua. Approved</option>
                            <option value="Quality Rejected" {{ request('status') == 'Quality Rejected' ? 'selected' : '' }}>Qua. Rejected</option>
                            <option value="Delivered Draft" {{ request('status') == 'Delivered Draft' ? 'selected' : '' }}>Delivered Draft</option>
                            <option value="Delivered" {{ request('status') == 'Delivered' ? 'selected' : '' }}>Delivered</option>
                            <option value="Feedback" {{ request('status') == 'Feedback' ? 'selected' : '' }}>Feedback</option>
                            <option value="Feedback Ready" {{ request('status') == 'Feedback Ready' ? 'selected' : '' }}>Feedback Ready</option>
                            <option value="Payment Refund" {{ request('status') == 'Payment Refund' ? 'selected' : '' }}>Payment Refund</option>
                           
                        </select>
                    </div>
                </div>

                <div class="col-md-2">
                   
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-info">Filter</button>
                   
                    <a href="orders" class="btn btn-default">Reset</a>
                   
                </div>
            </form>
        </div> -->
    <div class="card-body p-0">
        </br>
        <div class="table-responsive scrollbar">
            <div class="row" style="margin-left: 3px;margin-right: 3px;">
                <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                    <div class="form-group">
                        <label for="Postal code" class="label-main">Order Code</label>
                        <input type="text" value="{{$order->order_code}}" class="form-control"
                            readonly="" />
                    </div>
                </div>
                <input type="hidden" name="code" id="ida" value="{{ $order->order_code }}" />
                <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                    <div class="form-group">
                        <label for="Postal code" class="label-main">Email</label>
                        <input type="text" name="" value="{{$order->customer_email}}"
                            class="form-control" readonly="" />
                    </div>
                </div>

                <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                    <div class="form-group">
                        <label for="Postal code" class="label-main">Website / Vendor</label>
                        <input type="text" name="site-sort-name" value="{{$order->site_sort_name}}
                                    " class="form-control" readonly="" id="site-sort-name" />

                    </div>
                </div>

                <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                    @php
                    $total_user = 0;
                    $disable_count = 0;
                    $user_assign = 0;
                    @endphp

                    @if (!empty($user_assign_list))
                    @php
                    $u_assign_name = $user_assign_list;
                    $user_assign_array = explode(',', $user_assign_list);
                    $total_user = count($user_assign_array);
                    $disable_count = substr_count($u_assign_name, '(D)');
                    $user_assign = 1;
                    @endphp

                    <label for="Postal code" class="label-main">Assign to User</label>
                    @else
                    @php
                    if (!empty($team_id_assign) && $team_id_assign != 0) {
                    $u_assign_name = $Teammaster['name'] ?? 'Team Name'; // Fallback in case data not passed properly
                    $user_assign = 1;
                    } else {
                    $u_assign_name = 'N.A.T';
                    $user_assign = 0;
                    }
                    @endphp

                    <label for="Postal code" class="label-main">Assign to Team</label>
                    @endif
                    <input type="text" value="{{$u_assign_name}}" class="form-control" readonly="" />
                </div>


            </div>

            <div class="row">

                            </div>

            <div class="clearfix"></div>

        </div>
    </div>

    @endsection
    <script>
        function insertmsg_internal() {
            var warning = true;

            @if(isset($total_user) && $total_user > 0 && $total_user == $disable_count)
            warning = confirm("Order assigned to disabled writers. Sure you want to float feedback?");
            @endif

            if (warning === true) {
                var image_upload_internal = $('#image_upload_internal').val();
                var message = $('#ChatMsg_internal').val();
                var trimmedMsg = $.trim(message);
                var order_id = $('#order_id_internal').val();
                var msg_length = trimmedMsg.length;
                var type = $("#internal_type1").val();

                $('#error_show_internal12').hide();

                // if($('#DisplayMsg_internal .media:last-child').hasClass("clearification") ==  true){
                    if(type == ''){
                    $('#error_show_internal12').show();
                    return false;
                    }
                //}

                if (type == 3 && $("#feedback_date").val() == '') {
                    $("#feedback_date").css({
                        "border": "1px solid rgb(243 59 59)"
                    });
                    return false;
                }

                if (message == '' || msg_length == 0) {
                    $('#error_show_internal').show();
                } else {
                    var form = $('#internal_chat_form')[0];
                    var data = new FormData(form);
                    var file_exist = $('.image_upload_internal')[0].files[0];

                    if (file_exist) {
                        $('#DisplayMsg_internal').html(`
                    <div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br>Please wait Loading...
                    </div>
                `);

                        s3_upload('image_upload_internal', 'internal_chat_attatchment');
                        data.append('data[Feedback_internal][attechment]', file_arr_insert);
                    }

                    $.ajax({
                        type: "POST",
                        url: "{{ route('insertmsg-internal') }}",
                        processData: false,
                        contentType: false,
                        cache: false,
                        timeout: 600000,
                        data: data,
                    }).done(function(msg) {
                       // $('#chatAudio')[0].play();
                        $('#ChatMsg_internal').val('').empty().focus();
                        $('.editor').html('');
                        $('.html_editor').val('');
                        $("#feedback_date").hide();
                        $("#internal_chat_form").trigger('reset');

                        // if (typeof(filename) != 'undefined' && filename != '') {
                        //     $('#uploadFile_internal').val('');
                        //     $('#image_upload_internal').val('');
                        // } else {
                            getmsg_internal('load_bottom');
                       // }

                        file_arr_insert = [];
                    });
                }
            } else {
                $('#ChatMsg_internal').val('').empty().focus();
                $('.editor').html('');
                $('.html_editor').val('');
            }
        }
        let file_arr = [];
        let file_arr_insert = [];
        const _validFileExtensions = [".jpg", ".txt", ".ods", ".odt", ".xls", ".xlsx", ".jpeg", ".docx", ".doc", ".png", ".pdf", ".ppt", ".pptx", ".pfd", ".zip", ".rar", ".tar.gz", ".csv"];

        function s3_upload(form_name, folder_name) {
            console.log(4)
            var fp = $('.' + form_name);
            // console.log(fp).die();
            var lg = fp.length; // get length
            var items = fp;
            var fragment = "";
            var ext_er = 0;
            var filesize = 0;

            if (lg > 0) {
                for (let i = 0; i < lg; i++) {
                    let fileInput = items[i].files[0];
                    let fileName = fileInput.name;
                    filesize += fileInput.size;

                    // Optional: Enable extension validation
                    // let file_ext = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
                    // if (!_validFileExtensions.includes("." + file_ext)) {
                    //     fp.val('');
                    //     return sendError(fp, 'Please select a valid file');
                    // }

                    let data = new FormData();
                    data.append('files_array', fileInput);
                    data.append('site_sort_name', $('#site-sort-name').val());
                    data.append('folder_name', folder_name);
                    data.append(' _token', '{{ csrf_token() }}');

                    file_arr.push(fileName);

                    $.ajax({
                        async: false,
                        type: "POST",
                        url: "{{ route('upload.s3') }}",
                        data: data,
                        processData: false,
                        dataType: 'JSON',
                        contentType: false,
                        cache: false,
                        timeout: 600000,
                        success: function(response) {
                            if (response.name && folder_name === 'internal_chat_attatchment') {
                                file_arr_insert.push(response.name);
                            }
                        }
                    });
                }

                if (filesize > 104857600) { // 100MB
                    fp.val('');
                    $('.continue-btn').css({
                        'pointer-events': 'inherit',
                        'opacity': '1'
                    });
                    return sendError(fp, 'Please select files smaller than 100 MB');
                }

                if (folder_name === 'internal_chat_attatchment') {
                    $('#new_upload_file_name').val(file_arr_insert.join(','));
                }
            }
        }

        function setfilename1_internal(val) {
            var fileName = val.substr(val.lastIndexOf("\\") + 1, val.length);
            document.getElementById("uploadFile_internal").value = fileName;
        }

        function getmsg_internal(h) {
            $.ajax({
                type: "POST",
                url: "{{ route('getmsg_internal') }}", // Define this route in web.php
                data: {
                    order_id: $('#order_id_internal').val(),
                    _token: '{{ csrf_token() }}' // Include CSRF token
                },
                beforeSend: function() {
                    if (h === 'yes') {
                        $('#DisplayMsg_internal').html(
                            `<div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br/>Please wait Loading...
                    </div>`
                        );
                    }
                },
            }).done(function(msg) {
                $('#DisplayMsg_internal').html(msg);

                if (h === 'load_bottom' || h === 'yes') {
                    $('#DisplayMsg_internal').scrollTop($('#DisplayMsg_internal')[0].scrollHeight);

                    @if($int_team == 0)
                    getfeedbacktotal();
                    @elseif($role == 4 || $role == 6)
                    get_admin_chat();
                    @endif
                }
            });
        }
      function changeType(val){      
        $('#feedback_date').datepicker({
                autoclose: true, // Automatically close the calendar after selecting a date
                todayHighlight: true, // Highlight today's date
                format: 'yyyy-mm-dd'
            });
            $("#feedback_date").hide();
            if(val == 3){
                $("#feedback_date").show();
            }
      }
    </script>
    <style>
        .dashboard-box {
            display: block;
            border: 1px solid #e9ebf0;
            border-radius: 4px;
            margin: 10px 0px;
        }

        .topred {
            border-left: 2px solid red;
            padding: 10px;
            border-radius: 2px;
            background: antiquewhite;
        }

        .topred h2 {
            font-size: 15px;
            font-family: 'open_sansregular';
            font-weight: 400;
            color: red;
            margin: 0;
        }

        .bottom {
            background: #F9FAFC;
            padding: 20px 20px 10px 20px;
            width: 100%;
        }

        .comment {
            padding: 10px 0px;
            font-size: 12px;
            color: #666;
        }

        .col-lg-6 .chat_row {
            margin-left: -25px !important;
            margin-top: -25px !important;
            margin-right: -25px !important;
            margin-bottom: -35px !important;
        }

        .msg_internal_team {
            color: #a94442;
            overflow-x: scroll;
            /* background-color: #f2dede; */
            background: url('/falcon-theme/assets/img/chat_back.jpg');
            padding: 15px;
            border: 2px solid #ebccd1;
            border-radius: 4px;
            padding: 10px;
        }

        .feedback_convert {
            overflow: scroll;
            height: 450px;
            overflow-x: hidden;
        }

        a.tip span {
            top: 14px;
            left: -1px;
            width: 160px;
        }

        a.tip {
            cursor: pointer !important;
        }

        .clearification .media-body {
            background: #fff0ba !important;
        }

        .media1.clearification .media-body::before {
            border-left: 15px solid #fff0ba !important;
        }

        .media.clearification .media-body::before {
            border-right: 15px solid #fff0ba !important;
        }

        .clarification_resolved .media-body {
            background: #a8dca8ad !important;
        }

        .media1.clarification_resolved .media-body::before {
            border-left: 15px solid #a8dca8ad !important;
        }

        .media.clarification_resolved .media-body::before {
            border-right: 15px solid #a8dca8ad !important;
        }

        .feedback_convert .media {
            float: left;
            width: 100%;
        }

        .media {
            margin-bottom: -6px;
        }

        .feedback_convert .media .media-left {
            float: left;
            width: 35px;
            height: 35px;
            text-align: center;
            background: #FFF;
            margin: 0px;
            padding: 0px 0px 0px 0px;
            border-radius: 20px;
            margin-right: 0px;
            font-size: 16px;
            position: relative;
            overflow: hidden;
        }

        .feedback_convert .media .media-body {
            float: left;
            padding: 4px 9px;
            margin-left: 12px;
            width: 87%;
            background: #e2dfdf;
            border-radius: 7px;
            border: 1px solid #d0a7a7;
        }

        .media-txt {
            line-height: 21px;
        }

        .media-body span {
            font-size: 12px;
            color: #666;
        }
       
    .media {
        margin-top: 15px;
        margin-bottom: -6px;
    }
    .feedback_convert .media1 {
        float: left;
        width: 100%;
        float: left;
        margin: 11px 0px 0px 0px;
    }
    .feedback_convert .media1 .media-left {
        float: right;
        height: 38px;
        text-align: center;
        /* background: none repeat scroll 0% 0% #FFF; */
        /* margin: 0px 36px 0px 0px; */
        padding: 0px;
        border-radius: 20px;
        font-size: 16px;
        position: relative;
        overflow: hidden;
    }
    .feedback_convert .media1 .media-body {
        float: left;
        padding: 4px 7px;
        margin-right: 0px;
        width: 86.5%;
        background: #ffffff;
        border-radius: 7PX;
        border: 1px solid #b8c3c6;
    }
    .feedback_convert .media1 .media-body::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 12px solid transparent;
        border-left: 15px solid #ffffff;
        border-bottom: 12px solid transparent;
        float: right;
        position: relative;
        margin-top: 4px;
        margin-right: -22px;
        z-index: 1;
    }
    </style>