@extends('admin.layout')
@section('content')
<style type="text/css">
		.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none !important;
}
    .required-mark
    {
        color: red;
    }
    .my-current
    {
        color: #00c0ef;
    }
    hr {
        margin:10px 0px;
    }
    .hr-primary{
        border: 1px solid #00c0ef;
    }
    #image_preview ul {
        display: flex;
        flex-direction: column;
        align-items: end;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #image_preview ul li span {
        float: left;
        padding-right: 10px;
        font-size: 10px;
        width: 18px;
        height: 18px;
        background: #7b7b7b;
        opacity: 1;
        margin: 0px 8px 4px 0px;
        text-align: center;
        display: block;
        border-radius: 100%;
        color: #fff;
        font-weight: normal;
        padding: 0;
        line-height: 18px;
    }
    .fglisting ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }
    .fglisting ul li{
        
    }
    .fglisting ul li span {
        padding-left: 8px;
    }
    .fglisting ul li span{

    }
    ._notes div + br, ._notes br {
        display: block;
    }


    ._subject .dropdown-menu {
        box-shadow: -1px 3px 13px 0 rgba(85, 85, 85, 0.52);
        border: 1px solid #b5b5b5;
        width: 100%;
    }
    
/*    CSS added by Dalip on 26-06-2020 for file upload*/
    div#upload-form input[type="file"] {
    position: absolute;
    top: 0;
    opacity: 0;
}

div#upload-form {
    position: relative;
}

div#upload-form label.control-label {
    padding: 6px 12px;
    border: 1px solid #d2d6de;
    width: 100%;
    display: flex;
    pointer-events: none;
        color: #666;
    font-weight: normal;
}
    div#upload-form label.control-label svg {
        margin-right: 5px;
    }

div#image_preview ul li span.close {
    margin: 0 0 0 5px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 12px;
    border-radius: 0;
    background: transparent;
}

div#image_preview {
    margin-top: 2px;
}

div#image_preview ul li a {
    font-size: 11px;
    color: #000;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

div#image_preview ul li {
    display: flex;
        background-color: #3c8dbc;
    border-color: #367fa9;
    padding: 1px 0 1px 4px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: calc(1rem * 0.875);
    position: relative;
    background: #ecf5fc;
    border: solid 1px #c2e0ff;
    padding-left: 4px;
    border-radius: 2px;
    margin-right: 4px;
    margin-bottom: calc(1rem * 0.375);
    color: #000;
    line-height: 1;
    font-size: 11px;
    align-self: center;
    margin: 0 0;
    margin-right: 4px;
    /* margin-bottom: calc(1rem * 0.375); */
    margin: 2px;
}
#image_preview ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: unset;
    margin: 0 -2px;
}
    div#image_preview ul li span.close i::before {
    content: "\00D7";
    font-size: 14px;
    color: #c70303;
        margin-right: 2px;
}
.dropzone .dz-preview .dz-error-message {
    top: 150px!important;
}  
.select2-container{
    max-width: 100%;
}   
    
    
/*    CSS added for dropzone uploader by Dalip Sharma 21-09-2020*/
    div#dropzone {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px dashed rgb(0 192 239);
        margin-top: 5px;
        flex-wrap: wrap;
        padding: 0;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dropzone .dz-message {
        text-align: center;
        margin: 0;
    }
    html .dropzone .dz-preview .dz-image{
        width: 100px;
        height: auto;
        border-radius: 5px;
        display: flex;
    }
    html .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom:0px;
        margin-top: 5px;
    }
    html .dropzone .dz-preview .dz-details {
        position: static;
        opacity: 1;
        line-height: 1.5;
        padding: 0;
    }
    html .dropzone .dz-preview {
        position: relative;
        padding: 15px;
        box-sizing: border-box;
        width: 12.5%;
        margin: 0;
    }
    html .dropzone .dz-preview .dz-image img{

        width: 70px;
        height: 70px;
        object-fit: cover;
        display: block;
        margin: 0 auto;

    }
    .dropzone .dz-preview .dz-remove {
        position: absolute;
        top: 5px;
        right: 25px;
        z-index: 99;
        font-size: 0;
        line-height: 1;
    }

    .dropzone .dz-preview .dz-remove:after {
        font-size: 20px;
        content: "\00D7";
        color: #fff;
        background: #f00;
        width: 20px;
        height: 20px;
        display: block;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
    }
    html .dropzone .dz-preview .dz-remove {
        font-size: 0;
    }
    html .dropzone .dz-preview:hover .dz-image img {-webkit-transform: scale(1.05, 1.05);-moz-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);-webkit-filter: blur(0px);filter: blur(0px);transition: all 0.5s ease-in-out;}

    html .dropzone .dz-preview .dz-image img {
        transition: all 0.5s ease-in-out;
        display: block;
        border-radius: 5px;
    }
    div#dropzone.dz-started:after {
        content: "\002B";
        display: block;
        height: 115px;
        font-size: 100px;
        font-weight: 100;
        color: #bbb;
        border: 1px solid #f0f0f0;
        line-height: 70px;
        text-align: center;
        padding: 15px;
        box-sizing: border-box;
        width: 12.5%;
        margin: 15px 0;
        vertical-align: top;
    }
    .dz-messagebottom{
        display: none;
    }
    div#dropzone.dz-started + .dz-messagebottom{
        display: block;
    }
   html .dropzone .dz-preview .dz-success-mark, html .dropzone .dz-preview .dz-error-mark {
        top: 50px;
       left:78px;
    }

    html .dropzone .dz-preview.dz-error.dz-complete .dz-error-mark g[id="Check-+-Oval-2"] {
        fill: #f00 !important;
    }
    html .dropzone .dz-preview.dz-success.dz-complete .dz-success-mark svg path {
        fill: #1a801a !important;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image{
        border-radius: 5px;
    }
    html .dropzone .dz-preview .dz-success-mark svg, html .dropzone .dz-preview .dz-error-mark svg{
        width: 30px;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image{
        background: transparent;
    }
    html .dropzone .dz-preview.dz-file-preview .dz-image img {
        border-radius: 5px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd);
    }
    html .dropzone .dz-preview .dz-error-message {
        top: 80px!important;
    }
    html .dropzone .dz-preview .dz-error-message{
        left: -4px;
        text-align: center;
    }
    

