@extends('layouts.metronic', ['title' => 'Device', 'subtitle' => 'Istoric'])

@section('content')
<div id="kt_content_container" class="container-xxl">
    @if(Session::has('success'))
        <div id="successAlert" class="alert alert-success" role="alert">
            <div class="row">
                <div class="col-md-11">{{Session::get('success')}}</div>
                <div class="col-md-1 d-flex justify-content-end">
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>           
        </div>
        <script>
            window.setTimeout(function() {
                document.getElementById('successAlert').classList.toggle('fade');
            }, 3000);
        </script>
    @endif
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h2>{{ 'Istoric - '.$device->label }}</h2>
            </div>
        </div>

        <div class="card-body pt-0">
            <div class="separator"></div><br>
            
            <div class="row">
                    <div class="col-6 d-flex flex-column scroll-y me-n7 pe-7">
                        <div class="fv-row mb-7 fv-plugins-icon-container">
                            <label class="fw-bold fs-6 mb-2">Id Hardware</label>
                            <span class="form-control form-control-solid mb-3 mb-lg-0">{{$device->hardwareId}}</span>
                        </div>                    
                    </div>
                    <div class="col-6 d-flex flex-column scroll-y me-n7 pe-7">
                        <div class="fv-row mb-7 fv-plugins-icon-container">
                            <label class="fw-bold fs-6 mb-2">WiFi SSID</label>
                            <span class="form-control form-control-solid mb-3 mb-lg-0">{{$device->wifiSSID}}</span>
                        </div>                    
                    </div>
            </div>
            <div class="row">                
                <div class="col-4 d-flex flex-column scroll-y me-n7 pe-7">
                    <div class="fv-row mb-7 fv-plugins-icon-container">
                        <label class="fw-bold fs-6 mb-2">Adresă IP Externă</label>
                        <span class="form-control form-control-solid mb-3 mb-lg-0">{{$device->userIpAddress}}</span>
                    </div>                    
                </div>
                
                <div class="col-4 d-flex flex-column scroll-y me-n7 pe-7">
                    <div class="fv-row mb-7 fv-plugins-icon-container">
                        <label class="fw-bold fs-6 mb-2">Adresă IP Locală</label>
                        <span class="form-control form-control-solid mb-3 mb-lg-0">{{$device->localIPAddr}}</span>
                    </div>                    
                </div>
                <div class="col-4 d-flex flex-column scroll-y me-n7 pe-7">
                    <div class="fv-row mb-7 fv-plugins-icon-container">
                        <label class="fw-bold fs-6 mb-2">Grup</label>
                        <span class="form-control form-control-solid mb-3 mb-lg-0">{{$device->group->name}}</span>
                    </div>                    
                </div>              
            </div>
        </div>
    </div>
    <br>
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h2>{{ 'Intervale offline' }}</h2>
            </div>
            <div class="card-toolbar">
                <!--begin::Toolbar-->
                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                    <!--begin::Add button-->
                    <div class="col-md-6 fv-row">
                        <label class="fs-6 fw-bold mb-2">Data</label>
                        <!--begin::Input-->
                        <div class="position-relative d-flex align-items-center">
                            <!--begin::Icon-->
                            <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                            <span class="svg-icon svg-icon-2 position-absolute mx-4">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="black"></path>
                                    <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="black"></path>
                                    <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="black"></path>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            <!--end::Icon-->
                            <!--begin::Datepicker-->
                            <form action="{{ route('device.health', $device->id) }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <input class="form-control form-control-solid ps-12 flatpickr-input active" placeholder="Select a date" id="date" name="date" type="text" onchange="this.form.submit()" value="{{$date->format('Y-m-d')}}" readonly="readonly">
                            </form>
                            <!--end::Datepicker-->
                        </div>
                        <!--end::Input-->
                    </div>
                    <!--end::Add button-->
                </div>
                <!--end::Toolbar-->                
            </div>
        </div>
        @foreach($device->history->offline_intervals->sortByDesc("start_date") as $interval)
        @if ($interval->start_date->year == $date->year && $interval->start_date->month == $date->month && $interval->start_date->day == $date->day)
        <div class="pb-0 m-5" >
            <div class="d-flex align-items-center ms-5 mb-2">
                <div class="d-flex align-items-center flex-grow-1">
                    <div class="d-flex flex-column">
                        <span class="text-gray-900 text-hover-primary fs-6 fw-bolder">{{$interval->start_date->format('Y-m-d H:i:s')}}</span>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="text-gray-900 text-hover-primary fs-6 fw-bolder"> &nbsp;&nbsp;-&nbsp;&nbsp; </span>
                    </div>
                    <div class="d-flex flex-column">
                        @if ($interval->end_date == null)
                        <span class="ext-hover-primary fs-6 fw-bolder" style="color: red;">Offline</span>
                        @else
                        <span class="text-gray-900 text-hover-primary fs-6 fw-bolder">{{$interval->end_date->format('Y-m-d H:i:s')}}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @endif
        @endforeach

    </div>
    <br>
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h2>{{ 'Comentarii' }}</h2>
            </div>
            <div class="card-toolbar">
                <!--begin::Toolbar-->
                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                    <!--begin::Add button-->
                    <a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">Adaugă comentariu</a>
                    <!--end::Add button-->
                </div>
                <!--end::Toolbar-->                
            </div>
        </div>
        @foreach($device->history->comments->sortByDesc("date") as $comment)
        <div class="pb-0 m-5" >
            <div class="d-flex align-items-center mb-2">
                <div class="d-flex align-items-center flex-grow-1">
                    <div class="d-flex flex-column">
                        <span class="text-gray-400 fw-bold">{{$comment->text}}</span>
                    </div>
                </div>
                <div class="my-0">
                    <a href="{{ route('device.deleteComment', [$device->id, $comment->_id]) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm" data-action="delete_row">    
                        <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
                        <span class="svg-icon svg-icon-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="black"></path>
                                <path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="black"></path>
                                <path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="black"></path>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </a> 
                </div>
            </div>
            <div class="separator"></div>
            <div class="d-flex align-items">
                <!--begin::User-->
                <div class="d-flex align-items-center flex-grow-1">
                    <!--begin::Info-->
                    <div class="d-flex flex-column">
                        <span class="text-gray-900 text-hover-primary fs-8 fw-bolder">{{$comment->user->name}}</span>
                        <span class="text-gray-400 fs-8 fw-bold">{{now()->diffForHumans($comment->date, true, false, 6)}}</span>
                    </div>
                </div>   
                
                <div class="d-flex justify-content-end">
                    <div class="d-flex flex-column">
                        <span class="text-gray-900 text-hover-primary fs-8 fw-bolder">
                            Status: 
                            @if ($comment->status == null)
                                
                                <span style="color: red;">Offline</span>
                            @else
                            <span style="color: green;">Online</span>
                            @endif
                        </span>
                        @if ($comment->speed != null)
                        <span class="text-gray-400 fs-8 fw-bold">Viteza internet: {{$comment->speed}} Mb/s</span>
                        @endif
                    </div>
                </div>
            </div>
            
        </div>
        @endforeach

    </div>
