@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{{ $variables['judul'] ?? 'WA Template' }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="form-data">
                            @csrf
                            <div class="row">
                                <div class="form-group col-md-8">
                                    <label>Nama Template <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control" value="{{ $data->name }}" placeholder="Contoh: promo_voucher_diskon" required>
                                    <small class="text-muted">Nama template sesuai yang terdaftar di Meta/BSP</small>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Kategori <span class="text-danger">*</span></label>
                                    <select name="category" class="form-control" required>
                                        @foreach($categories as $key => $label)
                                            <option value="{{ $key }}" {{ $data->category === $key ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label>Bahasa</label>
                                    <input type="text" name="language" class="form-control" value="{{ $data->language ?? 'id' }}">
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Status Meta</label>
                                    <select name="status" class="form-control">
                                        <option value="approved" {{ $data->status === 'approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="pending" {{ $data->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="rejected" {{ $data->status === 'rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>Jumlah Variabel</label>
                                    <input type="number" name="variable_count" class="form-control" value="{{ $data->variable_count ?? 0 }}" min="0" max="20">
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Isi Template (Body) <span class="text-danger">*</span></label>
                                <textarea name="body_text" class="form-control" rows="5" required placeholder="Halo {{1}}, voucher Anda senilai Rp {{2}} sudah siap. Kode: {{3}}">{{ $data->body_text }}</textarea>
                                <small class="text-muted">Gunakan &#123;&#123;1&#125;&#125;, &#123;&#123;2&#125;&#125;, dst sebagai placeholder variabel</small>
                            </div>

                            <div class="form-group">
                                <label>Label Variabel</label>
                                <input type="text" name="variable_labels" class="form-control"
                                       value="{{ $data->variable_labels ? implode(', ', $data->variable_labels) : '' }}"
                                       placeholder="nama, kode_voucher, nominal (pisahkan dengan koma)">
                                <small class="text-muted">Label deskriptif untuk setiap variabel, dipisahkan koma</small>
                            </div>

                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label>Header Type</label>
                                    <select name="header_type" class="form-control">
                                        <option value="none" {{ ($data->header_type ?? 'none') === 'none' ? 'selected' : '' }}>None</option>
                                        <option value="text" {{ $data->header_type === 'text' ? 'selected' : '' }}>Text</option>
                                        <option value="image" {{ $data->header_type === 'image' ? 'selected' : '' }}>Image</option>
                                        <option value="document" {{ $data->header_type === 'document' ? 'selected' : '' }}>Document</option>
                                        <option value="video" {{ $data->header_type === 'video' ? 'selected' : '' }}>Video</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-8">
                                    <label>Header Text</label>
                                    <input type="text" name="header_text" class="form-control" value="{{ $data->header_text }}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Footer Text</label>
                                <input type="text" name="footer_text" class="form-control" value="{{ $data->footer_text }}">
                            </div>

                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ $data->is_active !== false ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">Aktif</label>
                                </div>
                            </div>

                            <hr>
                            <button type="submit" class="btn btn-outline-primary"><i class="fa-regular fa-floppy-disk"></i> Simpan</button>
                            <a href="{{ route('wa-templates.index') }}" class="btn btn-outline-secondary">Batal</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$(function() {
    $('#form-data').on('submit', function(e) {
        e.preventDefault();
        $('#loaderaditdinda').show();
        $.ajax({
            type: 'POST',
            url: '{{ route("wa-templates.store", $data->id ?? 0) }}',
            data: $(this).serialize(),
            dataType: 'json'
        }).done(function(data) {
            Swal.fire({ icon: data[0], text: data[1], confirmButtonColor: '#6c757d' }).then(function(r) {
                if (r.isConfirmed && data[0] === 'success') window.location = '{{ route("wa-templates.index") }}';
            });
        }).fail(function(xhr) {
            var msg = xhr.responseJSON?.message || 'Terjadi kesalahan.';
            Swal.fire({ icon: 'error', text: msg });
        }).always(function() { $('#loaderaditdinda').hide(); });
    });
});
</script>
@endsection