@extends('template.content')

@section('title', 'Router')

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            $('#cari').on('keypress', function (e) {
                // Cek apakah tombol yang ditekan adalah Enter (key code 13)
                if (e.which == 13) {
                    // Submit form saat tombol Enter ditekan
                    $('#searchForm').submit();
                }
            });

            // Handle tombol hapus
            $('.btn-delete').on('click', function () {
                var id = $(this).data('id');
                var name = $(this).data('name');
                var url = $(this).data('url');

                Swal.fire({
                    title: 'Konfirmasi Hapus',
                    html: `Apakah Anda yakin ingin menghapus data ini?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Buat form delete dinamis
                        var form = $('<form>').attr({
                            'method': 'POST',
                            'action': url
                        }).append(
                            $('<input>').attr({
                                'type': 'hidden',
                                'name': '_token',
                                'value': '{{ csrf_token() }}'
                            }),
                            $('<input>').attr({
                                'type': 'hidden',
                                'name': '_method',
                                'value': 'DELETE'
                            })
                        ).appendTo('body');

                        // Submit form
                        form.submit();
                    }
                });
            });
        });

        function refresh(button) {
            let dataId = $(button).attr('data-id');
            $(button).prop('disabled', true);
            var originalText = $(button).text();
            $(button).text('Mengecek...');

            $.ajax({
                type: "POST",
                url: "{{ route('router.status') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: dataId,
                },
                success: function (response) {
                    if (response === 'Online') {
                        Swal.fire('Sukses', 'Status router diperbarui menjadi Online.', 'success').then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire('Gagal', 'Status router diperbarui menjadi Offline.', 'error').then(() => {
                            location.reload();
                        });
                    }
                },
                error: function () {
                    Swal.fire('Error', 'Terjadi kesalahan saat memperbarui status router.', 'error').then(() => {
                        location.reload();
                    })
                },
                complete: function () {
                    $(button).prop('disabled', false); // Aktifkan kembali tombol
                    $(button).text(originalText);
                }
            });
        }
    </script>
@endpush

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">@yield('title')</h4>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active">@yield('title')</li>
                </ol>
                <a href="{{ route('router.create') }}" class="btn btn-info  d-lg-block m-l-15 text-white"><i
                        class="fa fa-plus-circle"></i>Tambah Router</a>
            </div>
        </div>
    </div>

    <div class="row g-0">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="col-md-3 mt-3">
                        <div class="mb-3">
                            <form method="GET" id="searchForm">
                                <input type="text" class="form-control" name="cari" id="cari" placeholder="Cari Router"
                                    value="{{ request()->get('cari') }}" autofocus>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Aksi</th>
                                    <th>Nama Router</th>
                                    <th>Ip</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                    <th>Port</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($router as $rout)
                                    <tr>
                                        <td>
                                            <!-- Tombol Edit -->
                                            <a href="{{ route('router.edit', $rout->id) }}" class="btn btn-sm btn-warning"><i
                                                    class="fas fa-edit"></i></a>

                                            <!-- Tombol Hapus -->
                                            <button class="btn btn-sm btn-danger btn-delete" data-id="{{ $rout->id }}"
                                                data-name="{{ $rout->name }}"
                                                data-url="{{ route('router.destroy', $rout->id) }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                        <td>{{ $rout->nama_router }}</td>
                                        <td>{{ $rout->ip_router }}</td>
                                        <td>{{ $rout->username }}</td>
                                        <td>{{ $rout->password }}</td>
                                        <td>{{ $rout->port }}</td>
                                        <td>
                                            @if ($rout->status == 'Online')
                                                <button data-id="{{ $rout->id }}" class="btn btn-sm btn-success"
                                                    onclick="refresh(this)">Online</button>
                                            @else
                                                <button data-id="{{ $rout->id }}" class="btn btn-sm btn-danger"
                                                    onclick="refresh(this)">Offline</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>
                        </table>

                        {{ $router->appends(['cari' => request()->get('cari')])->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection