@extends('layouts.app')

@section('title', 'Connect - View Notification Templates')

@section('content')
<div class="page-header d-print-none mb-4">
    <div class="row align-items-center">
        <div class="col">
            <div class="page-pretitle text-muted text-uppercase fw-bold" style="font-size: 0.65rem; letter-spacing: 1px;">System Configuration</div>
            <h2 class="page-title text-white fs-1">System Notification Templates</h2>
            <div class="text-muted small">View active email and WhatsApp notifications triggered by the system.</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom border-secondary-5 bg-transparent">
                <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
                    <li class="nav-item">
                        <a href="#tabs-email" class="nav-link active" data-bs-toggle="tab">
                            <i class="ti ti-mail me-2 text-info"></i> Email Templates
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#tabs-whatsapp" class="nav-link" data-bs-toggle="tab">
                            <i class="ti ti-brand-whatsapp me-2 text-success"></i> WhatsApp Templates
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="card-body">
                <div class="tab-content">
                     <!-- Email Templates Tab -->
                     <div class="tab-pane active show" id="tabs-email">
                         <div class="row row-cards">
                             @foreach($emailTemplates as $tpl)
                                 <div class="col-md-6">
                                     <div class="card h-100 border-secondary">
                                         <div class="card-header d-flex justify-content-between align-items-center border-secondary bg-transparent">
                                             <div>
                                                 <h3 class="card-title text-white fw-bold mb-0">{{ $tpl->name }}</h3>
                                                 <small class="text-muted">Key: <code>{{ $tpl->key }}</code></small>
                                             </div>
                                             <span class="badge bg-info-lt text-info">Email</span>
                                         </div>
                                         <div class="card-body">
                                             <div class="mb-3">
                                                 <span class="fw-bold text-white-50 d-block small mb-1">Subject Line</span>
                                                 <div class="p-2 bg-dark-50 border border-secondary rounded text-white small">
                                                     {{ $tpl->subject }}
                                                 </div>
                                             </div>
                                             <div class="mb-3">
                                                 <span class="fw-bold text-white-50 d-block small mb-1">Placeholders Used</span>
                                                 <div>
                                                     @php $placeholders = json_decode($tpl->placeholders ?? '[]', true); @endphp
                                                     @foreach($placeholders as $ph)
                                                         <span class="badge bg-warning-lt text-warning m-1"><code>{!! '{' . $ph . '}' !!}</code></span>
                                                     @endforeach
                                                 </div>
                                             </div>
                                             <div>
                                                 <span class="fw-bold text-white-50 d-block small mb-1">Body Preview</span>
                                                 <div class="p-3 bg-dark border border-secondary rounded text-white-50 overflow-auto" style="max-height: 250px; font-size: 0.85rem;">
                                                     {!! $tpl->body !!}
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="card-footer bg-transparent border-top border-secondary d-flex justify-content-between align-items-center">
                                             <div>
                                                 @if($tpl->is_customized)
                                                     <span class="badge bg-warning-lt text-warning"><i class="ti ti-check me-1"></i> Customized Override</span>
                                                 @else
                                                     <span class="badge bg-secondary-lt text-secondary">System Default</span>
                                                 @endif
                                             </div>
                                             <div class="d-flex gap-2">
                                                 @if($tpl->is_customized)
                                                     <form action="{{ route('settings.templates.email.reset', $tpl->key) }}" method="POST" onsubmit="return confirm('Are you sure you want to reset this template to system default? Your customizations will be lost.');">
                                                         @csrf
                                                         <button type="submit" class="btn btn-outline-danger btn-sm">
                                                             <i class="ti ti-rotate"></i> Reset
                                                         </button>
                                                     </form>
                                                 @endif
                                                 <button class="btn btn-outline-warning btn-sm edit-email-btn"
                                                         data-key="{{ $tpl->key }}"
                                                         data-name="{{ $tpl->name }}"
                                                         data-subject="{{ $tpl->subject }}"
                                                         data-body="{{ $tpl->body }}"
                                                         data-placeholders="{{ $tpl->placeholders }}"
                                                         data-bs-toggle="modal"
                                                         data-bs-target="#editEmailModal">
                                                     <i class="ti ti-edit me-1"></i> Customize
                                                 </button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             @endforeach
                         </div>
                     </div>
 
                     <!-- WhatsApp Templates Tab -->
                     <div class="tab-pane" id="tabs-whatsapp">
                         <div class="row row-cards">
                             @foreach($whatsappTemplates as $tpl)
                                 <div class="col-md-6">
                                     <div class="card h-100 border-secondary">
                                         <div class="card-header d-flex justify-content-between align-items-center border-secondary bg-transparent">
                                             <div>
                                                 <h3 class="card-title text-white fw-bold mb-0">{{ $tpl->name }}</h3>
                                                 <small class="text-muted">Key: <code>{{ $tpl->key }}</code></small>
                                             </div>
                                             <div>
                                                 @if($tpl->is_active)
                                                     <span class="badge bg-success-lt text-success">Active</span>
                                                 @else
                                                     <span class="badge bg-danger-lt text-danger">Inactive</span>
                                                 @endif
                                             </div>
                                         </div>
                                         <div class="card-body">
                                             <div class="mb-3">
                                                 <span class="fw-bold text-white-50 d-block small mb-1">Meta Register Code</span>
                                                 <div class="p-2 bg-dark-50 border border-secondary rounded text-white small">
                                                     <code>{{ $tpl->template_name }}</code> ({{ $tpl->language }})
                                                 </div>
                                             </div>
                                             <div class="mb-3">
                                                 <span class="fw-bold text-white-50 d-block small mb-1">Placeholders Mapping</span>
                                                 <div>
                                                     @php $placeholders = json_decode($tpl->placeholders ?? '[]', true); @endphp
                                                     @foreach($placeholders as $index => $ph)
                                                         <span class="badge bg-warning-lt text-warning m-1"><code>{!! '{{' . ($index + 1) . '}}' !!}</code> ({{ $ph }})</span>
                                                     @endforeach
                                                 </div>
                                             </div>
                                             <div>
                                                 <span class="fw-bold text-white-50 d-block small mb-1">Body Preview</span>
                                                 <div class="p-3 bg-dark border border-secondary rounded text-white-50 overflow-auto text-monospace" style="max-height: 250px; font-size: 0.85rem; white-space: pre-wrap;">{{ $tpl->body }}</div>
                                             </div>
                                         </div>
                                         <div class="card-footer bg-transparent border-top border-secondary d-flex justify-content-between align-items-center">
                                             <div>
                                                 @if($tpl->is_customized)
                                                     <span class="badge bg-warning-lt text-warning"><i class="ti ti-check me-1"></i> Customized Override</span>
                                                 @else
                                                     <span class="badge bg-secondary-lt text-secondary">System Default</span>
                                                 @endif
                                             </div>
                                             <div class="d-flex gap-2">
                                                 @if($tpl->is_customized)
                                                     <form action="{{ route('settings.templates.whatsapp.reset', $tpl->key) }}" method="POST" onsubmit="return confirm('Are you sure you want to reset this template to system default? Your customizations will be lost.');">
                                                         @csrf
                                                         <button type="submit" class="btn btn-outline-danger btn-sm">
                                                             <i class="ti ti-rotate"></i> Reset
                                                         </button>
                                                     </form>
                                                 @endif
                                                 <button class="btn btn-outline-warning btn-sm edit-whatsapp-btn"
                                                         data-key="{{ $tpl->key }}"
                                                         data-name="{{ $tpl->name }}"
                                                         data-body="{{ $tpl->body }}"
                                                         data-active="{{ $tpl->is_active ? 1 : 0 }}"
                                                         data-placeholders="{{ $tpl->placeholders }}"
                                                         data-bs-toggle="modal"
                                                         data-bs-target="#editWhatsAppModal">
                                                     <i class="ti ti-edit me-1"></i> Customize
                                                 </button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             @endforeach
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>

