@extends('backend.layouts.app')
@section('main')
@section('title', 'Dashboard OLT')


<div class="row">
    <div class="col-lg-12">
        <div class="card card-header-actions h-100">
            <div class="card-header">
                <div class="h5 col-auto">OLT #{{ $data['namaolt'] }}</div>
            </div>
            <div class="row ms-3 me-3">
                <div class="col-auto mt-4">
                    <button class="btn btn-success text-light me-2 mb-2" id="save" data-olt="{{ $data['namaolt'] }}">
                        <i class="fas fa-save me-1"></i>SAVE
                    </button>
                    <button class="btn btn-danger text-light me-2 mb-2" id="reboot"
                        data-olt="{{ $data['namaolt'] }}">
                        <i class="fas fa-power-off me-1"></i>REBOOT
                    </button>
                    <a class="btn btn-warning text-light me-2 mb-2  " href="/olt/device/logout">
                        <i class="fas fa-sign-out me-1"></i>LOGOUT
                    </a>
                </div>
            </div>
            @include('backend.olt.modal.create')
            @include('backend.olt.modal.edit')
            <div class="card-body table-responsive">
                <div class="row mb-3">
                    <div class="col-lg-6">
                        <table style="font-size:14px" id="myTable" class="table display nowrap" width="100%">
                            <tr>
                                <td scope="col">OLT IDENTITY</td>
                                <td scope="col">: {{ $data['namaolt'] }}</td>
                            </tr>
                            <tr>
                                <td scope="col">PRODUCT MODEL</td>
                                <td scope="col">: {{ $data['device']['product_name'] }}</td>
                            </tr>
                            <tr>
                                <td scope="col">SYSTEM VERSION</td>
                                <td scope="col">: {{ $data['device']['sys_ver'] }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-lg-6">
                        <table style="font-size:14px" id="myTable" class="table display nowrap" width="100%">
                            <tr>
                                <td scope="col">DEVICE TYPE</td>
                                @if ($data['device']['device_type'] === 1)
                                    <td scope="col">: EPON</td>
                                @endif
                            </tr>
                            <tr>
                                <td scope="col">PON PORT</td>
                                <td scope="col">: {{ $data['device']['ponports'] }} PON</td>
                            </tr>
                            <tr>
                                <td scope="col">UPTIME</td>
                                <td scope="col">: {{ $data['time']['uptime']['0'] }} Days
                                    {{ $data['time']['uptime']['1'] }} Hours {{ $data['time']['uptime']['2'] }}
                                    Minute</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <table id="myTable" class="table table-hover table-bordered display nowrap" width="100%">
                    <thead>
                        <tr>
                            <th scope="col">PON</th>
                            <th scope="col">ONLINE</th>
                            <th scope="col">OFFLINE</th>
                            <th scope="col">TOTAL</th>
                            <th scope="col">STATUS</th>
                            <th scope="col">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data['pon'] as $row)
                            @php
                                if ($row['status'] == '1') {
                                    $status = 'Online';
                                    $badge = 'success';
                                } else {
                                    $status = 'Offline';
                                    $badge = 'danger';
                                }
                                $total = $row['online'] + $row['offline'];
                            @endphp
                            <tr>
                                <td><span class="h6"> PON {{ $row['port_id'] }}</span>
                                </td>
                                <td><span class="text-success">Online</span> : {{ $row['online'] }} ONU</td>
                                <td><span class="text-danger">Offline</span> : {{ $row['offline'] }} ONU
                                </td>
                                <td><span class="text-primary">Total</span> : {{ $total }} ONU</td>
                                <td><span class="btn btn-sm btn-{{ $badge }}">{{ $status }}</span>
                                </td>

                                @if ($total === 0)
                                    <td><a href="#!" class="btn btn-sm btn-danger"><i
                                                class="fa-solid fa-arrow-up-right-from-square"></i>&nbspLIHAT DATA</a>
                                    </td>
                                @else
                                    <td>
                                        <a href="/olt/device/pon/{{ $row['port_id'] }}"
                                            class="btn btn-sm btn-primary"><i
                                                class="fa-solid fa-arrow-up-right-from-square"></i>&nbspLIHAT DATA</a>
                                    </td>
                                @endif
                            </tr>
                        @endforeach


                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
    $('#reboot').on('click', function() {

        let olt = $(this).data('olt');

        Swal.fire({
            title: "Reboot",
            icon: 'warning',
            text: "Are you sure to Reboot OLT? ",
            showCancelButton: !0,
            reverseButtons: !0,
            confirmButtonText: "Yes, reboot!",
            cancelButtonText: "Cancel",
            confirmButtonColor: "#d33",
            // cancelButtonColor: "#d33",
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $(
                                'meta[name="csrf-token"]'
                            )
                            .attr('content')
                    }
                });

                $.ajax({
                    url: `/olt/device/reboot/${olt}}`,
                    type: "POST",
                    cache: false,
                    dataType: "json",

                    // tampilkan pesan Success
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: `${data.message}`,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(
                            function() {
                                window.location.href = '/olt'
                            }, 1500);
                    },

                    error: function(err) {
                        $("#message").html(
                            "Some Error Occurred!"
                        )
                    }

                });
            }
        });
    });

    $('#save').on('click', function() {

        let olt = $(this).data('olt');

        Swal.fire({
            title: "Save",
            icon: 'warning',
            text: "Are you sure to Save Configuration? ",
            showCancelButton: !0,
            reverseButtons: !0,
            confirmButtonText: "Yes, save!",
            cancelButtonText: "Cancel",
            confirmButtonColor: "#d33",
            // cancelButtonColor: "#d33",
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $(
                                'meta[name="csrf-token"]'
                            )
                            .attr('content')
                    }
                });

                $.ajax({
                    url: `/olt/device/save/${olt}}`,
                    type: "POST",
                    cache: false,
                    dataType: "json",

                    // tampilkan pesan Success
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: `${data.message}`,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(
                            function() {
                                location.reload()
                            }, 1500);
                    },

                    error: function(err) {
                        $("#message").html(
                            "Some Error Occurred!"
                        )
                    }

                });
            }
        });
    });
</script>
@endpush