@extends('layouts.csd.app')
<style>
    #zero_config_filter .form-control-sm{
        width:500px!important;
    }
    #zero_config_length{
        display:none;

    }
    .paging_simple_numbers{
        display:none;
    }
</style>
@section('content')

<link rel="stylesheet" type="text/css" href="{{ asset('admin/assets/extra-libs/multicheck/multicheck.css') }}">
<link href="{{ asset('admin/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.css') }}" rel="stylesheet">

<div class="page-breadcrumb">
    <div class="row">
        <div class="col-12 d-flex no-block align-items-center">
            <h4 class="page-title">Inbox</h4>
           
        </div>
    </div>
    <table  class="table table-striped table-bordered" style="font-size:14px;  border: none;">
        <tr>
            <th style="border:none;"><div id="search"></div></th>
            <th style="border:none; vertical-align:bottom;" > <div id="info" style="text-align:right;"></div></th>
        </tr>

    </table>
        
       
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                        @if(Session::has('alert-' . $msg))
                            <h4 class="font-weight-light alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</h4>
                        @endif
                    @endforeach
                    
                        @if(count($paginatedData) > 0)
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-striped table-bordered" style="font-size:14px">
                                <!-- <thead>
                                    <tr>
                                        <th style="width: 8%"><b>Sr</b></th>
                                        <th style="width: 10%"><b>Ticket Id</b></th>
                                        <th style="width: 8%"><b>Site</b></th>
                                        <th style="width: 14%"><b>Contact Type</b></th>
                                        <th style="width: 15%"><b>Name</b></th>
                                        <th style="width: 15%"><b>Email</b></th>
                                        <th style="width: 10%"><b>Mobile</b></th>
                                        <th style="width: 15%"><b>Date</b></th>
                                        <th style="width: 5%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i=0; @endphp
                                    @foreach($sortedData as $key => $data)
                                    @if($data->spam == 1)
                                        @continue
                                    @endif
                                    @php $i++; @endphp
                                        <tr {!! $data->view_status == 0 ? 'style="background-color: rgb(233 133 133 / 50%)!important;"' : 'style="background-color: #fff!important;"' !!}>
                                            <td>{{$i}}</td>
                                            <td><b>{{ $data->ticket_id }}</b></td>  
                                            <td>{{ $data->sitename }}</td>   
                                            <td>{{ ucwords($data->contact_type) }}</td>    
                                            <td>{{ $data->name }}</td> 
                                            <td>{{ $data->email }}</td>    
                                            <td>{{ $data->mobile }}</td>   
                                            <td>{{ date('jS M,y g:i a', strtotime($data->created_at)) }}</td>   
                                            <td style="text-align:center;">
                                                <b>{{ $data->is_block == 'Y' ? 'CLOSED' : 'OPEN' }}</b>
                                                <br>
                                                <a href="{{ url('/csd/view') }}/{{ strtolower($data->sitename) }}/{{ base64_encode($data->id) }}"><i class="fa fa-eye" style="font-size:20px"></i></a>
                                                <a href="{{url('/csd/markunread')}}/{{ strtolower($data->sitename) }}/{{ base64_encode($data->id) }}" class="btn btn-primary">Mark as unread</a>
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody> -->

                                <!-- {!! $data->view_status == 0 ? 'style="background: #cfcfcf !important; font-size: 14px; font-weight: 700!important;"' : 'style="background: #c5c4c5 !important; font-size: 14px; font-weight: 500!important;"' !!} -->

                                    <!-- class = "{!! $data->view_status == 0 ? 'unreadmail' : 'readmail' !!}" -->

                                <thead>
                                    <tr>
                                        <th style="width: 4%"><b>Site</b></th>
                                        <th style="width: 21%"><b>Name</b></th>
                                        <th style="width: 65%"><b>Ticket Id</b></th>
                                        <th style="width: 5%"><b>Date</b></th>
                                        <th style="width: 5%"></th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @php $i=0; @endphp
                                    @foreach($paginatedData as $key => $data)
                                    @if($data->spam == 1)
                                        @continue
                                    @endif
                                    @php $i++; @endphp

                                        @php
                                            $conversionCount = App\Http\Helper::conversionCount(strtolower($data->sitename), $data->id);
                                        @endphp
                                    
                                        <tr class = "{!! $data->view_status == 0 ? 'unreadmail' : 'readmail' !!} clickable-row" data-href="{{ url('/csd/view') }}/{{ strtolower($data->sitename) }}/{{ base64_encode($data->id) }}" >
                                            
                                            <td><span class="sitename <?php if($data->is_block == 'Y'){ ?>closedmatter<?php } ?>">{{ $data->sitename }}</span></td> 
                                            <td class="name">{{ $data->name }}
                                                @if(count($conversionCount) > 1)
                                                    <span>{{count($conversionCount)}}</span>
                                                @endif
                                                <span style="display:none;">{{ $data->email }}-{{ $data->mobile }}</span>
                                            </td>
                                            <td class="ticket">{{ $data->ticket_id }}
                                                <span> - 
                                                        @if(strlen($data->subject) > 95)
                                                            {!! substr($data->subject, 0, 94) !!}...
                                                        @else
                                                            {!! $data->subject !!}
                                                        @endif
                                                </span>
                                            </td> 
                                            <td style="text-align:right">{{ date('M j', strtotime($data->created_at)) }}</td>

                                            <td style="text-align:right">
                                                @if($data->view_status == 1)
                                                <a href="{{url('/csd/markunread')}}/{{ strtolower($data->sitename) }}/{{ base64_encode($data->id) }}" ><i class="mdi mdi-email-secure markunread" title="Mark as Unread"></i></a>
                                                @endif
                                            </td>
                                        </tr>
                                    
                                    @endforeach
                                </tbody>

                            </table>
                        </div>


                    @else
                    <div class="card">No Data Found...</div>
                    @endif
                </div>
            </div>
        </div>
        
      
        <table  class="table table-striped table-bordered" style="font-size:14px;  border: none;">
                    @if ($paginatedData->hasPages())
            <tr>
                <td style="width:auto; text-align:center; border:none;" >
                    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
                    <span>
                        {{-- Previous Page Link --}}
                        @if ($paginatedData->onFirstPage())
                            <span>&lsaquo;</span>
                        @else
                            <a href="{{ $paginatedData->previousPageUrl() }}" class="btn btn-primary" rel="prev">Previous</a>
                        @endif
                    </span>
                        @foreach(range(1, $paginatedData->lastPage()) as $i)
                            @if($i >= $paginatedData->currentPage() - 2 && $i <= $paginatedData->currentPage() + 2)
                                @if ($i == $paginatedData->currentPage())
                                <a href="" class="btn btn-primary">{{ $i }}</a>
                                @else
                                <a href="{{ $paginatedData->url($i) }}" class="btn btn-primary">{{ $i }}</a>
                                @endif
                            @endif
                        @endforeach
                    <span>
                        {{-- Next Page Link --}}
                        @if ($paginatedData->hasMorePages())
                             <a href="{{ $paginatedData->nextPageUrl() }}" rel="next" class="btn btn-primary" >Next</a>
                        @else
                            <span>&rsaquo;</span>
                        @endif
                        </span>
                    </nav>
                </td>
            </tr>
            @endif
                        
             
    </table>
    </div>