<!-- Edit Email Template Modal -->
<div class="modal modal-blur fade" id="editEmailModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content" style="background-color: #12161f; border: 1px solid rgba(255, 255, 255, 0.1);">
            <div class="modal-header border-bottom border-secondary-5">
                <h5 class="modal-title text-white fw-bold"><i class="ti ti-edit me-2 text-warning"></i>Customize Email Template: <span id="email_tpl_name"></span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editEmailForm" action="" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-white fw-bold">Subject Line</label>
                        <input type="text" class="form-control" name="subject" id="email_tpl_subject" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-white fw-bold">Template Body (HTML allowed)</label>
                        <textarea class="form-control text-monospace" name="body" id="email_tpl_body" rows="12" required style="background-color: #0d0f14; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-family: monospace;"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-white-50 small fw-bold">Available Placeholders</label>
                        <div id="email_tpl_placeholders_container" class="d-flex flex-wrap gap-1 p-2 bg-dark rounded border border-secondary">
                        </div>
                        <small class="text-muted">Placeholders can be placed anywhere in the subject or body and will be replaced with real data at dispatch.</small>
                    </div>
                </div>
                <div class="modal-footer border-top border-secondary-5 bg-transparent">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning"><i class="ti ti-device-floppy me-1"></i> Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit WhatsApp Template Modal -->
