@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        {{-- Summary Card --}}
        <div class="row">
            <div class="col-md-12">
                <div class="card card-secondary">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title">{{ $data->title }}</h3>
                        <div>
                            <button id="btnResendFailed" class="btn btn-sm btn-outline-danger" {{ $data->total_failed > 0 ? '' : 'disabled' }}>
                                <i class="fas fa-redo"></i> Kirim Ulang Gagal ({{ $data->total_failed }})
                            </button>
                            <button id="btnRefreshStatus" class="btn btn-sm btn-outline-info">
                                <i class="fas fa-sync-alt"></i> Refresh Status
                            </button>
                            <a href="{{ route('wa-broadcasts.print', $data->id) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-print"></i> Print
                            </a>
                            <a href="{{ route('wa-broadcasts.index') }}" class="btn btn-sm btn-outline-dark">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <strong>Template:</strong><br>{{ $data->template?->name ?? '-' }}
                            </div>
                            <div class="col-md-2">
                                <strong>Kategori:</strong><br>
                                @if($data->category === 'UTILITY')
                                    <span class="badge badge-info">Utility</span>
                                @else
                                    <span class="badge badge-warning">Marketing</span>
                                @endif
                            </div>
                            <div class="col-md-2">
                                <strong>Status:</strong><br>
                                @switch($data->status)
                                    @case('draft') <span class="badge badge-secondary">Draft</span> @break
                                    @case('sending') <span class="badge badge-warning">Sending</span> @break
                                    @case('completed') <span class="badge badge-success">Completed</span> @break
                                    @case('failed') <span class="badge badge-danger">Failed</span> @break
                                @endswitch
                            </div>
                            <div class="col-md-2">
                                <strong>Dibuat:</strong><br>{{ $data->created_at?->format('d M Y H:i') }}<br>
                                <small class="text-muted">{{ $data->creator?->name ?? '-' }}</small>
                            </div>
                            <div class="col-md-3">
                                <strong>Statistik:</strong><br>
                                <span class="badge badge-light">Total: {{ $data->total_recipients }}</span>
                                <span class="badge badge-info">Sent: {{ $data->total_sent }}</span>
                                <span class="badge badge-success">Delivered: {{ $data->total_delivered }}</span>
                                <span class="badge badge-danger">Failed: {{ $data->total_failed }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recipients Table --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Daftar Penerima</h3>
                    </div>
                    <div class="card-body">
                        <table id="id_data_table" class="table table-bordered table-striped table-sm">
                            <thead>
                                <tr>
                                    <th width="4%">No</th>
                                    <th>No. HP</th>
                                    <th>Variabel</th>
                                    <th>Status</th>
                                    <th>Keterangan</th>
                                    <th>Retry</th>
                                    <th>Dikirim</th>
                                    <th>Last Resend</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$(function() {
    var table = $('#id_data_table').DataTable({
        processing: true,
        ajax: { url: '{{ route("wa-broadcasts.show", $data->id) }}', dataSrc: 'data' },
        columns: [
            { data: 0, orderable: false, searchable: false },
            { data: 1 }, { data: 2 }, { data: 3 },
            { data: 4 }, { data: 5 }, { data: 6 }, { data: 7 },
        ],
        responsive: true, lengthChange: true, autoWidth: false, pageLength: 50,
        buttons: ["copy","csv","excel","pdf","print","colvis"],
    });
    table.buttons().container().appendTo('#id_data_table_wrapper .col-md-6:eq(0)');

    // Refresh status
    $('#btnRefreshStatus').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Loading...');
        $.ajax({
            type: 'POST',
            url: '{{ route("wa-broadcasts.refresh-status", $data->id) }}',
            data: { _token: '{{ csrf_token() }}' },
            dataType: 'json'
        }).done(function(data) {
            Swal.fire({ icon: data[0], text: data[1], confirmButtonColor: '#6c757d' }).then(function() {
                window.location.reload();
            });
        }).fail(function() {
            Swal.fire({ icon: 'error', text: 'Gagal refresh status.' });
        }).always(function() {
            btn.prop('disabled', false).html('<i class="fas fa-sync-alt"></i> Refresh Status');
        });
    });

    // Resend failed
    $('#btnResendFailed').on('click', function() {
        Swal.fire({
            icon: 'question',
            title: 'Kirim Ulang?',
            text: 'Pesan akan dikirim ulang ke penerima yang gagal. Lanjutkan?',
            showCancelButton: true,
            confirmButtonText: 'Ya, Kirim Ulang',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#dc3545',
        }).then(function(result) {
            if (!result.isConfirmed) return;
            $('#loaderaditdinda').show();
            $.ajax({
                type: 'POST',
                url: '{{ route("wa-broadcasts.resend-failed", $data->id) }}',
                data: { _token: '{{ csrf_token() }}' },
                dataType: 'json'
            }).done(function(data) {
                Swal.fire({ icon: data[0], text: data[1], confirmButtonColor: '#6c757d' }).then(function() {
                    window.location.reload();
                });
            }).fail(function() {
                Swal.fire({ icon: 'error', text: 'Gagal mengirim ulang.' });
            }).always(function() { $('#loaderaditdinda').hide(); });
        });
    });
});
</script>
@endsection