</div>

<div class="row" style="display:flex;">
<!-- {!! $paginatedData->links() !!} -->

        </div>
<!--  $i++; -->

<script src="{{ asset('admin/assets/extra-libs/multicheck/datatable-checkbox-init.js') }}"></script>
<script src="{{ asset('admin/assets/extra-libs/multicheck/jquery.multicheck.js') }}"></script>
<script src="{{ asset('admin/assets/extra-libs/DataTables/datatables.min.js') }}"></script>
<script>
    /****************************************
     *       Basic Table                   *
     ****************************************/
    
    $('#zero_config').DataTable({
        "order": [[3, "desc"]],
        "pageLength": 50,
        //"dom": '<"top"flp<"clear">>rt<"bottom"i<"clear">>'
        //dom: '<"top"i>rt<"bottom"flp><"clear">'
        //"dom":' <"top"f>rt<"bottom"ip><"clear">'
    });

    $(document).ready(function() {
        $("#search").html($(".dataTables_filter"));
        // $('#len').html($(".dataTables_length"));
        $('#info').html($(".dataTables_info"));
        $('#pagginate').html($(".rounded-md"));
        

        $('#zero_config tbody tr:odd').removeClass('odd');

        $(".clickable-row").click(function() {
            window.location = $(this).data("href");
        });
    });

    /******auto refresh HTML only if there has been no activity on a page******/

    var inactivityTimeout;
    var inactivityDuration = 600000; // 10 minutes in milliseconds

    function resetInactivityTimer() {
        clearTimeout(inactivityTimeout);
        inactivityTimeout = setTimeout(refreshPage, inactivityDuration);
    }

    function refreshPage() {
        location.reload();
    }

    // Event listeners to reset the inactivity timer
    document.addEventListener('mousemove', resetInactivityTimer);
    document.addEventListener('keydown', resetInactivityTimer);
    document.addEventListener('scroll', resetInactivityTimer);

    // Initial setup of the inactivity timer
    resetInactivityTimer();
    
    
</script>

