@extends('layouts.app')
@section('content')

    <div class="container">

        <div class="card">

            <div class="card-header">
                <div class="row">
                    <div class="col-md-10">
                        <form class="input-group" role="form" method="GET" action="{{ route('monitors') }}">
                            <div class="col-md-3">
                                <input class="custom-select" style="background:#fff" type="text"
                                    placeholder="{{ $filters['string'] == null ? 'pesquisar monitor' : $filters['string'] }}"
                                    name="string" value="{{ old('string') }}">
                            </div>

                            <div class="col-md-3">
                                <select class="form-control m-bot15 custom-select"
                                    onchange="top.location.href = this.options[this.selectedIndex].value">

                                    @if ($filters['client'] == null)
                                        <option class="dropdown" value="selecione"> selecione </option>
                                        @foreach ($clients as $client)
                                            <option class="dropdown"
                                                value="{{ route('monitors', 'client=' . $client->id) }}">
                                                {{ $client->business->user->id == $client->user->id ? 'matriz' : $client->name }}
                                            </option>
                                        @endforeach
                                    @else
                                        @foreach ($clients as $client)
                                            @if ($filters['client'] == $client->name)
                                                <option class="dropdown"
                                                    value="{{ route('monitors', 'client=' . $client->id) }}" selected>
                                                    {{ $client->business->user->id == $client->user->id ? 'matriz' : $client->name }}
                                                </option>
                                            @else
                                                <option class="dropdown"
                                                    value="{{ route('monitors', 'client=' . $client->id) }}">
                                                    {{ $client->business->user->id == $client->user->id ? 'matriz' : $client->name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    @endif

                                </select>
                            </div>

                            <div class="col-md-2">
                                <button type="submit" href="{{ route('monitors') }}" class="btn btn-default btn-sm"
                                    style="display: inline-block; height: 36px;">limpar</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-2">
                        <button type="button" data-toggle="modal" data-target="#monitor_filter" tabindex="-1"
                            class="btn btn-primary btn-sm float-right" style="display: inline-block; height: 36px;">cadastar
                            monitor</button>
                        @include('monitors.filter')
                    </div>

                </div>
            </div>

            <div class="table-responsive table--no-card m-b-30">
                <table class="table table-borderless  table-earning">
                    <thead class="card-header">
                        <tr>
                            <td>monitor</td>
                            <td>{{ $hierarchy == 'matriz' ? 'loja' : 'cliente' }}</td>
                            <td>agenda</td>
                            <td>status</td>
                            <td>endereço eletrônico</td>
                            <td>download ID`s</td>
                            <td style="text-align: center;" colspan="2">ações</td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($monitors as $monitor)
                            <tr>
                                <td>{{ $monitor->name }}</td>
                                <td>{{ $monitor->grade->client->business->user->id == $monitor->grade->client->user->id ? 'matriz' : $monitor->grade->client->name }}
                                </td>
                                <td>{{ $monitor->grade->name }}</td>
                                <td>
                                    <div id="{{ $monitor->id }}" class="monitor-id"
                                        style="height: 10px; width: 10px; border-radius: 50%; background-color: {{ $monitor->status == 1 ? 'green' : 'red' }}; margin-left: 15px;">
                                    </div>
                                </td>
                                <td> <a href="{{ url('/multimedias/' . $monitor->token) }}"
                                        target="_blank">{{ url('/multimedias/' . $monitor->token) }}</a></td>
                                <td>
                                    <a href="{{ route('offline.ids', ['token' => $monitor->token]) }}">DOWNLOAD</a>
                                </td>
                                <td>
                                    <form role="form" method="GET"
                                        action="{{ route('monitors.edit', $monitor->id) }}">
                                        <button type="submit" class="btn btn-primary btn-sm">editar</button>
                                    </form>
                                </td>
                                <td>
                                    <form role="form" method="GET"
                                        action="{{ route('monitors.confirmDelete', $monitor->id) }}">
                                        <button type="submit" class="btn btn-danger btn-sm">excluir</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>

        <div align="center" style="margin-top:20px">
            {{ $monitors->links() }}
        </div>

        @if (empty($monitors->first()))
            <br>
            <div>
                <table class="table table-bordered" style="width:250px; background-color:#fff">
                    <tbody>
                        <tr>
                            <td>nenhum resultado encontrado</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        @endif

    </div>

    @if (session()->has('grades'))
        @include('monitors.create', [
            'grades' => session()->get('grades'),
            'sequences' => session()->get('sequences'),
            'hierarchy' => session()->get('hierarchy'),
        ])
    @endif

    @if (session()->has('monitor_edit'))
        @include('monitors.edit', [
            'monitor' => session()->get('monitor_edit'),
            'sequences' => session()->get('sequences_edit'),
            'grades' => session()->get('grades_edit'),
        ])
    @endif

    @if (session()->has('monitor_delete'))
        @include('monitors.delete', ['monitor_delete' => session()->get('monitor_delete')])
    @endif

    <script>
        $(document).ready(() => {
            setTimeout(() => {
                getStatus();
            }, 10000);

        })

        function getStatus() {
            const MONITOR = document.querySelectorAll('.monitor-id');

            MONITOR.forEach(element => {
                $.ajax({
                    method: "POST",
                    url: "/multimedia-api/get-status",
                    data: {
                        "_token": $('meta[name="csrf-token"]').attr('content'),
                        'id': element.id,
                    }
                }).done(function(resp) {
                    console.log(resp);
                    let status = resp == 1 ? 'green' : 'red';
                    $(`#${element.id}`).css('background-color', status)
                });
            });

            setTimeout(() => {
                getStatus();
            }, 10000);
        }
    </script>

@endsection