@extends('admin.layout.app')

@section('content')
    <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>No.</th>
                                <th>Name</th>
                                <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</th>
                                {{-- <th>Last Alert</th>
                                <th>In Charge</th>
                                <th>Duty Time</th> --}}
                                <th>Actions</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>
                                        @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" 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;
            }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Toggle Alert Status
            $('.toggle-alert').click(function() {
                const id = $(this).data('id');
                const currentStatus = $(this).data('status');

                $.ajax({
                    url: `/admin/alert-recipients/${id}/toggle-alert`,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        }
                    }
                });
            });

            // Toggle Message Alert Status
            $('.toggle-message-alert').click(function() {
                const id = $(this).data('id');
                const currentStatus = $(this).data('status');

                $.ajax({
                    url: `/admin/alert-recipients/${id}/toggle-message-alert`,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        }
                    }
                });
            });

            // Toggle In Charge Status
            $('.toggle-incharge').click(function() {
                const id = $(this).data('id');

                $.ajax({
                    url: `/admin/alert-recipients/${id}/toggle-incharge`,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        }
                    }
                });
            });

            // Test Alert
            $('.test-alert').click(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?')) {
                    $.ajax({
                        url: `/admin/alert-recipients/${id}/test`,
                        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);
                            }
                        }
                    });
                }
            });
        });
    </script>
@endpush