<style type="text/css">
    
    @import url("https://fonts.googleapis.com/css2?family=Abel&family=Quicksand:wght@400;500;600&display=swap");

    #zero_config{font-family: 'Quicksand', sans-serif;}

    #zero_config{border: 0; border-collapse: collapse!important;}
    #zero_config thead{display: none;}
    #zero_config tr td{border-right: 0}
    .unreadmail{background: #eeeeee !important;font-size: 15px;font-weight: bolder !important; color: #000;}
    .readmail{background: #dad7d7 !important;font-size: 15px;font-weight: 500 !important; color: #000;}
    .unreadmail:hover { box-shadow: inset -1px -2px 7px 0px rgba(0,0,0,0.5); cursor: pointer; }
    .readmail:hover { box-shadow: inset -1px -2px 7px 0px rgba(0,0,0,0.5); cursor: pointer; }

    .table-bordered td, .table-bordered th {border: 1px solid #a4a4a4;}
    .card{background: #eeeeee}
    .card-body{padding: 0}
    .markunread{font-size: 16px; color: #9d9999; border: 2px solid #9d9999; border-radius: 100%; padding: 2px 5px;}
    .markunread:hover{color: #828181; border: 2px solid #828181;}
    .name span{padding-left: 5px; color:#676a6a;}
    .sitename{border: 2px solid #a09c9c;padding: 4px;border-radius: 14%;font-size: 12px;background-color: #a09c9cc7;color: #f3f3f3;}
    .unreadmail .ticket span{color:#676a6a;font-size: 15.5px;font-weight: 500 !important;}
    .readmail .ticket span{color:#676a6a;font-size: 15.5px;font-weight: 500 !important;}
    .closedmatter{background:#3d3d3d!important;}


</style>




@endsection



<!-- 

<tbody>
    @php $i=0; @endphp
    @foreach($sortedData as $index => $data)
    @php $i++; @endphp
    <tr>
        <th scope="row" {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $i }}</th>
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->ticket_id }}</td>  
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->sitename }}</td>   
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->query_related }}</td>    
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->name }}</td> 
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->email }}</td>    
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->mobile }}</td>   
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ date('F jS, Y g:i a', strtotime($data->created_at)) }}</td>   
        <td {!! $data->view_status == 0 ? 'style="background:#587bad;color:white;"' : '' !!}>{{ $data->is_block == 'Y' ? 'Not Open' : 'Open' }}</td>
        <td><a class="btn btn-primary" href="{{ url('/csd/home/QueryView') }}/{{ $data->sitename }}/{{ $data->id }}">View</a></td>
    </tr>
    @endforeach
</tbody>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>table</title>
</head>
<body>
<div class="container" style="margin-top:50px;">

<table class="table table-hover" style="margin-left: auto; margin-right: auto;width:1000px;height:465px;">
  <thead>
  <tr>
    <th scope="col">Sr No</th>
    <th scope="col">Contact Type</th>
    <th scope="col">Related Query</th>
    <th scope="col">subject</th>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">Mobile</th>
    <th scope="col">Ticket Id</th>
    <th scope="col">Site Name</th>
    <th scope="col">Time</th>
    <th scope="col">Status</th>
    <th scope="col">View</th>
    </tr>
  </thead>
  <tbody>
     @foreach($sortedData as $index => $data)
     @if($data->view_status == 0)
    <tr>
        <th scope="row" style="background:#E8EFF9">{{ $loop->iteration }}</th>
        <td style="background:#E8EFF9">{{$data->contact_type}}</td>
        <td style="background:#E8EFF9">{{$data->query_related}}</td>	
        <td style="background:#E8EFF9">{{$data->subject}}</td>
        <td style="background:#E8EFF9">{{$data->name}}</td>	
        <td style="background:#E8EFF9">{{$data->email}}</td>	
        <td style="background:#E8EFF9">{{$data->mobile}}</td>	
        <td style="background:#E8EFF9">{{$data->ticket_id}}</td>	
        <td style="background:#E8EFF9">{{$data->sitename}}</td>	
        <td style="background:#E8EFF9">{{date('F jS, Y', strtotime($data->created_at))}}</td>	
        <td style="background:#E8EFF9">{{ $data->is_block == 'Y' ? 'Not Open' : 'Open' }}</td>
        <td style="background:#E8EFF9"><a class="btn btn-primary" href="{{url('/csd/dashboard/QueryView')}}/{{$data->sitename}}/{{$data->id}}">View</a></td>
    </tr>
    @else
    <th scope="row">{{ $loop->iteration }}</th>
        <td>{{$data->contact_type}}</td>
        <td>{{$data->query_related}}</td>	
        <td>{{$data->subject}}</td>
        <td>{{$data->name}}</td>	
        <td>{{$data->email}}</td>	
        <td>{{$data->mobile}}</td>	
        <td>{{$data->ticket_id}}</td>	
        <td>{{$data->sitename}}</td>	
        <td>{{date('F jS, Y', strtotime($data->created_at))}}</td>	
        <td><a class="btn btn-primary" href="{{url('/csd/dashboard/QueryView')}}/{{$data->sitename}}/{{$data->id}}">View</a></td>
    @endif
    @endforeach
  </tbody>
</table>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
