@extends('root')
@section('title', 'Reseller Templates')

@push('styles')
<style>
    .select-checkbox { cursor: pointer; transform: scale(1.2); }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Reseller Templates',
        'links' => [
            ['url' => route('reseller.dashboard'), 'label' => 'Dashboard Reseller'],
        ],
        'current' => 'Templates'
    ])

    <div class="card card-body mb-3">
        <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-message-circle-2 text-primary"></i>
                    Template WABA Reseller
                </h5>
                <p class="mb-0 text-muted small">
                    Buat dan kelola template untuk semua client Anda. Template approved siap dipakai untuk campaign.
                </p>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" id="btnBulkCopy" disabled>
                    <i class="ti ti-copy me-1"></i> Bulk Copy (<span id="selectedCount">0</span>)
                </button>
                <a href="javascript:void(0)" class="btn btn-primary btn-create" data-url="{{ route('reseller.templates.create') }}">
                    <i class="ti ti-plus text-white me-1 fs-5"></i> Tambah Template
                </a>
            </div>
        </div>
        <div class="row g-2">
            <div class="col-md-3">
                <label class="form-label mb-1 small text-muted">Filter WABA</label>
                <select id="filter_waba_pool" class="form-control">
                    <option value="">Semua WABA</option>
                    @foreach($wabaPools as $pool)
                        <option value="{{ $pool->id }}">{{ $pool->phone_number }} ({{ $pool->account_name }})</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1 small text-muted">Filter Status</label>
                <select id="filter_status" class="form-control">
                    <option value="">Semua Status</option>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="rejected">Rejected</option>
                </select>
            </div>
        </div>
    </div>

    <div class="card card-body">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0">Daftar Template</h5>
            <span class="text-muted small">Gunakan test send untuk cek tampilan ke nomor internal</span>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-reseller-templates">
                <thead>
                    <tr>
                        <th width="5%"><input type="checkbox" id="selectAll"></th>
                        <th>Nama</th>
                        <th>WABA</th>
                        <th>Kategori</th>
                        <th>Status</th>
                        <th>Bahasa</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Modal Bulk Copy --}}
    <div class="modal fade" id="modalBulkCopy" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bulk Copy Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="formBulkCopy">
                    <div class="modal-body">
                        <div class="alert alert-info">
                            Anda akan menyalin <strong id="bulkSelectedCount">0</strong> template.
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Target Copy</label>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="target_type" id="target_specific" value="specific" checked>
                                <label class="form-check-label" for="target_specific">
                                    Ke WABA Pool Tertentu
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="target_type" id="target_all_shared" value="all_shared">
                                <label class="form-check-label" for="target_all_shared">
                                    Ke Semua Shared WABA Pools
                                </label>
                            </div>

                            <div id="targetPoolSelectWrapper">
                                <select class="form-select" name="target_waba_pool_id" id="bulk_target_waba_pool_id">
                                    <option value="">Pilih Target Pool</option>
                                    @foreach($wabaPools as $pool)
                                        <option value="{{ $pool->id }}">{{ $pool->name }} ({{ $pool->phone_number }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Mulai Copy
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    let selectedTemplates = [];

    var table = $('#datatable-reseller-templates').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('reseller.templates.data') }}',
            dataSrc: 'data',
            data: function (d) {
                d.waba_pool_id = $('#filter_waba_pool').val();
                d.status = $('#filter_status').val();
            }
        },
        columns: [
            { 
                data: 'id', 
                orderable: false, 
                searchable: false,
                render: function(data) {
                    return `<input type="checkbox" class="select-checkbox" value="${data}">`;
                }
            },
            { data: 'name', name: 'name' },
            {
                data: 'waba_pool.phone_number',
                name: 'waba_pool.phone_number',
                defaultContent: '-'
            },
            {
                data: 'category',
                name: 'category',
                defaultContent: '-',
                render: function (data) {
                    if (!data) return '-';
                    var labelMap = {
                        marketing: 'Marketing',
                        utility: 'Utility',
                        otp: 'OTP',
                        service: 'Service'
                    };
                    return '<span class="badge rounded-pill bg-light text-dark">' + (labelMap[data] || data) + '</span>';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function (data) {
                    data = data.toLowerCase();
                    if (!data) return '-';
                    var cls = 'bg-secondary';
                    if (data === 'approved') cls = 'bg-success';
                    else if (data === 'pending') cls = 'bg-warning text-dark';
                    else if (data === 'rejected') cls = 'bg-danger';
                    return '<span class="badge rounded-pill ' + cls + '">' + data + '</span>';
                }
            },
            {
                data: 'language',
                name: 'language',
                render: function (data) {
                    if (!data) return '-';
                    return '<span class="badge rounded-pill bg-light text-muted">' + data + '</span>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function (data, type, row) {
                    var testUrl = '{{ url('/reseller/templates') }}/' + row.id + '/test';
                    const disabled = row.status !== 'approved' ? 'disabled' : '';
                    const tooltip = row.status !== 'approved' ? 'title="Hanya template approved yang dapat diuji"' : '';
                    return `
                        <a href="`+testUrl+`" class="btn btn-sm btn-outline-primary" ${tooltip} ${disabled}>
                            <i class="ti ti-send"></i> Test Send
                        </a>
                    `;
                }
            },
        ]
    });

    $('#filter_waba_pool, #filter_status').on('change', function () {
        table.ajax.reload();
    });

    // Checkbox Logic
    $('#selectAll').click(function() {
        $('.select-checkbox').prop('checked', this.checked);
        updateSelected();
    });

    $(document).on('change', '.select-checkbox', function() {
        updateSelected();
        if ($('.select-checkbox:checked').length == $('.select-checkbox').length) {
            $('#selectAll').prop('checked', true);
        } else {
            $('#selectAll').prop('checked', false);
        }
    });

    function updateSelected() {
        selectedTemplates = [];
        $('.select-checkbox:checked').each(function() {
            selectedTemplates.push($(this).val());
        });
        
        $('#selectedCount').text(selectedTemplates.length);
        $('#btnBulkCopy').prop('disabled', selectedTemplates.length === 0);
    }

    // Bulk Copy Modal
    $('#btnBulkCopy').click(function() {
        $('#bulkSelectedCount').text(selectedTemplates.length);
        $('#modalBulkCopy').modal('show');
    });

    $('input[name="target_type"]').change(function() {
        if ($(this).val() === 'specific') {
            $('#targetPoolSelectWrapper').show();
        } else {
            $('#targetPoolSelectWrapper').hide();
        }
    });

    // Submit Bulk Copy
    $('#formBulkCopy').submit(function(e) {
        e.preventDefault();
        const btn = $(this).find('button[type="submit"]');
        const spinner = btn.find('.spinner-border');
        
        const targetType = $('input[name="target_type"]:checked').val();
        const targetPoolId = $('#bulk_target_waba_pool_id').val();

        if (targetType === 'specific' && !targetPoolId) {
            window.toastr && toastr.warning('Pilih target WABA Pool');
            return;
        }

        btn.prop('disabled', true);
        spinner.removeClass('d-none');

        $.ajax({
            url: "{{ route('reseller.templates.bulk-copy') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                template_ids: selectedTemplates,
                target_type: targetType === 'all_shared' ? 'all_shared' : null,
                target_waba_pool_id: targetPoolId
            },
            success: function(res) {
                window.toastr && toastr.success(`Berhasil copy ${res.data.success} template. Gagal: ${res.data.failed}`);
                $('#modalBulkCopy').modal('hide');
                table.ajax.reload();
                selectedTemplates = [];
                updateSelected();
                $('#selectAll').prop('checked', false);
            },
            error: function(err) {
                window.toastr && toastr.error(err.responseJSON?.message || 'Gagal melakukan bulk copy');
            },
            complete: function() {
                btn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });

    $('.btn-create').on('click', function() {
        var url = $(this).data('url');
        // Load create page in modal or redirect? 
        // Based on original code it seems it was a link, but here it has data-url.
        // Assuming it's a redirect based on original code structure which was an <a> tag.
        window.location.href = url;
    });
});
</script>
@endpush