</style>

<div class="search-list">
	<div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('Channel Provider Status') }} <small></small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Channel Provider Status') }}</li>
    </ol>
  </section>
  <section class="content"> 
	<!-- @php
		$getUserRoleData = userRoleData();
		$Tickets		= explode(",",$getUserRoleData->Tickets);

	@endphp	 -->
        <div class="row">
      <div class="col-md-12">
        <div class="box box-info">  
			<div class="box-header">

                <div class="container" style="display: flex; justify-content: space-between; margin-top: 20px;">
                    <div style="width: 30%; padding: 30px; background-color:rgb(57, 209, 72); text-align: center; border: 1px solid #000000; border-radius: 5px; font-weight: bold; font-size:22px ">
                        Channel Up : {{ $upCount }}
                    </div>
                    <div style="width: 30%; padding: 30px; background-color:rgb(238, 15, 15); text-align: center; border: 1px solid #000000; border-radius: 5px; font-weight: bold; font-size:22px">
                        Channel Down : {{ $downCount }}
                    </div>
                    <div style="width: 30%; padding: 30px; background-color:rgb(251, 255, 2); text-align: center; border: 1px solid #000000; border-radius: 5px; font-weight: bold; font-size:22px">
                        Channel Removed : {{ $removeCount }}
                    </div>
                </div>

	<table id="example1" class="table table-bordered table-striped signatures-table" style="margin-top:23px">
        <thead>
            <tr>
                <th><a   href="{{URL('admin/channel-status-page')}}{{$queryStringByChannelName}}{{$queryString}}{{$queryStringShow}}">{{ trans('Channel Name') }}
                <i class="fa fa-long-arrow-down"></i><i
                    class="fa fa-long-arrow-up"></i></a>
                </th>
                <th><a   href="{{URL('admin/channel-status-page')}}{{$queryStringByChannelID}}{{$queryString}}{{$queryStringShow}}">{{ trans('ID') }}
                <i class="fa fa-long-arrow-down"></i><i
                    class="fa fa-long-arrow-up"></i></a>
                </th>
                <th><a   href="{{URL('admin/channel-status-page')}}{{$queryStringByChannelStatus}}{{$queryString}}{{$queryStringShow}}">{{ trans('Current Status') }}
                <i class="fa fa-long-arrow-down"></i><i
                    class="fa fa-long-arrow-up"></i></a>
                </th>
                <th><a   href="{{URL('admin/channel-status-page')}}{{$queryStringByChannelCreated}}{{$queryString}}{{$queryStringShow}}">Issue reported date and time
                <i class="fa fa-long-arrow-down"></i><i
                    class="fa fa-long-arrow-up"></i></a></th>
                <th>Down Time</th>
                <th><a   href="{{URL('admin/channel-status-page')}}{{$queryStringByChannelOwner}}{{$queryString}}{{$queryStringShow}}">Channel Owner
                <i class="fa fa-long-arrow-down"></i><i
                    class="fa fa-long-arrow-up"></i></a>
                </th>
                <th><a   href="{{URL('admin/channel-status-page')}}{{$queryStringByChannelProvider}}{{$queryString}}{{$queryStringShow}}">Provider Name
                <i class="fa fa-long-arrow-down"></i><i
                    class="fa fa-long-arrow-up"></i></a></th>
                <th>Frequency</th>
            </tr>
        </thead>

        @php
            $seenChannels = [];
        @endphp

        @foreach($result as $req)
            @php
                if(in_array($req->channel_name, $seenChannels)) {
                    continue;
                }
                $seenChannels[] = $req->channel_name;
                $frequency = 0;
                foreach($channelCounts as $channelCount) {
                    if($channelCount->channel_name == $req->channel_name) {
                        $frequency = $channelCount->count;
                        break;
                    }
                }

                $dotColor = '';
                if($req->channel_status == 'Up') {
                    $dotColor = 'green'; 
                } elseif($req->channel_status == 'Down') {
                    $dotColor = 'red';
                } elseif($req->channel_status == 'Remove') {
                    $dotColor = 'yellow';
                }
            @endphp    

            <tr data-id="{{ $req->id }}">
                <td style="text-align:center">{{ $req->channel_name }}</td>
                {{-- <td style="text-align:center">{{ $req->status_id }}</td> --}}
                {{-- <td style="text-align:center">{{ $req->id }}</td> --}}

                <td style="text-align:center">
                    <a href="{{URL('admin/add-channle-status-view')}}/{{ $req->id }}">
                        {{$req->id }}
                    </a>
                </td>

                <td>
                    <span style="display: inline-block; width: 10px; height: 10px; background-color: {{ $dotColor }}; border-radius: 50%; margin-right: 25px;" ></span>
                    
                    <span style="text-align:center; display:inline-block; width:50%; border:2px solid" class="status" data-status="{{ $req->channel_status }}">
                        {{ $req->channel_status }}
                    </span>
                </td>

                <td style="text-align:center">{{ $req->created_at }}</td>
                <td style="text-align:center">{{ $req->formatted_downtime }}</td>
                <td style="text-align:center">{{ $req->channel_owner }}</td>
                <td style="text-align:center">{{ $req->channel_provider }}</td>
                
                <td style="text-align:center;">
                    {{ $frequency }}
                </td>
            </tr>
        @endforeach



    </table>
                <div class="paginations" >   {{ $result->links()}}</div>
     
        </div>

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



