@extends('layouts/contentLayoutMaster')

@section('title', __('locale.menu.WA Templates'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('content')
    <div class="content-body">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ __('locale.whatsapp_templates.sync_title') }}</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.whatsapp_templates.sync') }}" method="POST" class="row g-3">
                    @csrf
                    <div class="col-md-6">
                        <label class="form-label">{{ __('locale.whatsapp_templates.gateway') }}</label>
                        <select name="gateway_id" class="form-select select2" required>
                            <option value="">{{ __('locale.labels.select_one') }}</option>
                            @foreach($syncableGateways as $gateway)
                                <option value="{{ $gateway->id }}" {{ (int) $gatewayId === (int) $gateway->id ? 'selected' : '' }}>
                                    {{ $gateway->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary">
                            <i data-feather="refresh-cw" class="me-25"></i>
                            {{ __('locale.whatsapp_composer.sync_templates') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-2">
            <div class="card-header d-flex align-items-center flex-wrap">
                <h4 class="card-title me-auto mb-0">{{ __('locale.whatsapp_templates.assign_title') }}</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.whatsapp_templates.assign') }}" method="POST" class="row g-3">
                    @csrf
                    <div class="col-md-6">
                        <label class="form-label required">{{ __('locale.whatsapp_templates.templates') }}</label>
                        <select name="template_ids[]" class="form-select select2" multiple required>
                            @foreach($templates as $template)
                                <option value="{{ $template->id }}">
                                    {{ $template->template_name }} ({{ $template->language }}) — {{ $template->user?->displayName() ?? 'Admin' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label required">{{ __('locale.menu.Customers') }}</label>
                        <select name="customer_ids[]" class="form-select select2" multiple required>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->displayName() }} ({{ $customer->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i data-feather="user-plus" class="me-25"></i>
                            {{ __('locale.whatsapp_templates.assign_to_customers') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-2">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ __('locale.whatsapp_templates.all_templates') }}</h4>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered mb-0">
                        <thead class="table-light">
                        <tr>
                            <th>{{ __('locale.labels.name') }}</th>
                            <th>{{ __('locale.menu.Customer') }}</th>
                            <th>{{ __('locale.labels.sending_server') }}</th>
                            <th>{{ __('locale.whatsapp_composer.language') }}</th>
                            <th>{{ __('locale.labels.status') }}</th>
                            <th>{{ __('locale.whatsapp_templates.assigned_customers') }}</th>
                            <th>{{ __('locale.labels.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($templates as $template)
                            <tr>
                                <td>
                                    <strong>{{ $template->template_name }}</strong>
                                    @if($template->body_text)
                                        <br><small class="text-muted">{{ Str::limit($template->body_text, 60) }}</small>
                                    @endif
                                </td>
                                <td>{{ $template->user?->displayName() ?? '—' }}</td>
                                <td>{{ $template->gateway?->name ?? '—' }}</td>
                                <td><code>{{ $template->language }}</code></td>
                                <td>
                                    <span class="{{ $template->status->badgeClass() }}">{{ $template->status->label() }}</span>
                                </td>
                                <td>
                                    @forelse($template->assignments as $assignment)
                                        <span class="badge bg-light-primary mb-25">
                                            {{ $assignment->user?->displayName() }}
                                            <a href="#" class="text-danger unassign-template"
                                               data-id="{{ $template->id }}"
                                               data-customer="{{ $assignment->user_id }}">×</a>
                                        </span>
                                    @empty
                                        <span class="text-muted">{{ __('locale.whatsapp_templates.no_assignments') }}</span>
                                    @endforelse
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-info view-template"
                                            data-url="{{ route('admin.whatsapp_templates.show', $template->id) }}">
                                        <i data-feather="eye"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">
                                    {{ __('locale.whatsapp_templates.empty_admin') }}
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="templateDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('locale.whatsapp_templates.details') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="templateDetailBody">
                    <div class="text-center py-4"><div class="spinner-border"></div></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
<script>
    const csrfToken = @json(csrf_token());

    $('.select2').select2();

    $(document).on('click', '.view-template', function () {
        const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('templateDetailModal'));
        $('#templateDetailBody').html('<div class="text-center py-4"><div class="spinner-border"></div></div>');
        modal.show();

        $.ajax({
            url: $(this).attr('data-url'),
            type: 'GET',
            dataType: 'json',
            headers: { Accept: 'application/json' }
        }).done(function (resp) {
            if (resp.status !== 'success') {
                $('#templateDetailBody').html('<p class="text-danger">Failed to load template.</p>');
                return;
            }
            const d = resp.data;
            const escapeHtml = value => $('<div>').text(value ?? '').html();
            let html = '<p><strong>' + escapeHtml(d.template_name) + '</strong> — ' + escapeHtml(d.language) + '</p>';
            if (d.body_text) {
                html += '<pre class="bg-light p-2">' + escapeHtml(d.body_text) + '</pre>';
            }
            $('#templateDetailBody').html(html);
        });
    });

    $(document).on('click', '.unassign-template', function (event) {
        event.preventDefault();
        const id = $(this).data('id');
        const customerId = $(this).data('customer');

        $.ajax({
            url: '{{ url(config('app.admin_path').'/whatsapp-templates') }}/' + id + '/unassign',
            type: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                Accept: 'application/json'
            },
            data: { _token: csrfToken, customer_id: customerId }
        }).done(function () {
            window.location.reload();
        }).fail(function (xhr) {
            const message = xhr.responseJSON?.message
                || @json(__('locale.whatsapp_templates.assignment_not_found'));

            toastr.error(message, @json(__('locale.labels.ops').'..!!'), {
                closeButton: true,
                positionClass: 'toast-top-right',
                progressBar: true,
                newestOnTop: true,
                rtl: isRtl
            });
        });
    });
</script>
@endsection