</div>    

<div class="modal fade" id="kt_modal_new_target" tabindex="-1" aria-hidden="true">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div class="modal-header pb-0 border-0 justify-content-end">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>
            <!--begin::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                <!--begin:Form-->
                <form action="{{ route('device.addComment', $device->_id) }}" method="POST" id="kt_modal_new_target_form" class="form" action="#">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <!--begin::Heading-->
                    <div class="mb-13 text-center">
                        <!--begin::Title-->
                        <h1 class="mb-3">Adaugă comentariu</h1>
                        <!--end::Title-->
                    </div>
                    <!--end::Heading-->
                    <!--begin::Input group-->
                    <div class="d-flex flex-column mb-8">
                        <label class="fs-6 fw-bold mb-2">Comentariu</label>
                        <textarea id="comm" name="comm" class="form-control form-control-solid" rows="3" name="target_details" placeholder="Type Target Details"></textarea>
                    </div>

                    <div class="d-flex flex-stack mb-8">
                        <label class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value="1" name="status" checked="checked">
                            <span class="form-check-label fw-bold text-muted">Status device</span>
                        </label>
                        <!--begin::Label-->
                        
                            <div class="col-md-8 fv-row fv-plugins-icon-container">
                                <label class="fs-6 fw-bold mb-2">Viteză internet (MB/s)</label>
                                <input id="speed" name="speed" class="form-control form-control-solid" rows="3" name="target_details" placeholder="Type Target Details">
                            <div class="fv-plugins-message-container invalid-feedback"></div></div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            
                            <!--end::Col-->
                        
                        <!--end::Label-->
                        <!--begin::Switch-->
                        
                        <!--end::Switch-->
                    </div>

                    
                    <div class="text-center">
                        <button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Șterge</button>
                        <button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary">
                            <span class="indicator-label">Salvează</span>                            
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    function dataChanged() {
    }

    $("#date").flatpickr({enableTime:!1,dateFormat:"Y-m-d"})

        const deleteButtons = document.querySelectorAll('[data-action="delete_row"]');

        deleteButtons.forEach(d => {
            // Delete button on click
            d.addEventListener('click', function (e) {
                e.preventDefault();

                // Select parent row
                const parent = e.target.closest('tr');

                // Get customer name
                //const customerName = parent.querySelectorAll('td')[column_index].innerText;               

                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
                Swal.fire({
                    html: "Ești sigur că vrei să ștergi comentariul?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Da, șterge!",
                    cancelButtonText: "Nu, anulează",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then(function (result) {
                    if (result.value) {
                        document.location.href = d.getAttribute('href');
                    } 
                });
            })
        });
</script>
@endsection

@section('menuVariables')
<script>
    var menuItemName = "menuDashboard";
</script>
@endsection