@extends('layouts.app')

@section('title', 'Channels')

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
    .channel-type-badge i { margin-right: 3px; }
</style>
@endpush

@section('content')
<div class="loadPages01">

    <div class="d-flex justify-content-between mb-3">
        <h4 class="mb-0">Channels</h4>

        @can('channel.create')
        <a href="{{ route('channels.create') }}" class="btn btn-primary btn-sm">
            <i class="las la-plus-circle"></i> Add Channel
        </a>
        @endcan
    </div>

    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 py-2 viewContainer">
        <div class="table-responsive">
            <table id="channelsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Type</th>
                        <th>Name</th>
                        <th>Identifier</th>
                        <th>Source</th>
                        <th>Inbound</th>
                        <th>Outbound</th>
                        <th>Status</th>
                        <th>Last Sync</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

</div>
@endsection


@push('scripts')
<script>
$(document).ready(function() {

    var table = $('#channelsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('channels.index') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'type', name: 'type' },
            { data: 'name', name: 'name' },
            { data: 'identifier', name: 'identifier' },
            { data: 'ticket_source_id', name: 'ticket_source_id' },
            { data: 'is_inbound', name: 'is_inbound' },
            { data: 'is_outbound', name: 'is_outbound' },
            { data: 'status', name: 'status' },
            { data: 'last_sync_at', name: 'last_sync_at' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', orderable: false, searchable: false },
        ],
        order: [[9, 'desc']],
        pageLength: 25,
    });

    // ---------------------------------------------------------
    // Delete Channel
    // ---------------------------------------------------------
    $(document).on('click', '.btn-delete-channel', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var type = $(this).data('type');

        swal({
            title: "Are you sure?",
            text: "This channel will be deleted permanently.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((confirmed) => {

            if (!confirmed) return;

            $.ajax({
                url: "{{ route('channels.delete') }}",
                type: "DELETE",
                data: {
                    id: id,
                    type: type,
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    if (res.status) {
                        toastr.success(res.message);
                        table.ajax.reload();
                    } else {
                        toastr.error(res.message || 'Delete failed');
                    }
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON?.message || "Delete failed");
                }
            });

        });
    });

    // ---------------------------------------------------------
    // Test Connection
    // ---------------------------------------------------------
    $(document).on('click', '.btn-test-channel', function(e) {
        e.preventDefault();

        var id = $(this).data('id');
        var type = $(this).data('type');

        var btn = $(this);
        var original = btn.html();

        btn.html('<i class="las la-spinner la-spin"></i> Testing…').prop('disabled', true);

        $.ajax({
            url: "{{ route('channels.test') }}",
            type: "POST",
            data: {
                id: id,
                type: type,
                _token: "{{ csrf_token() }}"
            },
            success: function(res) {
                toastr.success(res.message);
                if (res.details) {
                    console.log('Test details:', res.details);
                }
                table.ajax.reload();
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.message || "Test failed");
            },
            complete: function() {
                btn.html(original).prop('disabled', false);
            }
        });
    });

    // ---------------------------------------------------------
    // Edit (opens modal)
    // ---------------------------------------------------------
    $(document).on('click', '.btn-edit-channel', function() {
        var id = $(this).data('id');
        var type = $(this).data('type');

        $.ajax({
            url: "{{ route('channels.edit') }}",
            type: "POST",
            data: { id: id, type: type, _token: "{{ csrf_token() }}" },
            success: function(res) {
                if (res.status) {
                    $('#editChannelModalBody').html(res.html);
                    $('#editChannelModal').modal('show');
                }
            }
        });
    });

});
</script>
@endpush