@extends('layouts.app')

@section('content')
@php
    $translationLanguages = ($appLanguages ?? collect())
        ->filter(fn ($language) => filled($language->code))
        ->values();
@endphp
<div class="page-wrapper">
    <div class="page-content">

        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Notification Templates</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('notificationTemplates.index') }}">All Notifications</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Create</li>
                    </ol>
                </nav>
            </div>
        </div>

     

        <div class="card">
            <div class="card-body">
                <h6 class="mb-1">Create Notification Template</h6>
                <p class="text-muted mb-4">Add name, event key, type, placeholders and message.</p>

                <form method="POST" action="{{ route('notificationTemplates.store') }}">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                name="name"
                                value="{{ old('name') }}"
                                class="form-control @error('name') is-invalid @enderror"
                                placeholder="User Registration"
                                required
                            >
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Notification Type <span class="text-danger">*</span></label>
                            <select name="notification_type" class="form-select @error('notification_type') is-invalid @enderror" required>
                                <option value="">Select type</option>
                                <option value="sms" {{ old('notification_type') === 'sms' ? 'selected' : '' }}>SMS</option>
                                <option value="email" {{ old('notification_type') === 'email' ? 'selected' : '' }}>Email</option>
                                <option value="push_notification" {{ old('notification_type') === 'push_notification' ? 'selected' : '' }}>Push Notification</option>
                                <option value="database_notification" {{ old('notification_type') === 'database_notification' ? 'selected' : '' }}>Database Notification</option>
 
                            </select>
                            @error('notification_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Event Key <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                name="event"
                                value="{{ old('event') }}"
                                class="form-control @error('event') is-invalid @enderror"
                                placeholder="user_registered"
                                required
                            >
                            <div class="form-text">Snake case key, e.g. <code>order_created</code>.</div>
                            @error('event')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Short Codes</label>
                            <input
                                type="text"
                                name="short_code"
                                value="{{ old('short_code') }}"
                                class="form-control @error('short_code') is-invalid @enderror"
                                placeholder="{{ '{' }}{name}},{{ '{' }}{order_id}},{{ '{' }}{otp}}"
                            >
                            <div class="form-text">Comma separated placeholders that appear in content.</div>
                            @error('short_code')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4" id="subject-title-container">
                            <label class="form-label">Subject Title</label>
                            <input
                                type="text"
                                name="subject_title"
                                value="{{ old('subject_title') }}"
                                class="form-control @error('subject_title') is-invalid @enderror"
                                placeholder="Subject or subtitle"
                            >
                            @error('subject_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                                <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="deactivated" {{ old('status') === 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <input
                                type="text"
                                name="description"
                                value="{{ old('description') }}"
                                class="form-control @error('description') is-invalid @enderror"
                                placeholder="Describe the purpose of this template"
                            >
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label">Message <span class="text-danger">*</span></label>
                            <textarea
                                name="content"
                                rows="4"
                                class="form-control @error('content') is-invalid @enderror"
                                placeholder="Hello {{ '{' }}{name}}, your order {{ '{' }}{order_id}} is confirmed."
                                required
                            >{{ old('content') }}</textarea>
                            <div class="form-text">Default message for this notification type.</div>
                            @error('content')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        @if($translationLanguages->count())
                            <div class="col-12">
                                <div class="border rounded p-3">
                                    <h6 class="mb-1">Translations</h6>
                                    <p class="text-muted mb-3 small">Manual translation fields. Default locale: <strong>{{ strtoupper($defaultTranslationLocale) }}</strong>.</p>
                                @include('includes.partial.auto_translate.create_toggle')

                                    <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                        @foreach($translationLanguages as $language)
                                            <li class="nav-item" role="presentation">
                                                <button
                                                    class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                    data-bs-toggle="tab"
                                                    data-bs-target="#create-template-translation-{{ $language->code }}"
                                                    type="button"
                                                    role="tab">
                                                    {{ strtoupper($language->code) }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content">
                                        @foreach($translationLanguages as $language)
                                            @php
                                                $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                            @endphp
                                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="create-template-translation-{{ $language->code }}" role="tabpanel">
                                                <div class="row g-3">
                                                    <div class="col-md-6 translation-subject-container">
                                                        <label class="form-label">
                                                            {{ $translationLanguageName }} Subject
                                                            @if($language->code === $defaultTranslationLocale)
                                                                <span class="badge bg-light text-dark border ms-1">Default</span>
                                                            @endif
                                                        </label>
                                                        <input
                                                            type="text"
                                                            name="translations[{{ $language->code }}][subject_title]"
                                                            class="form-control @error('translations.' . $language->code . '.subject_title') is-invalid @enderror"
                                                            value="{{ old('translations.' . $language->code . '.subject_title') }}">
                                                        @error('translations.' . $language->code . '.subject_title')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="col-12">
                                                        <label class="form-label">{{ $translationLanguageName }} Message</label>
                                                        <textarea
                                                            name="translations[{{ $language->code }}][content]"
                                                            rows="3"
                                                            class="form-control @error('translations.' . $language->code . '.content') is-invalid @enderror">{{ old('translations.' . $language->code . '.content') }}</textarea>
                                                        @error('translations.' . $language->code . '.content')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="col-12 d-flex gap-2 mt-2">
                            <button type="submit" class="btn btn-primary px-4">Save Notification</button>
                            <a href="{{ route('notificationTemplates.index') }}" class="btn btn-light border px-4">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const notificationTypeSelect = document.querySelector('select[name="notification_type"]');
        const mainSubjectContainer = document.getElementById('subject-title-container');
        const translationSubjectContainers = document.querySelectorAll('.translation-subject-container');

        function toggleSubjectFields() {
            const selectedType = notificationTypeSelect.value;
            if (selectedType === 'sms') {
                if (mainSubjectContainer) {
                    mainSubjectContainer.classList.add('d-none');
                }
                translationSubjectContainers.forEach(container => {
                    container.classList.add('d-none');
                });
            } else {
                if (mainSubjectContainer) {
                    mainSubjectContainer.classList.remove('d-none');
                }
                translationSubjectContainers.forEach(container => {
                    container.classList.remove('d-none');
                });
            }
        }

        if (notificationTypeSelect) {
            notificationTypeSelect.addEventListener('change', toggleSubjectFields);
            // Run once on load to sync initial state
            toggleSubjectFields();
        }
    });
</script>
@endpush