<?php
function calculateDays($d){
    $now = time();
    $d = strtotime($d);
    $datediff = $d - $now;
    return round($datediff / (60 * 60 * 24));
}
?>
<link href="<?= $base_url ?>css/project-details.css" rel="stylesheet" type="text/css" />
<script src="http://jsfiddle.net/ch6yn/2691/#&togetherjs=Mr92J76D49"></script>
<section class="pcoded-main-container">
    <div class="pcoded-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h5 class="m-b-10">Project : <?= @$project->topic; ?><span class="ml-2 badge bg-secondary text-white"><?= @$project->status ?></span>
                                <a class="btn  btn-secondary pull-right ml-2" href="<?= $this->Url->build(["controller" => "Projects", "action" => "index"]); ?>"><i class="feather icon-chevron-left"></i> Go Back</a>
                                <a class="btn btn-danger pull-right text-white" data-id="floatFeedback" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="feather icon-list"></i> Float Feedback</a>

                            </h5>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <?php if ($project->status == 'Disable') { ?>
                    <div class="alert alert-danger" role="alert">
                        <b>Note:</b> Project is <b>Disable</b> so it is not available for bidding to the Users.
                    </div>
                <?php } ?>

            </div>
            <div class="col-xl-4 col-lg-12 task-detail-right">
                <!-- <div class="card">
                    <div class="card-body bg-c-blue">
                        <div class="counter text-center">
                            <h4 id="timer" class="text-white m-0"></h4>
                        </div>
                    </div>
                </div> -->
                <?php
                $freelancer_class = "display:none;";
                if (isset($project['freelancer']) && !empty($project['freelancer'])) {
                    $freelancer_class = "displa:block;";
                }
                ?>
                <div id="accordion">

                    <div class="card">
                        <div class="card-header" style="padding: 15px 25px 8px 16px !important;">
                            <h4 class="collah4sed card- accordion-title" data-toggle="collapse" href="#collapseOne" style="font-size: 17px;">
                                Details
                            </h4>
                        </div>
                        <div id="collapseOne" class="collapse show" data-parent="#accordion">
                            <div class=" user-card user-card-1" id="assignedData" style="<?= $freelancer_class; ?>">
                                <div class="card-header ml-2 border-0 p-2 pb-0" style="padding: 15px 25px 8px 16px !important;">

                                    <h6 class="as_task"><i class="feather icon-check-square"></i> Assigned to Freelancer</h6>
                                    <img src="assets/images/widget/slider5.jpg" alt="" class="img-fluid">

                                </div>
                                <div class="card-body pt-0" id="freelancerDiv">
                                    <div class="user-about-block text-center">
                                        <div class="row align-items-end">
                                            <div class="col"></div>
                                            <div class="col"><img class="img-radius img-fluid wid-80" src="<?= $base_url; ?>/img/user.png" alt="User image"></div>
                                            <div class="col"></div>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <h6 class="mb-1 mt-3"> <?= $this->Html->link($project['freelancer']['name'], ['controller' => 'Freelancers', 'action' => 'view', $project['freelancer']['id']]); ?></h6>

                                        <p class="mb-3 text-muted"><?php $proffArr = explode(',', $project['freelancer']['proficient']);
                                                                    foreach ($proffArr as $key => $proff) {
                                                                        if (isset($subjects[$proff])) {
                                                                            echo $subjects[$proff] . ', ';
                                                                        }
                                                                    }
                                                                    ?></p>
                                    </div>
                                    <table class="table text-left">
                                        <tbody>
                                            <tr>
                                                <td>Open Status</td>
                                                <td class="text-right"> <?= ($project->view == 0) ? ' <span class="badge bg-danger text-white"> Not opened </span>' : ' <span class="badge text-white bg-primary">open</span>'; ?></td>
                                            </tr>
                                            <tr>
                                                <td>Internal Note</td>
                                                <td class="text-right"> <?= $project->remarks ?></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="user-card1">
                                <div class="card-header mb-3">
                                    <h6 class="float-left as_task">Project Details</h6>
                                    <?php echo $this->Html->link('<i class="feather icon-edit" ></i>', array('controller' => 'Projects', 'action' => 'edit', $project->id), array('class' => 'btn btn-dark pull-right', 'escape' => false), array()); ?>
                                </div>
                                <div class="mr-4 ml-4 task-details">
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <td><i class="far fa-calendar-alt m-r-5"></i> Deadline:</td>
                                                <td class="text-right"><?= date('d M, Y', strtotime($project->deadline_date)); ?></td>
                                            </tr>
                                            <tr>
                                                <td><i class="far fa-calendar-alt m-r-5"></i> Bid Expire:</td>
                                                <td class="text-right"><?= date('d M, Y', strtotime($project->bid_expiry_date)); ?></td>
                                            </tr>
                                            <tr>
                                                <td><i class="far fa-credit-card m-r-5"></i> Created:</td>
                                                <td class="text-right"><?= date('d M, Y', strtotime($project->created)); ?></td>
                                            </tr>
                                            <?php if ($project->website != '') { ?>
                                                <tr>
                                                    <td id="website"><i class="fas fa-chart-line m-r-5"></i> Website:</td>
                                                    <td class="text-right">
                                                        <?= h($project->website) ?>
                                                    </td>
                                                </tr>
                                            <?php } ?>
                                            <tr>
                                                <td><i class="fas fa-thermometer-half m-r-5"></i> Status:</td>
                                                <td class="text-right" id="status"><?= @$project->status ?></td>
                                                </tu>
                                        </tbody>
                                    </table>
                                </div>



                            </div>

                        </div>
                    </div>

                    <!-- <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link accordion-title" data-toggle="collapse" href="#collapseThree">
                                    Collapsible Group Item #3
                                </a>
                            </div>
                            <div id="collapseThree" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    Lorem ipsum..
                                </div>
                            </div>
                        </div> -->
                </div>
                <div class="card">
                    <div class="card-header" style="padding: 15px 25px 8px 16px !important;">
                        <h4 class="collah4sed card- accordion-title" data-toggle="collapse" href="#collapseTwo" style="font-size: 17px;">
                            Project Attached Files
                        </h4>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">
                        <?php
                        if (trim($project->file_data) != '') {
                            $fileArr = explode('?|@$', $project->file_data);
                        ?>
                            <div class="card-header " style="padding: 10px 25px 8px 27px !important;">
                                <h6>Attchment Files</h6>
                            </div>
                            <div class="card-body task-attachment">
                                <ul class="media-list p-0">
                                    <?php foreach ($fileArr as $k => $file) { ?>
                                        <li class="media d-flex m-b-15">
                                            <div class="m-r-20 file-attach">
                                                <i class="far fa-file f-28 text-muted"></i>
                                            </div>
                                            <div class="media-body">
                                                <a href="#!" class="m-b-5 d-block text-secondary"><?= $file ?></a>
                                            </div>

                                            <div class="float-right text-muted">
                                                <a target="_blank" download="<?= $file ?>" href="<?= $s3url . '../' . $file ?>"><i class="fas fa-download f-18"></i></a>
                                            </div>
                                        </li>
                                    <?php } ?>
                                </ul>
                            </div>
                        <?php } ?>
                        <?php if (!empty($submitFiles)) { ?>
                            <div class="card-header" style="padding: 10px 25px 8px 27px;">
                                <h6>Submitted Files</h6>
                            </div>
                            <div class="card-body task-attachment overflow-auto" style="max-height: 400px;">
                                <div class="project-content table-responsive">
                                    <table class="table project-table">
                                        <thead class="project-table-head">
                                            <tr>
                                                <th scope="col">Date</th>
                                                <th scope="col">Description</th>
                                                <th scope="col">Attachment</th>
                                            </tr>
                                        </thead>
                                        <tbody class="project-table-body">
                                            <?php foreach ($submitFiles as $k => $submit) {
                                                if (!empty($submit['file'])) {
                                            ?>
                                                    <?php foreach ($submit['file'] as $delivery) { ?>
                                                        <tr>
                                                            <td><?= date('d-m-Y', strtotime($submit['date'])) ?></td>
                                                            <td><?= $submit['desc'] ?></td>
                                                            <td><a href="<?= $s3url . $delivery ?>" class="blue-clr" target="_blank">Download</a></td>
                                                        </tr>
                                                    <?php  }
                                                } else { ?>
                                                    <tr>
                                                        <td><?= date('d-m-Y', strtotime($submit['date'])) ?></td>
                                                        <td><?= $submit['desc'] ?></td>
                                                        <td>No Documents Found</td>
                                                    </tr>

                                            <?php }
                                            } ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        <?php } ?>


                    </div>
                </div>
            </div>


            <div class="col-xl-8 col-lg-12">
                <div class="card">
                    <div class="widget-chat-box">
                        <div class="card-header text-center" style="padding: 10px 10px 3px 10px;">
                            <h4>Conversation with User</h4>
                        </div>
                        <div class="card-body">
                            <div class="chat-scroll" id="manageChat" style="height: 343px;position:relative;padding: 10px 0px 0px 0px;overflow-x: auto">

                            </div>
                            <div class="right-icon-control m-t-15">
                                <form id="chats">
                                    <div class="input-group input-group-button">
                                        <input type="text" class="form-control" id="messageInput" name="message" placeholder="Send message">
                                        <input type="file" hidden multiple class="form-control" name="attachment[]" placeholder="" id="attachment">
                                        <label class="btn  btn-secondary" for="attachment" style="margin: 0;padding: 6px 16px;"><i class="feather icon-paperclip m-0"></i></label>
                                        <div class="input-group-append">
                                            <button id="sendMessage" class="btn waves-effect waves-light btn-primary waves-effect waves-light" type="submit">
                                                <i class="feather icon-message-circle m-0"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="dflex input-append">

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" style="padding: 15px 25px 8px 16px !important;">
                        <h4 class="collah4sed card- accordion-title" data-toggle="collapse" href="#collapsethree" style="font-size: 17px;">
                            Project Details
                        </h4>
                    </div>
                    <div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class=" section_report">
                            <div class="row border-bottom des-header">
                                <section class="left col-xl-8 col-lg-12">
                                    <div class="title"> <?= $project->topic ?> </div>
                                    <div class="fix-price"><span>Fixed Price :</span> <strong>$ <?= $project->price ?></strong></div>
                                    <ul>
                                        <li><span>Type:</span> <?= $project->service ?></li>
                                        <li><span>Subject: </span><?= $project->subject ?></li>
                                        <li><span>Page/Word: </span>$ <?= $project->pages . '/' . $project->words ?></li>
                                        <li><span class="dadline">Deadline: </span><?= date('d M, Y', strtotime($project->deadline_date)) ?></li>
                                    </ul>
                                </section>
                                <section class="right col-xl-4 col-lg-12">
                                    <div class="deadline-btn">Deadline: <span><?= calculateDays($project->deadline_date) ?> Day Left</span></div>
                                    <!-- <button type="button" class="btn chat-btn">Chat Now</button> -->
                                </section>
                            </div>
                            <div class="article1 mt-3">
                                <?= ($project->description) ?>
                            </div>
                            <div class="bottom-detils border-top">
                                <ul>
                                    <li><span>Posted on:</span> <?= date('d M, Y', strtotime($project->created)) ?></li>
                                    <li><span>Project ID:</span>#<?= $project->id ?></li>
                                </ul>
                            </div>
                        </div>
                      


                        <hr>

                        <?php if (!isset($project['freelancer']) && empty($project['freelancer']) && !empty($project->bids)) { ?>
                            <div class="card-body table-border-style">
                                <div class="table-responsive dataTables_wrapper dt-bootstrap4" style="overflow: hidden;">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <h4><?= __('Placed Bids') ?></h4>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="pull-right">
                                                <div id="colum-rendr_filter" class="dataTables_filter">
                                                    <label><input type="search" id="myInput" placeholder='Search by freelancer' name="freelancers" onkeyup="myFunction()" class="form-control" aria-controls="bids"></label>
                                                    <!-- <button type="submit" class="btn btn-success"><i class="fas fa-search"></i> Submit</button> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <table cellpadding="0" cellspacing="0" class="table" id="myTable">
                                        <thead>
                                            <th scope="col"><?= __('Id') ?></th>
                                            <th scope="col"><?= __('Freelancer') ?></th>
                                            <th scope="col"><?= __('Placed On') ?></th>
                                            <th scope="col" class="actions"><?= __('Actions') ?></th>
                                        </thead>
                                        <?php $count = 1;
                                        foreach ($project->bids as $bids) :
                                        ?>
                                            <tr>
                                                <td><?= $count++ ?></td>
                                                <td><?= $this->Html->link($bids->freelancer->name, ['controller' => 'freelancers', 'action' => 'view', $bids->freelancer_id], ['target' => '_blank'], ['controller' => 'freelancers', 'action' => 'view', $bids->freelancer_id]); ?>
                                                </td>
                                                <td><?= date('d-M-Y H:i A', strtotime($bids->created)) ?></td>
                                                <td class="actions">

                                                    <?= $this->Html->link($this->Html->tag('i', '', array('class' => "fas fa-eye btn btn-success", 'traget' => '_blank')), array('controller' => 'Bids', 'action' => 'view', $bids->id), array('escape' => false, 'target' => '_blank'))
                                                    ?>
                                                    <a href="javascript:;"><span onclick="assignProject('<?= h($bids->freelancer->name) ?>','<?= $bids->freelancer_id; ?>')"><i class="feather icon-check-circle btn btn-icon btn-success"></i></span></a>

                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </table>
                                </div>
                            </div>
                        <?php }  ?>
                    </div>
                </div>

            </div>

        </div>
    </div>
