@extends('root')
@section('title', 'Send Campaign')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Send Campaign',
        'links' => [],
        'current' => 'Campaigns'
    ])

    <div class="card card-body">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h5 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-megaphone text-primary"></i>
                    Send Campaign
                </h5>
                <p class="mb-0 text-muted small">
                    Kelola campaign broadcast berbasis template WABA, lengkap dengan jadwal dan jumlah penerima.
                </p>
            </div>
            <div>
                <a href="{{ route('client.campaigns.create') }}" class="btn btn-primary">
                    <i class="ti ti-plus text-white me-1 fs-5"></i> Buat Campaign
                </a>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-client-campaigns">
                <thead>
                    <tr>
                        <th>Template</th>
                        <th>Total Target</th>
                        <th>Status</th>
                        <th>Sent</th>
                        <th>Success Rate</th>
                        <th>Created</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#datatable-client-campaigns').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('client.campaigns.data') }}',
            dataSrc: 'data'
        },
        order: [[ 5, 'desc' ]],
        columns: [
            { data: 'template_name', name: 'template_name' },
            {
                data: 'total_targets',
                name: 'total_targets',
                render: function (data) {
                    return data || 0;
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function (data) {
                    if (!data) return '-';
                    var cls = 'bg-secondary';
                    if (data === 'completed') cls = 'bg-success';
                    else if (data === 'running' || data === 'scheduled' || data === 'pending') cls = 'bg-warning text-dark';
                    else if (data === 'failed') cls = 'bg-danger';
                    else if (data === 'draft') cls = 'bg-secondary';
                    return '<span class="badge rounded-pill ' + cls + '">' + data + '</span>';
                }
            },
            {
                data: 'sent_count',
                name: 'sent_count',
                render: function (data, type, row) {
                    return (data || 0) + '/' + (row.total_targets || 0);
                }
            },
            {
                data: 'success_rate',
                name: 'success_rate',
                render: function (data) {
                    return (data || 0) + '%';
                }
            },
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data, type, row) {
                    if (type === 'sort') {
                        return row.created_at_ts;
                    }
                    return data;
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function (data, type, row) {
                    var showUrl = '{{ route('client.campaigns.show', ':id') }}'.replace(':id', row.id);
                    return `
                        <a href="`+showUrl+`" class="btn btn-info btn-sm">
                            <i class="ti ti-eye"></i>
                        </a>
                        ${(row.status === 'running' && (row.failed_count > 0)) ? `
                            <button onclick="retryCampaign(${row.id})" class="btn btn-warning btn-sm" title="Retry Failed">
                                <i class="ti ti-rotate"></i>
                            </button>
                        ` : ''}
                        ${(row.status === 'pending' || row.status === 'running') ? `
                            <button onclick="retryCampaign(${row.id})" class="btn btn-success btn-sm" title="Lanjutkan Campaign">
                                <i class="ti ti-player-play"></i>
                            </button>
                        ` : ''}
                    `;
                }
            },
        ]
    });
});
</script>
<script>
function retryCampaign(id) {
    if(!confirm('Are you sure you want to retry failed messages?')) return;
    
    $.ajax({
        url: '{{ url("client/campaigns") }}/' + id + '/retry',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(res) {
            // success
            if (res.meta && res.meta.status === 'success') {
                 Swal.fire('Success', res.meta.message, 'success');
                 $('#datatable-client-campaigns').DataTable().ajax.reload();
            }
        },
        error: function(err) {
            var msg = err.responseJSON?.meta?.message || 'Server error';
            Swal.fire('Error', msg, 'error');
        }
    });
}
</script>
@endpush