@extends('layouts.app')

@section('content')
@include('admin.adminheader')
   
<div class='container'>
    <div class="page-title-box">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        <h4 class="page-title">Order Details</h4>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
                            <li class="breadcrumb-item active">Order Details</li>
                        </ol>
                    </div>
                </div>
                <!-- end row -->
    </div>
         @foreach($orderdetail as $detail)
            <div class="row mt-2">
                <div class="col-md-12">
                    <div class='row'>
                        <div class="col-md-6">
                        <h2>Order #{{strtoupper($detail->ordernumber)}}</h2>
                        </div>
                        <div class="col-md-6 text-end">
                            <a class='btn btn-primary btn-sm' target='_blank' href='{{ route("view-invoice",$detail->client_id) }}'><i class="fa-solid fa-file"></i> View Invoice</a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-7">
                            <div class="business-info-sec"> 
                            <hr>
                                <div class='row'>
                                    <div class='col-md-12'>
                                    <h5>Personal Information</h5>
                                    <p><i class='fas fa-user'></i> {{$detail->first_name}} {{$detail->last_name}}</p>
                                        <p><i class='fas fa-envelope'></i> {{$detail->email}}</p>
                                        <p><i class='fas fa-phone-square'></i> {{$detail->phone}}</p>
                                    </div>
                                </div>
                            <hr>
                                <div class='row'>
                                    <h5>Business Information</h5>
                                    <p>{{$detail->bname}}</p>
                                    <div class='col-md-6'>
                                        <p>Invoice #{{$detail->invoice_id}}</p>
                                        <p><i class='fas fa-envelope'></i> {{$detail->bemail}}</p>
                                        <p><i class='fas fa-phone-square'></i> {{$detail->bphone}}</p>
                                    </div>
                                    <div class='col-md-6'>
                                        <p><i class='fab fa-bandcamp'></i> {{$detail->category}}</p>
                                        <p><i class='fas fa-clock'></i> {{$detail->timezone}}</p>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="radius-detail">
                                <div class='row'>
                                    <div class='col-md-6'>
                                         <h5>{{$detail->radius}} Miles</h5>
                                         <p><i class='fas fa-map-marked-alt'></i> {{$detail->radius_address}}</p>
                                         <h5>Assist By</h5>
                                <p><i class='fas fa-user'></i> {{$detail->closer_name}}</p>
                                    </div>
                                    <div class='col-md-6'>
                                        <h5>{{$detail->productname}}</h5>
                                        @if($detail->newprice)
                                        <p>Discounted Price:<br> <b>${{$detail->newprice}}</b></p>
                                        <p>Coupon Code:<br> <b>{{$detail->code}}</b></p>
                                        @else
                                        <p>${{$detail->price}}</p>
                                        @endif

                                    </div>
                                </div>
                            </div>
                                                  
                        </div>
                        <div class="col-md-5">
                            <img style='width:100%;border-radius:5px;' src='{{$detail->radius_image}}'>
                    </div>
                </div>
            </div>
            @endforeach
            <hr>
            <div class="row d-flex justify-content-center">
                <div class="col-md-12 py-2">
                <h4 class="mt-2">Campaign Comments</h4>
                    <div class="comment-div mt-3" id="style-7">
                     
                      
                    </div>
                    <div class="comment-box-form">
                       <form id="commentform">
                        
                            <div>
                                @foreach($orderdetail as $ord)
                                <input type='hidden' name='order_id' value='{{$ord->order_id}}'>
                                <input type='hidden' id="userid" name='userid' value='{{$ord->userid}}'>
                                @endforeach
                                <textarea class="form-control" id="comments" name="comments" rows="20" placeholder="Write details..."></textarea>
                                <button class="mt-2 btn btn-primary" type="submit">Add Comment</button>
                            </div>
                       </form>
                    </div>
                </div>
            </div>
</div>

<script>
$(document).ready(function() {

    let editorInstance;
        ClassicEditor
            .create(document.querySelector('#comments'),{
                height: '500px'
            })
            .then(editor => {
                editorInstance = editor;
            })
            .catch(error => {
                console.error(error);
            });

    showcomments();

    function showcomments(){
        var clientid = $('#userid').val();
        $.ajax({
            type: 'GET',
            url: `{{ url('admin/show-admin-comments') }}/${clientid}`,
            success: function(response){
                editorInstance.setData('');
                $("#style-7").empty();
                $.each(response,function(index,item){
                    let formattedDate = formatDate(item.created_at);
                    console.log(item.created_at);
                    document.getElementById("style-7")
                .innerHTML+=
                `<div class="comment-box">
                <span style="font-size: 16px;font-weight: 700;">`
                +item.first_name+
                ` `+item.last_name+`</span> &nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp; <span class="comment-date">`+formattedDate+ `</span><p class="mt-2">`+item.comments+`</p></div>`;
                });
               
                    
    
            }
        });
    }

    // Helper function to format date
    function formatDate(dateString) {
        let now = new Date();
    let date = new Date(dateString);
    let seconds = Math.floor((now - date) / 1000);
    
    let interval = Math.floor(seconds / 31536000);
    if (interval >= 1) {
        return interval + " year" + (interval > 1 ? "s" : "") + " ago";
    }
    interval = Math.floor(seconds / 2592000);
    if (interval >= 1) {
        return interval + " month" + (interval > 1 ? "s" : "") + " ago";
    }
    interval = Math.floor(seconds / 86400);
    if (interval >= 1) {
        return interval + " day" + (interval > 1 ? "s" : "") + " ago";
    }
    interval = Math.floor(seconds / 3600);
    if (interval >= 1) {
        return interval + " hour" + (interval > 1 ? "s" : "") + " ago";
    }
    interval = Math.floor(seconds / 60);
    if (interval >= 1) {
        return interval + " minute" + (interval > 1 ? "s" : "") + " ago";
    }
    return Math.floor(seconds) + " second" + (seconds > 1 ? "s" : "") + " ago";
    }

    $('#commentform').on('submit', function(e) {
        e.preventDefault(); 
        var formData = $(this).serialize();
        $.ajax({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'post',
            url: '{{route("admin-add-comments")}}',
            data: formData, // Pass serialized form data
            success: function(response) {
              showcomments();
              $('#comments').val("");

         }
        });
        
      });
      
  });


</script>

@endsection