</section>
<button type="button" id="modal_open" data-toggle="modal" data-target="#exampleModal" style="display: none;"></button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Assign Project(<?= $project->id; ?>)</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <form id="projectAssignForm" method="post">
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Freelancer:</label>
                        <input type="text" class="form-control" id="fr_name" name="freelancer_id" readonly>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Remarks (Internal Team):</label>
                        <textarea class="form-control" id="message-text" name="remarks"></textarea>
                    </div>
                    <input type="hidden" name="freelancer_id" id="fr_id">
                    <input type="hidden" id="" name="project_id" value="<?= $project->id; ?>">
                    <input type="hidden" id="" name="project_name" value="<?= $project->topic; ?>">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn  btn-secondary close_modal" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn  btn-primary" onclick="saveProject()">Submit</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
                <div class="card widget-chat-box" style="height: 450px;">
                    <div class="card-header text-center" style="padding: 10px 10px 3px 10px;">
                        <h4>Project Feedback </h4>
                    </div>
                    <div class="card-body p-2 overflow-auto" >
                        <div class="project-content table-responsive">
                            <table class="table project-table">
                                <thead class="project-table-head">
                                    <tr>
                                        <th scope="col">Date123</th>
                                        <th scope="col">Description</th>
                                        <!-- <th scope="col">Upload By</th> -->
                                        <th scope="col">Attachment</th>
                                    </tr>
                                </thead>
                                <tbody class="project-table-body">
                                        <?php 
                                        foreach ($feedback as $j => $feed) {
                                        if(!empty($feed->attachment)){
                                            $files= json_decode($feed->attachment);
                                        ?>
                                        <?php foreach ($files->attachment as $file){?>
                                                <tr>
                                                    <td><?= date('d-m-Y',strtotime($feed['submitted_date'])) ?></td>
                                                    <td><?= $feed['description'] ?></td>
                                                    <td><a href="<?= $s3url.$file ?>" class="blue-clr" 
                                                                target="_blank">Download</a></td>
                                                </tr>
                                        <?php  } 
                                    }else{ ?>
                                            <tr>
                                                <td><?= date('d-m-Y',strtotime($feed['submitted_date'])) ?></td>
                                                <td><?= $feed['description'] ?></td>
                                                <td>No Documents Found</td>
                                            </tr>
                                    <?php } } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="right-icon-control m-3">
                        <form id="feedback">
                            <div class="input-group input-group-button">
                                <input type="text" class="form-control" id="feedbackInput" name="description" placeholder="Enter description">
                                <input type="file" multiple class="form-control" name="attachFile[]" placeholder="" id="attachFile">
                                
                                <div class="input-group-append">
                                    <button id="submitFeedback" class="btn waves-effect waves-light btn-primary waves-effect waves-light" type="submit">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                </div>
    </div>
  </div>
</div>  

<script type="text/javascript">
    document.getElementById("status").addEventListener("input", function() {
        document.getElementById("website").value += "input event fired\n";
    }, false);



    var target = $('#assignedData');

    function assignProject(fr_name, fr_id) {
        console.log(fr_name);
        $('#fr_name').val(fr_name);
        $('#fr_id').val(fr_id);
        $('#modal_open').trigger('click');
    }

    function saveProject() {
        $("#assignedData").show();
        $(".as_task").html('Assigning ...');
        $('#freelancerDiv').html('<div class="spinner-grow" role="status"><span class="sr-only">Loading...</span></div>');
        $('.close_modal').trigger('click');
        $.ajax({
            url: '<?php echo $this->Url->build(["controller" => "Projects", "action" => "assignProject"]); ?>',
            type: 'post',
            data: $("#projectAssignForm").serialize(),
            success: function(data) {
                // console.log(data);
                location.reload();
                setTimeout(function() {
                    $('#assignedData').html('').html(data);
                }, 3000);
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    }

    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }


    // // Set the date we're counting down to
    // var d = new Date('<?= $project->deadline_date; ?>');
    // console.log(d);
    // d.setDate(d.getDate());
    // var countDownDate = new Date(d).getTime();
    // //console.log(countDownDate)
    // // Update the count down every 1 second
    // var x = setInterval(function() {
    //     // Get todays date and time
    //     var now = new Date().getTime();
    //     // Find the distance between now and the count down date
    //     var distance = countDownDate - now;
    //     // Time calculations for days, hours, minutes and seconds
    //     var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    //     var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    //     var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    //     var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    //     // Output the result in an element with id="demo"
    //     document.getElementById("timer").innerHTML = "<b>" + days + "</b>days : <b>" + hours + "</b>h : <b>" +
    //         minutes + "</b>m : <b>" + seconds + "</b>s ";

    //     // If the count down is over, write some text
    //     if (distance < 0) {
    //         clearInterval(x);
    //         document.getElementById("timer").innerHTML = "Times over";
    //     }
    // }, 1000);



    //Order JS
    $("#attachment").on('input', function() {
        var files = document.getElementById("attachment").files;
        $(files).each((i, e) => {
            $('.input-append').append(`<a class="w-50 text-right" target="_blank" href="<?= s3url ?>${e}">${e.name.substr(0,10)}
                                            <img src=" http://localhost/workolics/CRM/img/file-upload.svg " width="30" class="float-end me-2 " alt="avatar 1" blank=""></a>`)
        })
    });
    $("#messageInput").keyup(function() {
        $('.is-invalid').removeClass('is-invalid');
    });
    $("#chats").submit(function(e) {
        // function sendChat(e){
        e.preventDefault();
        var message = $("#messageInput").val();
        var attachment = $("#attachment").val();
        const formData = new FormData(this);
        formData.append('project_id', `<?= $project->id ?>`);
        // console.log(formData);
        if (message.trim() == '') {
            $("#messageInput").addClass('is-invalid');
            $("#attachment").addClass('is-invalid');
        } else {
            $("#sendMessage").html(`<svg width="20px" height="20px" id="emailcheckloader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling lm_loader" style="background: none;vertical-align: sub;">
                    <circle cx="50" cy="50" fill="none" stroke="#fff" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(204.887 50 50)">
                    <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
                    </circle>
                    </svg>`);
            $.ajax({
                type: 'post',
                url: '<?= $this->Url->build(["controller" => "Chats", "action" => "insertByAjax"]) ?>',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                success: function(res) {
                    getChat();
                    document.getElementById("chats").reset();
                    $('.input-append').html('');
                    $('#sendMessage').html(`<i class="feather icon-message-circle m-0"></i>`);
                }
            });
        }
    });
    // }

    function getChat() {
        var html = '';
        var attachment = '';
        $.ajax({
            type: 'post',
            url: '<?= $this->Url->build(["controller" => "Chats", "action" => "getChatByAjax"]) ?>',
            data: {
                project_id: <?= $project->id ?>,
                to_id: `<?= $project->freelancer->id ?>`
            },
            dataType: 'json',
            success: function(res) {
                if (res.status) {
                    $(res.chat).each((i, e) => {

                        if (e.attachment != null && e.attachment.length > 0) {
                            attachment = '';
                            var fileData = JSON.parse(e.attachment).attachment;
                            $(fileData).each(function(index, element) {
                                attachment +=
                                    `<a class="w-50 text-right" target="_blank" href="<?= s3url ?>${element}">${element.split('/')[1].split('.')[1].toUpperCase()}
                                             <i class="fas fa-download f-18"></i></a>`;
                            });
                        };
                        if (e.from_id != 0) {
                            html +=
                                `<div class="media col-sm-7 float-right flex-wrap " >
                                <div class="d-flex w-100 flex-wrap"> ${attachment}</div>
                                        <div class="media-body  receive-chat">
                                            ` + e.message + `
                                            <span class="time">
                                            ` + moment(e.created).format('YYYY-MM-DD HH:mm:ss') + `
                                            </span>
                                        </div>
                                    </div>`;
                        } else {
                            html += `<div class="media col-sm-7 float-left flex-wrap">
                            <div class="d-flex w-100 flex-wrap"> ${attachment}</div>
                                        <img class="d-flex  m-r-15" src="<?= $base_url; ?>/img/user.png" alt="Generic placeholder image" style="width:40px;">
                                       
                                        <div class="media-body send-chat">
                                        ` + e.message + `
                                            <span class="time">` + moment(e.created).format('YYYY-MM-DD HH:mm:ss') + `</span>
                                        </div>
                                    </div>`;
                        }
                        attachment = '';
                    });
                } else {
                    html += `<p>No Chat History Found </p>`;
                }
                $(`#manageChat`).html(html);

                scrollBottom();
            }
        });
    }
    $(document).ready(function() {
        getChat()
    });

    window.setInterval(function() {
        getChat();
    }, 10000 * 6);

    function scrollBottom() {
        const messages = document.getElementById('manageChat');
        messages.scrollTop = messages.scrollHeight;
    }

    //project view code 

    document.getElementById("status").addEventListener("input", function() {
        document.getElementById("website").value += "input event fired\n";
    }, false);



    var target = $('#assignedData');

    function assignProject(fr_name, fr_id) {
        console.log(fr_name);
        $('#fr_name').val(fr_name);
        $('#fr_id').val(fr_id);
        $('#modal_open').trigger('click');
    }

    function saveProject() {
        $("#assignedData").show();
        $(".as_task").html('Assigning ...');
        $('#freelancerDiv').html('<div class="spinner-grow" role="status"><span class="sr-only">Loading...</span></div>');
        $('.close_modal').trigger('click');
        $.ajax({
            url: '<?php echo $this->Url->build(["controller" => "Projects", "action" => "assignProject"]); ?>',
            type: 'post',
            data: $("#projectAssignForm").serialize(),
            success: function(data) {
                // console.log(data);
                setTimeout(function() {
                    $('#assignedData').html('').html(data);
                }, 3000);
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    }

    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }


    // // Set the date we're counting down to
    // var d = new Date('<?= $project->deadline_date; ?>');
    // console.log(d);
    // d.setDate(d.getDate());
    // var countDownDate = new Date(d).getTime();
    // //console.log(countDownDate)
    // // Update the count down every 1 second
    // var x = setInterval(function() {
    //     // Get todays date and time
    //     var now = new Date().getTime();
    //     // Find the distance between now and the count down date
    //     var distance = countDownDate - now;
    //     // Time calculations for days, hours, minutes and seconds
    //     var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    //     var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    //     var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    //     var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    //     // Output the result in an element with id="demo"
    //     document.getElementById("timer").innerHTML = "<b>" + days + "</b>days : <b>" + hours + "</b>h : <b>" +
    //         minutes + "</b>m : <b>" + seconds + "</b>s ";

    //     // If the count down is over, write some text
    //     if (distance < 0) {
    //         clearInterval(x);
    //         document.getElementById("timer").innerHTML = "Times over";
    //     }
    // }, 1000);
    $("#feedback").submit(function(e) {
        e.preventDefault();
        var feedback = $("#feedbackInput").val();
        // var attachment = $("#attachment").val();
        const formData = new FormData(this);
        formData.append('project_id', `<?= $project->id ?>`);
        if (feedback.trim() == '') {
            $("#feedbackInput").addClass('is-invalid');
            $("#attachFile").addClass('is-invalid');
        } else {
            $("#submitFeedback").html(`<svg width="20px" height="20px" id="emailcheckloader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling lm_loader" style="background: none;vertical-align: sub;">
                    <circle cx="50" cy="50" fill="none" stroke="#fff" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(204.887 50 50)">
                    <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
                    </circle>
                    </svg>`);
            $.ajax({
                type: 'post',
                url: '<?= $this->Url->build(["controller" => "Feedbacks", "action" => "feedbackSubmit"]) ?>',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                success: function(res) {
                    document.getElementById("feedback").reset();
                    window.location='';                                        
                }
            });
        }
    });



</script>