</div>
</div>
@endsection 
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js">
<script src="{!! asset('assets/admin/dist/js/popper.min.js') !!}"></script>
<script src="{!! asset('assets/admin/dist/js/dropzone.min.js') !!}"></script>
<script src="{!! asset('assets/admin/dist/js/my-app.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<link href="{!! asset('assets/admin/dist/css/dropzone.min.css') !!}" rel="stylesheet" />
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.status').forEach(function(statusElement) {
        statusElement.addEventListener('click', function() {
            const currentStatus = statusElement.getAttribute('data-status');
            const channelId = statusElement.closest('tr').getAttribute('data-id'); 
            if (statusElement.querySelector('select')) return;
            const statusDropdown = document.createElement('select');
            statusDropdown.innerHTML = `
                <option value="Up" ${currentStatus === 'Up' ? 'selected' : ''}>Up</option>
                <option value="Down" ${currentStatus === 'Down' ? 'selected' : ''}>Down</option>
                <option value="Remove" ${currentStatus === 'Remove' ? 'selected' : ''}>Remove</option>
            `;

            statusElement.innerHTML = '';
            statusElement.appendChild(statusDropdown);
            statusDropdown.focus();
            statusDropdown.addEventListener('change', function() {
                const newStatus = statusDropdown.value;
                updateStatus(channelId, newStatus, statusElement);
            });

            document.addEventListener('click', function(event) {
                if (!statusElement.contains(event.target)) {
                    statusElement.innerHTML = currentStatus;
                    let dotColor = '';
                    if (currentStatus === 'Up') {
                        dotColor = 'green';
                    } else if (currentStatus === 'Down') {
                        dotColor = 'red';
                    } else if (currentStatus === 'Remove') {
                        dotColor = 'yellow';
                    }
                    statusElement.previousElementSibling.style.backgroundColor = dotColor;
                }
            });
        });
    });


    function updateStatus(channelId, newStatus, statusElement) {
        
        $.ajax({
            url: "{{ url('admin/update-channel-status') }}",
            type: 'post',
            async: false,
            data: {
                channel_id: channelId,
                status: newStatus,
                //_token: '{{ csrf_token() }}' // Include CSRF token
            },
            success: function(response) {
                if (response.success) {
                    statusElement.innerHTML = newStatus;

                    let dotColor = '';
                    if (newStatus === 'Up') {
                        dotColor = 'green';
                    } else if (newStatus === 'Down') {
                        dotColor = 'red';
                    } else if (newStatus === 'Remove') {
                        dotColor = 'yellow';
                    }

                    statusElement.previousElementSibling.style.backgroundColor = dotColor;
                    location.reload();

                } else {
                    alert('Failed to update status');
                }
            },
            error: function(error) {
                console.error('Error:', error);
                alert('An error occurred while updating the status');
            }
        });
    }
});
</script>



@endsection