<div class="modal modal-blur fade" id="editWhatsAppModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content" style="background-color: #12161f; border: 1px solid rgba(255, 255, 255, 0.1);">
            <div class="modal-header border-bottom border-secondary-5">
                <h5 class="modal-title text-white fw-bold"><i class="ti ti-edit me-2 text-warning"></i>Customize WhatsApp Template: <span id="whatsapp_tpl_name"></span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editWhatsAppForm" action="" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-white fw-bold">Template Body (Must match Meta configuration structure)</label>
                        <textarea class="form-control text-monospace" name="body" id="whatsapp_tpl_body" rows="6" required style="background-color: #0d0f14; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-family: monospace;"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-white fw-bold">Notification Status</label>
                        <select class="form-select" name="is_active" id="whatsapp_tpl_active" required>
                            <option value="1">Active (Send WhatsApp alerts)</option>
                            <option value="0">Inactive (Do not send WhatsApp alerts)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-white-50 small fw-bold">Placeholders Mapping</label>
                        <div id="whatsapp_tpl_placeholders_container" class="d-flex flex-column gap-1 p-2 bg-dark rounded border border-secondary">
                        </div>
                        <small class="text-muted">Placeholders <code>{!! '{{1}}' !!}</code>, <code>{!! '{{2}}' !!}</code>, etc. will map to these values in order.</small>
                    </div>
                </div>
                <div class="modal-footer border-top border-secondary-5 bg-transparent">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning"><i class="ti ti-device-floppy me-1"></i> Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Email Template Modal Trigger
    const editEmailBtns = document.querySelectorAll('.edit-email-btn');
    editEmailBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            const key = this.dataset.key;
            const name = this.dataset.name;
            const subject = this.dataset.subject;
            const body = this.dataset.body;
            const placeholders = JSON.parse(this.dataset.placeholders || '[]');

            document.getElementById('email_tpl_name').textContent = name;
            document.getElementById('email_tpl_subject').value = subject;
            document.getElementById('email_tpl_body').value = body;
            
            // Set action URL dynamically
            document.getElementById('editEmailForm').action = `{{ url('settings/templates/email') }}/${key}`;

            // Render placeholders
            const container = document.getElementById('email_tpl_placeholders_container');
            container.innerHTML = '';
            placeholders.forEach(ph => {
                const span = document.createElement('span');
                span.className = 'badge bg-warning-lt text-warning m-1';
                span.innerHTML = `<code>{${ph}}</code>`;
                container.appendChild(span);
            });
        });
    });

    // WhatsApp Template Modal Trigger
    const editWhatsAppBtns = document.querySelectorAll('.edit-whatsapp-btn');
    editWhatsAppBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            const key = this.dataset.key;
            const name = this.dataset.name;
            const body = this.dataset.body;
            const active = this.dataset.active;
            const placeholders = JSON.parse(this.dataset.placeholders || '[]');

            document.getElementById('whatsapp_tpl_name').textContent = name;
            document.getElementById('whatsapp_tpl_body').value = body;
            document.getElementById('whatsapp_tpl_active').value = active;

            // Set action URL dynamically
            document.getElementById('editWhatsAppForm').action = `{{ url('settings/templates/whatsapp') }}/${key}`;

            // Render placeholders mapping
            const container = document.getElementById('whatsapp_tpl_placeholders_container');
            container.innerHTML = '';
            placeholders.forEach((ph, index) => {
                const div = document.createElement('div');
                div.className = 'text-white small d-flex gap-2 align-items-center mb-1';
                div.innerHTML = `<span class="badge bg-warning-lt text-warning"><code>{{${index + 1}}}</code></span> <span>maps to <strong>${ph}</strong></span>`;
                container.appendChild(div);
            });
        });
    });
});
</script>
@endsection