@extends('admin.layout.app')
@section('title', 'Danh sách tel bot | LVT')
@section('content')
    <div id="loadingOverlay" style="display: none;">
        <div class="loader">
            <i class="fas fa-spinner fa-spin fa-3x mb-3" style="color: #3498db;"></i>
            <p class="h5 text-dark">Đang xử lý, vui lòng đợi...</p>
        </div>
    </div>
    <div class="container-fluid">
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800"></h1>
            @if(Auth::user()->role_id == 1)
                <a href="{{ route('alert_recipients.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Thêm mới
                </a>
            @endif
        </div>

        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Danh sách bot</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Tele Name</th>
                                <th>Nhận thông báo cuộc gọi</th>
                                <th>Nhận thông báo tin nhắn</th>
                                <th>Nhận toàn bộ cuộc gọi (report daily)</th>
                                <th style="background:yellow">Nhận thông báo gỡ app</th>
                                {{-- <th>Last Alert</th>
                                <th>In Charge</th>
                                <th>Duty Time</th> --}}
                                <th>Hành động</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($recipients as $recipient)
                                <tr>
                                    <!-- <td>{{ $recipient->id }}</td> -->
                                    <!-- <td>{{ $recipient->name }}</td> -->
                                    <td>
                                        <span class="badge badge-info">{{ $recipient->tele_name }}</span>
                                    </td>
                                    <td>
                                        <button
                                            class="btn btn-sm toggle-alert {{ $recipient->alert_status ? 'btn-success' : 'btn-secondary' }}"
                                            data-id="{{ $recipient->id }}" data-status="{{ $recipient->alert_status }}">
                                            {{ $recipient->alert_status ? 'ON' : 'OFF' }}
                                        </button>
                                    </td>
                                    <td>
                                        <button
                                            class="btn btn-sm toggle-message-alert {{ $recipient->message_alert_status ? 'btn-success' : 'btn-secondary' }}"
                                            data-id="{{ $recipient->id }}" data-status="{{ $recipient->message_alert_status }}">
                                            {{ $recipient->message_alert_status ? 'ON' : 'OFF' }}
                                        </button>
                                    </td>

                                    <td>
                                        <button
                                            class="btn btn-sm toggle-incharge {{ $recipient->in_charge_all_status ? 'btn-success' : 'btn-secondary' }}"
                                            data-id="{{ $recipient->id }}" data-status="{{ $recipient->in_charge_all_status }}">
                                            {{ $recipient->in_charge_all_status ? 'ON' : 'OFF' }}
                                        </button>
                                    </td>
                                    <td>
                                        <button
                                            class="btn btn-sm toggle-app-alert {{ $recipient->app_alert_status ? 'btn-success' : 'btn-secondary' }}"
                                            data-id="{{ $recipient->id }}" data-status="{{ $recipient->app_alert_status }}">
                                            {{ $recipient->app_alert_status ? 'ON' : 'OFF' }}
                                        </button>

                                    </td>
                                    {{-- <td>
                                        @if ($recipient->last_alert_time)
                                        <small class="text-muted">{{ $recipient->last_alert_time->format('d/m/Y H:i') }}</small>
                                        @else
                                        <span class="text-muted">Never</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button
                                            class="btn btn-sm toggle-incharge {{ $recipient->in_charge_all_status ? 'btn-warning' : 'btn-secondary' }}"
                                            data-id="{{ $recipient->id }}" data-status="{{ $recipient->in_charge_all_status }}">
                                            {{ $recipient->in_charge_all_status ? 'ON DUTY' : 'OFF DUTY' }}
                                        </button>
                                    </td>
                                    <td>
                                        <small>{{ $recipient->in_charge_start->format('H:i') }} -
                                            {{ $recipient->in_charge_end->format('H:i') }}</small>
                                        @if ($recipient->isOnDuty())
                                        <br><span class="badge badge-success">Currently On Duty</span>
                                        @endif
                                    </td> --}}
                                    <td>
                                        <div class="justify-content-center d-flex gap-1" role="group">
                                            <a href="{{ route('alert_recipients.show', $recipient) }}"
                                                class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('alert_recipients.edit', $recipient) }}"
                                                class="btn btn-sm btn-warning">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button class="btn btn-sm btn-success test-alert" data-id="{{ $recipient->id }}">
                                                <i class="fas fa-phone"></i>
                                            </button>
                                            <form action="{{ route('alert_recipients.destroy', $recipient) }}" method="POST"
                                                class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    onclick="return confirm('Are you sure?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <style scoped>
        .dataTables_filter {
            float: right;
        }

        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100000 !important;
            flex-direction: column;
        }

        .loader {
            text-align: center;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            // Toggle Alert Status
            $(document).on('click', '.toggle-alert', function () {
                const id = $(this).data('id');
                const $btn = $(this);
                $('#loadingOverlay').css('display', 'flex');

                $.ajax({
                    url: "{{ route('alert_recipients.toggle_alert', ':id') }}".replace(':id', id),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.success) {
                            const newStatus = response.alert_status;
                            $btn.data('status', newStatus);
                            if (newStatus) {
                                $btn.removeClass('btn-secondary').addClass('btn-success').text('ON');
                            } else {
                                $btn.removeClass('btn-success').addClass('btn-secondary').text('OFF');
                            }
                        }
                    },
                    complete: function () {
                        $('#loadingOverlay').hide();
                    }
                });
            });

            // Toggle Message Alert Status
            $(document).on('click', '.toggle-message-alert', function () {
                const id = $(this).data('id');
                $('#loadingOverlay').css('display', 'flex');

                $.ajax({
                    url: "{{ route('alert_recipients.toggle_message_alert', ':id') }}".replace(':id', id),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.success) {
                            const newStatus = response.message_alert_status;
                            const $btn = $(`.toggle-message-alert[data-id="${id}"]`);
                            $btn.data('status', newStatus);
                            if (newStatus) {
                                $btn.removeClass('btn-secondary').addClass('btn-success').text('ON');
                            } else {
                                $btn.removeClass('btn-success').addClass('btn-secondary').text('OFF');
                            }
                        }
                    },
                    complete: function () {
                        $('#loadingOverlay').hide();
                    }
                });
            });
            // Toggle App Alert Status
            $(document).on('click', '.toggle-app-alert', function () {
                const id = $(this).data('id');
                $('#loadingOverlay').css('display', 'flex');

                $.ajax({
                    url: "{{ route('alert_recipients.toggle_app_alert', ':id') }}".replace(':id', id),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.success) {
                            const newStatus = response.app_alert_status;
                            const $btn = $(`.toggle-app-alert[data-id="${id}"]`);
                            $btn.data('status', newStatus);
                            if (newStatus) {
                                $btn.removeClass('btn-secondary').addClass('btn-success').text('ON');
                            } else {
                                $btn.removeClass('btn-success').addClass('btn-secondary').text('OFF');
                            }
                        }
                    },
                    complete: function () {
                        $('#loadingOverlay').hide();
                    }
                });
            });

            // Toggle In Charge Status
            $(document).on('click', '.toggle-incharge', function () {
                const id = $(this).data('id');
                $('#loadingOverlay').css('display', 'flex');

                $.ajax({
                    url: "{{ route('alert_recipients.toggle_incharge', ':id') }}".replace(':id', id),
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.success) {
                            const newStatus = response.in_charge_all_status;
                            const $btn = $(`.toggle-incharge[data-id="${id}"]`);
                            $btn.data('status', newStatus);
                            if (newStatus) {
                                $btn.removeClass('btn-secondary').addClass('btn-success').text('ON');
                            } else {
                                $btn.removeClass('btn-success').addClass('btn-secondary').text('OFF');
                            }
                        }
                    },
                    complete: function () {
                        $('#loadingOverlay').hide();
                    }
                });
            });

            // Test Alert
            $(document).on('click', '.test-alert', function () {
                const id = $(this).data('id');

                if (confirm('Gửi cảnh báo thử nghiệm tới người nhận này?')) {
                    $('#loadingOverlay').css('display', 'flex');
                    $.ajax({
                        url: "{{ route('alert_recipients.test', ':id') }}".replace(':id', id),
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            if (response.success) {
                                alert('Đã gửi cảnh báo thử nghiệm thành công!');
                            } else {
                                alert('Error: ' + response.message);
                            }
                        },
                        complete: function () {
                            $('#loadingOverlay').hide();
                        }
                    });
                }
            });
        });
    </script>
@endpush