@extends('layouts.app')

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

@push('styles')
<style>
    .channel-box { border: 1px solid #eee; padding: 20px; border-radius: 6px; background: #fff; }
    .nav-tabs .nav-link { font-weight: 600; }
</style>
@endpush

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

    <div class="d-flex justify-content-between mb-3">
        <h4>Create Channel</h4>
        <a href="{{ route('channels.index') }}" class="btn btn-secondary btn-sm">
            <i class="las la-arrow-left"></i> Back
        </a>
    </div>

    <div class="channel-box">

        <ul class="nav nav-tabs" id="channelTabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#emailTab">
                    <i class="las la-envelope"></i> Email Channel
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#whatsappTab">
                    <i class="lab la-whatsapp"></i> WhatsApp Channel
                </a>
            </li>
        </ul>

        <div class="tab-content mt-4">

            <!-- EMAIL TAB -->
            <div class="tab-pane fade show active" id="emailTab">

                <form id="emailForm">

                    @csrf

                    <input type="hidden" name="channel_type" value="email">

                    <div class="row">
                        <div class="col-md-6">
                            <label>Channel Name *</label>
                            <input type="text" class="form-control form-control-sm" required name="name">
                        </div>

                        <div class="col-md-6">
                            <label>Ticket Source *</label>
                            <select class="form-control form-control-sm select2" name="ticket_source_id" required>
                                <option value="">Select Source</option>
                                @foreach($emailSources as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Email Username *</label>
                            <input type="text" class="form-control form-control-sm" name="username" required>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Email Password *</label>
                            <input type="password" class="form-control form-control-sm" name="password" required>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Status *</label>
                            <select class="form-control form-control-sm" name="status" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="error">Error</option>
                                <option value="testing">Testing</option>
                            </select>
                        </div>

                    </div>

                    <div class="text-right mt-4">
                        <button type="button" id="btnSaveEmail" class="btn btn-primary btn-sm">
                            <i class="las la-save"></i> Create Email Channel
                        </button>
                    </div>

                </form>
            </div>

            <!-- WHATSAPP TAB -->
            <div class="tab-pane fade" id="whatsappTab">

                <form id="whatsappForm">

                    @csrf

                    <input type="hidden" name="channel_type" value="whatsapp">

                    <div class="row">
                        <div class="col-md-6">
                            <label>Channel Name *</label>
                            <input type="text" class="form-control form-control-sm" required name="name">
                        </div>

                        <div class="col-md-6">
                            <label>Ticket Source *</label>
                            <select class="form-control form-control-sm select2" name="ticket_source_id" required>
                                <option value="">Select Source</option>
                                @foreach($whatsappSources as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Phone Number *</label>
                            <input type="text" class="form-control form-control-sm" name="phone_number" required>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Provider *</label>
                            <select class="form-control form-control-sm" name="provider" required>
                                <option value="whatsapp_business_api">Meta WhatsApp Business API</option>
                                <option value="twilio">Twilio</option>
                                <option value="vonage">Vonage</option>
                            </select>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Status *</label>
                            <select class="form-control form-control-sm" name="status" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="error">Error</option>
                                <option value="pending_verification">Pending Verification</option>
                            </select>
                        </div>

                        <div class="col-md-6 mt-3">
                            <label>Access Token</label>
                            <input type="password" class="form-control form-control-sm" name="access_token">
                        </div>

                    </div>

                    <div class="text-right mt-4">
                        <button type="button" id="btnSaveWhatsapp" class="btn btn-success btn-sm">
                            <i class="lab la-whatsapp"></i> Create WhatsApp Channel
                        </button>
                    </div>

                </form>
            </div>

        </div>

    </div>
</div>
@endsection


@push('scripts')
<script>
$('.select2').select2({ width: '100%' });

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

    $.ajax({
        url: "{{ route('channels.store.email') }}",
        type: "POST",
        data: $("#emailForm").serialize(),
        success: function(res) {
            toastr.success(res.message);
            window.location.href = "{{ route('channels.index') }}";
        },
        error: function(xhr) {
            toastr.error(xhr.responseJSON?.message || "Error creating email channel");
        }
    });

});


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

    $.ajax({
        url: "{{ route('channels.store.whatsapp') }}",
        type: "POST",
        data: $("#whatsappForm").serialize(),
        success: function(res) {
            toastr.success(res.message);
            window.location.href = "{{ route('channels.index') }}";
        },
        error: function(xhr) {
            toastr.error(xhr.responseJSON?.message || "Error creating WhatsApp channel");
        }
    });

});
</script>
@endpush