@extends('layouts.app')

@section('title', 'Channel Details')

@section('content')

<div class="loadPages01">

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

        <a href="{{ route('channels.index') }}" class="btn btn-secondary btn-sm">
            <i class="las la-arrow-left"></i> Back
        </a>
    </div>

    <div class="card p-3">

        <div class="row">

            <div class="col-md-6">
                <h5>{{ $channel->name }}</h5>

                <p>
                    <strong>Channel Type:</strong><br>
                    @if($channel->channel_type == 'email')
                        <span class="badge badge-primary"><i class="las la-envelope"></i> Email</span>
                    @else
                        <span class="badge badge-success"><i class="lab la-whatsapp"></i> WhatsApp</span>
                    @endif
                </p>

                <p>
                    <strong>Identifier:</strong><br>
                    {{ $channel->channel_type == 'email' ? $channel->username : $channel->phone_number }}
                </p>

                <p>
                    <strong>Status:</strong><br>
                    <span class="badge badge-info">{{ ucfirst($channel->status) }}</span>
                </p>

                <p>
                    <strong>Ticket Source:</strong><br>
                    {{ $channel->ticketSource->name ?? '--' }}
                </p>

                <p>
                    <strong>Queue:</strong><br>
                    {{ $channel->queue->name ?? '--' }}
                </p>

                <p>
                    <strong>Last Sync:</strong><br>
                    {{ $channel->last_sync_at ? formatDateTime($channel->last_sync_at) : '--' }}
                </p>

                <p>
                    <strong>Created On:</strong><br>
                    {{ formatDateTime($channel->created_at) }}
                </p>

            </div>

            <!-- Specific Channel Details -->
            <div class="col-md-6">

                @if($channel->channel_type == 'email')
                    <h5>Email Settings</h5>

                    <p>
                        <strong>Inbound:</strong>
                        @if($channel->is_inbound)
                            <span class="badge badge-success">Yes</span>
                        @else
                            <span class="badge badge-secondary">No</span>
                        @endif
                    </p>

                    <p>
                        <strong>Outbound:</strong>
                        @if($channel->is_outbound)
                            <span class="badge badge-success">Yes</span>
                        @else
                            <span class="badge badge-secondary">No</span>
                        @endif
                    </p>

                @else
                    <h5>WhatsApp Settings</h5>

                    <p>
                        <strong>Provider:</strong><br>
                        {{ ucfirst(str_replace('_', ' ', $channel->provider)) }}
                    </p>

                    <p>
                        <strong>Business Account ID:</strong><br>
                        {{ $channel->business_account_id ?? '--' }}
                    </p>
                @endif

            </div>
        </div>

        <hr>

        <div class="d-flex gap-2">
            <button class="btn btn-warning btn-sm" id="testBtn">
                <i class="las la-flask"></i> Test Connection
            </button>

            <button class="btn btn-danger btn-sm" id="deleteBtn">
                <i class="las la-trash"></i> Delete
            </button>
        </div>

    </div>

</div>
@endsection


@push('scripts')
<script>
$("#testBtn").click(function() {

    $.ajax({
        url: "{{ route('channels.test') }}",
        type: "POST",
        data: {
            id: "{{ crypt_encrypt($channel->id) }}",
            type: "{{ $channel->channel_type }}",
            _token: "{{ csrf_token() }}"
        },
        beforeSend: function(){
            $("#testBtn").html('<i class="las la-spinner la-spin"></i> Testing...');
        },
        success: function(res){
            toastr.success(res.message);
            $("#testBtn").html('<i class="las la-flask"></i> Test Connection');
        },
        error: function(xhr){
            toastr.error(xhr.responseJSON?.message || "Test failed");
            $("#testBtn").html('<i class="las la-flask"></i> Test Connection');
        }
    });

});


$("#deleteBtn").click(function(){

    swal({
        title: "Delete Channel?",
        text: "This action cannot be undone.",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((yes) => {

        if (!yes) return;

        $.ajax({
            url: "{{ route('channels.delete') }}",
            type: "DELETE",
            data: {
                id: "{{ crypt_encrypt($channel->id) }}",
                type: "{{ $channel->channel_type }}",
                _token: "{{ csrf_token() }}"
            },
            success: function(res){
                toastr.success(res.message);
                setTimeout(() => window.location.href = "{{ route('channels.index') }}", 800);
            },
            error: function(xhr){
                toastr.error(xhr.responseJSON?.message || "Delete failed");
            }
        });

    });

});
</script>
@endpush