@extends('layouts.app')
@push('styles')
 <link href="{{ asset('assets/npm/froala-editor%40latest/css/froala_editor.pkgd.min.css') }}" rel='stylesheet' type='text/css' />
 
@endpush
@section('content')
@php
    $translationLanguages = ($appLanguages ?? collect())
        ->filter(fn ($language) => filled($language->code))
        ->values();
    $notificationTranslations = $notification->translations->keyBy(fn ($translation) => strtolower($translation->locale));
    $shortCodesDisplay = implode(', ', $notification->short_code ?? []);
@endphp
{{-- <link rel="stylesheet" href="{{ asset('assets/npm/froala-editor@latest/css/froala_editor.pkgd.min.css') }}"> --}}


<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">Edit Email Notification Template</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">Edit Email</li>
                    </ol>
                </nav>
            </div>
        </div>
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card">
            <div class="card-body">
                <h6 class="mb-1">Edit Email Notification Template</h6>
                <form method="POST" action="{{ route('notificationTemplates.update', $notification->id) }}">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="notification_type" value="email">
                    <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', $notification->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">Event Key <span class="text-danger">*</span></label>
                            <input type="text" name="event" value="{{ old('event', $notification->event) }}" class="form-control @error('event') is-invalid @enderror" placeholder="user_registered" required readonly>
                            <div class="form-text">Snake case key (locked, not editable).</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="hidden" name="short_code" value="{{ $shortCodesDisplay }}">
                            <input type="text" value="{{ $shortCodesDisplay }}" class="form-control" placeholder="{{ '{' }}{name}},{{ '{' }}{order_id}},{{ '{' }}{otp}}" readonly>
                            <div class="form-text">Locked; cannot be edited.</div>
                            @error('short_code')
                                <div class="invalid-feedback d-block">{{ $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', $notification->status) === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="deactivated" {{ old('status', $notification->status) === 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                          <div class="col-md-4">
                            <label class="form-label">Subject Title</label>
                            <input type="text" name="subject_title" value="{{ old('subject_title', $notification->subject_title) }}" class="form-control @error('subject_title') is-invalid @enderror" placeholder="Email subject or subtitle">
                             @error('subject_title')
                                <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', $notification->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 for="content" class="form-label">
                                Message <span class="text-danger">*</span>
                            </label>

                            <textarea
                                name="content"
                                id="content"
                                rows="4"
                                class="form-control @error('content') is-invalid @enderror"
                                placeholder="Hello {{ '{' }}{name}}, your order {{ '{' }}{order_id}} is confirmed."
                                required
                            >{{ old('content', $notification->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>
                    </div>

                    @if($translationLanguages->count())
                        <div class="border rounded p-3 mt-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.edit_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="#edit-email-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));
                                        $translation = $notificationTranslations->get(strtolower($language->code));
                                    @endphp
                                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="edit-email-translation-{{ $language->code }}" role="tabpanel">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <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', $translation->subject_title ?? null) }}">
                                                @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 rich-editor @error('translations.' . $language->code . '.content') is-invalid @enderror">{{ old('translations.' . $language->code . '.content', $translation->content ?? null) }}</textarea>
                                                @error('translations.' . $language->code . '.content')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

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





@endsection

 @push('scripts')  
 <script type='text/javascript' src="{{ asset('assets/npm/froala-editor%40latest/js/froala_editor.pkgd.min.js') }}"></script>
    <script>
        // init Froala Editor
        new FroalaEditor('#content');
        new FroalaEditor('.rich-editor');
    </script>
    @endpush