@extends('layouts.app')

@section('title', 'Talepler Modülü Ayarları')

@section('content')
    <div class="container-fluid py-3 talepler-settings-page">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h1 class="h4 mb-0">Talepler Modülü Ayarları</h1>
            <a href="{{ route('admin.talepler.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Geri Dön
            </a>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if(!$ready)
            <div class="alert alert-warning">Modül ayarlari icin gerekli tablolar olusturulmamis! (Gecis islemi gereklidir)</div>
        @else
            @php
                $unitNameById = collect($units ?? collect())->mapWithKeys(fn($u) => [(int) ($u->id ?? 0) => (string) ($u->unit_name ?? '-')]);
            @endphp
            <ul class="nav nav-tabs mb-3" id="settingsTabs" role="tablist">
                <li class="nav-item"><a class="nav-link active" id="units-tab" data-bs-toggle="tab" href="#units"
                        role="tab">Birimler</a></li>
                <li class="nav-item"><a class="nav-link" id="categories-tab" data-bs-toggle="tab" href="#categories"
                        role="tab">Kategoriler</a></li>
                <li class="nav-item"><a class="nav-link" id="templates-tab" data-bs-toggle="tab" href="#templates" role="tab">İş
                        Akışı Şablonları</a></li>
                <li class="nav-item"><a class="nav-link" id="stages-tab" data-bs-toggle="tab" href="#stages" role="tab">Aşamalar
                        </a></li>
                <li class="nav-item"><a class="nav-link" id="transitions-tab" data-bs-toggle="tab" href="#transitions"
                        role="tab">Gecisler</a></li>
            </ul>

            <div class="tab-content" id="settingsTabsContent">
                {{-- BIRIMLER (UNITS) --}}
                <div class="tab-pane fade show active" id="units" role="tabpanel" aria-labelledby="units-tab">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex align-items-center justify-content-between">
                            <strong>Birim Tanımlamaları</strong>
                            <button type="button" class="btn btn-sm btn-primary" onclick="editUnit()">+ Yeni Birim</button>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Anahtar</th>
                                        <th>Ad</th>
                                        <th>Sıra</th>
                                        <th>Durum</th>
                                        <th class="text-end">İşlem</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($units as $u)
                                        <tr>
                                            <td>{{ $u->id }}</td>
                                            <td><code>{{ $u->unit_key }}</code></td>
                                            <td>{{ $u->unit_name }}</td>
                                            <td>{{ $u->sort_order }}</td>
                                            <td>
                                                <span class="badge {{ $u->is_active ? 'bg-success' : 'bg-danger' }}">
                                                    {{ $u->is_active ? 'Aktif' : 'Pasif' }}
                                                </span>
                                            </td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-sm btn-light" onclick='editUnit(@json($u, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT))'><i
                                                        class="bi bi-pencil"></i></button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-muted text-center py-3">Kayıtlı birim bulunamadı.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- KATEGORILER (CATEGORIES) --}}
                <div class="tab-pane fade" id="categories" role="tabpanel" aria-labelledby="categories-tab">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex align-items-center justify-content-between">
                            <strong>Kategori Tanımlamaları</strong>
                            <button type="button" class="btn btn-sm btn-primary" onclick="editCategory()">+ Yeni Kategori</button>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Birim ID</th>
                                        <th>Anahtar</th>
                                        <th>Kategori Adı</th>
                                        <th>Şablon</th>
                                        <th>Durum</th>
                                        <th class="text-end">İşlem</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($categories as $c)
                                        <tr>
                                            <td>{{ $c->id }}</td>
                                            <td>{{ $c->unit_id }}</td>
                                            <td><code>{{ $c->category_key }}</code></td>
                                            <td>{{ $c->category_name }}</td>
                                            <td>{{ $c->template_name ?: '-' }}</td>
                                            <td>
                                                <span class="badge {{ $c->is_active ? 'bg-success' : 'bg-danger' }}">
                                                    {{ $c->is_active ? 'Aktif' : 'Pasif' }}
                                                </span>
                                            </td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-sm btn-light" onclick='editCategory(@json($c, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT))'><i
                                                        class="bi bi-pencil"></i></button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-muted text-center py-3">Kayıtlı kategori bulunamadı.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- ŞABLONLAR (TEMPLATES) --}}
                <div class="tab-pane fade" id="templates" role="tabpanel" aria-labelledby="templates-tab">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex align-items-center justify-content-between">
                            <strong>Süreç Şablonları</strong>
                            <button type="button" class="btn btn-sm btn-primary" onclick="editTemplate()">+ Yeni Şablon</button>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Anahtar</th>
                                        <th>Ad</th>
                                        <th>Görünüm/Varsayılan</th>
                                        <th>Durum</th>
                                        <th class="text-end">İşlem</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($templates as $t)
                                        <tr>
                                            <td>{{ $t->id }}</td>
                                            <td><code>{{ $t->template_key }}</code></td>
                                            <td>{{ $t->template_name }}</td>
                                            <td>
                                                @if($t->is_default) <span class="badge bg-secondary">Varsayılan</span> @endif
                                            </td>
                                            <td>
                                                <span class="badge {{ $t->is_active ? 'bg-success' : 'bg-danger' }}">
                                                    {{ $t->is_active ? 'Aktif' : 'Pasif' }}
                                                </span>
                                            </td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-sm btn-light" onclick='editTemplate(@json($t, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT))'><i
                                                        class="bi bi-pencil"></i></button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-muted text-center py-3">Şablon bulunamadı.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- AŞAMALAR (STAGES) --}}
                <div class="tab-pane fade" id="stages" role="tabpanel" aria-labelledby="stages-tab">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex align-items-center justify-content-between">
                            <strong>Süreç Aşamaları</strong>
                            <button type="button" class="btn btn-sm btn-primary" onclick="editStage()">+ Yeni Aşama</button>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Şablon</th>
                                        <th>Anahtar</th>
                                        <th>Ad</th>
                                        <th>Aşama Grubu (Durum Grubu)</th>
                                        <th>Son Aşama Özelliği</th>
                                        <th>Sıra</th>
                                        <th class="text-end">İşlem</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($stages as $st)
                                        <tr>
                                            <td>{{ $st->id }}</td>
                                            <td>{{ $st->template_name }}</td>
                                            <td><code>{{ $st->stage_key }}</code></td>
                                            <td>{{ $st->stage_name }}</td>
                                            <td>
                                                @if($st->lane_group === 'todo') <span class="badge bg-secondary">Yapilacaklar</span>
                                                @elseif($st->lane_group === 'doing') <span class="badge bg-primary">Islemdekiler</span>
                                                @else <span class="badge bg-success">Tamamlananlar</span>
                                                @endif
                                            </td>
                                            <td>{{ $st->is_terminal ? 'Evet' : 'Hayır' }}</td>
                                            <td>{{ $st->sort_order }}</td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-sm btn-light" onclick='editStage(@json($st, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT))'><i
                                                        class="bi bi-pencil"></i></button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-muted text-center py-3">Aşama bulunamadı.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- GEÇİŞLER (TRANSITIONS) --}}
                <div class="tab-pane fade" id="transitions" role="tabpanel" aria-labelledby="transitions-tab">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex align-items-center justify-content-between">
                            <strong>Gecis Kurallari</strong>
                            <button type="button" class="btn btn-sm btn-primary" onclick="editTransition()">+ Yeni Geçiş</button>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Şablon</th>
                                        <th>Aksiyon Anahtari/Etiketi</th>
                                        <th>Nereden Nereye</th>
                                        <th>İzin Seviyesi</th>
                                        <th>Aday Birim</th>
                                        <th class="text-end">İşlem</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transitions as $tr)
                                        <tr>
                                            <td>{{ $tr->id }}</td>
                                            <td>{{ $tr->template_name }}</td>
                                            <td><code>{{ $tr->action_key }}</code> <br> <small>{{ $tr->action_label }}</small></td>
                                            <td><code>{{ $tr->from_stage_key }}</code> &rarr; <code>{{ $tr->to_stage_key }}</code>
                                            </td>
                                            <td>{{ $tr->permission_scope }}</td>
                                            <td>{{ (int) ($tr->candidate_unit_id ?? 0) > 0 ? ($unitNameById[(int) $tr->candidate_unit_id] ?? ('#' . (int) $tr->candidate_unit_id)) : '-' }}</td>
                                            <td class="text-end">
                                                <button type="button" class="btn btn-sm btn-light" onclick='editTransition(@json($tr, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT))'><i
                                                        class="bi bi-pencil"></i></button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-muted text-center py-3">Geçiş kuralı bulunamadı.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        @endif
    </div>

    {{-- MODALS --}}

    {{-- UNIT MODAL --}}
    <div class="modal fade" id="unitModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.talepler.settings.units.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="u_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="unitModalLabel">Birim Ekle/Düzenle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Birim Anahtari</label>
                        <input type="text" name="unit_key" id="u_key" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Birim Adı</label>
                        <input type="text" name="unit_name" id="u_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Sıralama</label>
                        <input type="number" name="sort_order" id="u_sort" class="form-control" value="0">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="u_active" value="1" checked>
                        <label class="form-check-label">Aktif</label>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Kaydet</button></div>
            </form>
        </div>
    </div>

    {{-- CATEGORY MODAL --}}
    <div class="modal fade" id="categoryModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.talepler.settings.categories.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="c_id">
                <div class="modal-header">
                    <h5 class="modal-title">Kategori Ekle/Düzenle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Bagli Birim</label>
                        <select name="unit_id" id="c_unit" class="form-select" required>
                            @foreach($units as $u) <option value="{{$u->id}}">{{$u->unit_name}}</option> @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Kategori Anahtari</label>
                        <input type="text" name="category_key" id="c_key" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Kategori Adı</label>
                        <input type="text" name="category_name" id="c_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Şablon</label>
                        <select name="workflow_template_id" id="c_template" class="form-select">
                            <option value="">-- Şablon Yok --</option>
                            @foreach($templates as $t) <option value="{{$t->id}}">{{$t->template_name}}</option> @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Sıralama</label>
                        <input type="number" name="sort_order" id="c_sort" class="form-control" value="0">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="c_active" value="1" checked>
                        <label class="form-check-label">Aktif</label>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Kaydet</button></div>
            </form>
        </div>
    </div>

    {{-- TEMPLATE MODAL --}}
    <div class="modal fade" id="templateModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.talepler.settings.templates.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="t_id">
                <div class="modal-header">
                    <h5 class="modal-title">Şablon Ekle/Düzenle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Şablon Anahtarı</label>
                        <input type="text" name="template_key" id="t_key" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Şablon Adı</label>
                        <input type="text" name="template_name" id="t_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Sıralama</label>
                        <input type="number" name="sort_order" id="t_sort" class="form-control" value="0">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_default" id="t_default" value="1">
                        <label class="form-check-label">Varsayılan Şablon</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="t_active" value="1" checked>
                        <label class="form-check-label">Aktif</label>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Kaydet</button></div>
            </form>
        </div>
    </div>

    {{-- STAGE MODAL --}}
    <div class="modal fade" id="stageModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.talepler.settings.stages.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="s_id">
                <div class="modal-header">
                    <h5 class="modal-title">Aşama Ekle/Düzenle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Bağlı Şablon</label>
                        <select name="template_id" id="s_template" class="form-select" required>
                            @foreach($templates as $t) <option value="{{$t->id}}">{{$t->template_name}}</option> @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Aşama Anahtarı</label>
                        <input type="text" name="stage_key" id="s_key" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Aşama Adı</label>
                        <input type="text" name="stage_name" id="s_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Ana Grup (Durum Grubu)</label>
                        <select name="lane_group" id="s_lane" class="form-select" required>
                            <option value="todo">Yapilacaklar</option>
                            <option value="doing">Islemdekiler</option>
                            <option value="done">Tamamlananlar</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Sıralama</label>
                        <input type="number" name="sort_order" id="s_sort" class="form-control" value="0">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_terminal" id="s_terminal" value="1">
                        <label class="form-check-label">Son Aşama mı?</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="s_active" value="1" checked>
                        <label class="form-check-label">Aktif</label>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Kaydet</button></div>
            </form>
        </div>
    </div>

    {{-- TRANSITION MODAL --}}
    <div class="modal fade" id="transitionModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('admin.talepler.settings.transitions.store') }}" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="tr_id">
                <div class="modal-header">
                    <h5 class="modal-title">Geçiş Ekle/Düzenle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Bağlı Şablon</label>
                        <select name="template_id" id="tr_template" class="form-select" required>
                            @foreach($templates as $t) <option value="{{$t->id}}">{{$t->template_name}}</option> @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Aksiyon Anahtari</label>
                        <input type="text" name="action_key" id="tr_action" class="form-control"
                            placeholder="Örn: make_done" required>
                    </div>
                    <div class="mb-3">
                        <label>Aksiyon Adi</label>
                        <input type="text" name="action_label" id="tr_label" class="form-control"
                            placeholder="Örn: Tamamla ve Kapat" required>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            <label>Nereden (Aşama Anahtarı)</label>
                            <input type="text" name="from_stage_key" id="tr_from" class="form-control" required>
                        </div>
                        <div class="col-6">
                            <label>Nereye (Aşama Anahtarı)</label>
                            <input type="text" name="to_stage_key" id="tr_to" class="form-control" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label>Izin Seviyesi</label>
                        <select name="permission_scope" id="tr_perm" class="form-select" required>
                            <option value="assignee_or_manager">Atanan Kişi veya Yetkili</option>
                            <option value="pool_member">Havuz Üyesi</option>
                            <option value="unit_manager">Birim Yöneticisi</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Atanacak Alan</label>
                        <input type="text" name="target_user_field" id="tr_target" class="form-control"
                            placeholder="Örn: assignee_user_id">
                    </div>
                    <div class="mb-3">
                        <label>Kullanıcı Seçim Birimi (Opsiyonel)</label>
                        <select name="candidate_unit_id" id="tr_candidate_unit" class="form-select">
                            <option value="">-- Talebin Birimi --</option>
                            @foreach($units as $u) <option value="{{$u->id}}">{{$u->unit_name}}</option> @endforeach
                        </select>
                        <small class="text-muted">Capraz birim atamalarinda kullanabilirsiniz.</small>
                    </div>
                    <div class="mb-3">
                        <label>Sıralama</label>
                        <input type="number" name="sort_order" id="tr_sort" class="form-control" value="0">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="requires_user_select" id="tr_user_select"
                            value="1">
                        <label class="form-check-label">Kullanıcı Seçimi Gerekli mi?</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" id="tr_active" value="1" checked>
                        <label class="form-check-label">Aktif</label>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Kaydet</button></div>
            </form>
        </div>
    </div>

@endsection

@push('styles')
    <style>
        .talepler-settings-page {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
            --pd-green-mid: #b9d9cc;
        }
        .talepler-settings-page .btn-primary {
            background: var(--pd-green);
            border-color: var(--pd-green);
        }
        .talepler-settings-page .btn-primary:hover,
        .talepler-settings-page .btn-primary:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
        }
        .talepler-settings-page .btn-outline-primary {
            color: var(--pd-green);
            border-color: var(--pd-green-mid);
        }
        .talepler-settings-page .btn-outline-primary:hover,
        .talepler-settings-page .btn-outline-primary:focus {
            color: var(--pd-green-dark);
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }
        .talepler-settings-page .nav-tabs .nav-link {
            color: #4b5563;
        }
        .talepler-settings-page .nav-tabs .nav-link.active {
            color: var(--pd-green-dark);
            border-color: #dee2e6 #dee2e6 #fff;
            border-top: 2px solid var(--pd-green);
        }
        .talepler-settings-page .nav-tabs .nav-link:hover {
            color: var(--pd-green);
            border-color: #e6ece9 #e6ece9 #dee2e6;
            background: #f8fbfa;
        }
        .talepler-settings-page .bg-primary {
            background-color: var(--pd-green) !important;
        }
        .talepler-settings-page .text-primary {
            color: var(--pd-green) !important;
        }
        .talepler-settings-page .form-control:focus,
        .talepler-settings-page .form-select:focus {
            border-color: var(--pd-green-mid);
            box-shadow: 0 0 0 0.2rem rgba(20, 90, 70, 0.15);
        }
    </style>
@endpush

@push('scripts')
    <script>
        function showSettingsModal(modalId) {
            const modalEl = document.getElementById(modalId);
            if (!modalEl) return;

            if (window.bootstrap?.Modal) {
                window.bootstrap.Modal.getOrCreateInstance(modalEl).show();
                return;
            }

            // Fallback if bootstrap global is unavailable.
            modalEl.classList.add('show');
            modalEl.style.display = 'block';
            modalEl.removeAttribute('aria-hidden');
            modalEl.setAttribute('aria-modal', 'true');
            document.body.classList.add('modal-open');

            let backdrop = document.querySelector('.js-settings-modal-backdrop');
            if (!backdrop) {
                backdrop = document.createElement('div');
                backdrop.className = 'modal-backdrop fade show js-settings-modal-backdrop';
                document.body.appendChild(backdrop);
            }
        }

        function hideSettingsModal(modalEl) {
            if (!modalEl) return;

            modalEl.classList.remove('show');
            modalEl.style.display = 'none';
            modalEl.setAttribute('aria-hidden', 'true');
            modalEl.removeAttribute('aria-modal');
            document.body.classList.remove('modal-open');
            document.querySelectorAll('.js-settings-modal-backdrop').forEach((node) => node.remove());
        }

        document.addEventListener('click', (event) => {
            if (window.bootstrap?.Modal) return;

            const closeBtn = event.target.closest('[data-bs-dismiss="modal"]');
            if (closeBtn) {
                event.preventDefault();
                hideSettingsModal(closeBtn.closest('.modal'));
                return;
            }

            const modal = event.target.classList?.contains('modal') ? event.target : null;
            if (modal && modal.classList.contains('show')) {
                hideSettingsModal(modal);
            }
        });

        window.editUnit = function (data = null) {
            document.getElementById('u_id').value = data ? data.id : '';
            document.getElementById('u_key').value = data ? data.unit_key : '';
            document.getElementById('u_name').value = data ? data.unit_name : '';
            document.getElementById('u_sort').value = data ? data.sort_order : '0';
            document.getElementById('u_active').checked = data ? !!data.is_active : true;
            showSettingsModal('unitModal');
        };

        window.editCategory = function (data = null) {
            document.getElementById('c_id').value = data ? data.id : '';
            document.getElementById('c_unit').value = data ? data.unit_id : '';
            document.getElementById('c_key').value = data ? data.category_key : '';
            document.getElementById('c_name').value = data ? data.category_name : '';
            document.getElementById('c_template').value = data ? data.workflow_template_id : '';
            document.getElementById('c_sort').value = data ? data.sort_order : '0';
            document.getElementById('c_active').checked = data ? !!data.is_active : true;
            showSettingsModal('categoryModal');
        };

        window.editTemplate = function (data = null) {
            document.getElementById('t_id').value = data ? data.id : '';
            document.getElementById('t_key').value = data ? data.template_key : '';
            document.getElementById('t_name').value = data ? data.template_name : '';
            document.getElementById('t_sort').value = data ? data.sort_order : '0';
            document.getElementById('t_default').checked = data ? !!data.is_default : false;
            document.getElementById('t_active').checked = data ? !!data.is_active : true;
            showSettingsModal('templateModal');
        };

        window.editStage = function (data = null) {
            document.getElementById('s_id').value = data ? data.id : '';
            document.getElementById('s_template').value = data ? data.template_id : '';
            document.getElementById('s_key').value = data ? data.stage_key : '';
            document.getElementById('s_name').value = data ? data.stage_name : '';
            document.getElementById('s_lane').value = data ? data.lane_group : 'doing';
            document.getElementById('s_sort').value = data ? data.sort_order : '0';
            document.getElementById('s_terminal').checked = data ? !!data.is_terminal : false;
            document.getElementById('s_active').checked = data ? !!data.is_active : true;
            showSettingsModal('stageModal');
        };

        window.editTransition = function (data = null) {
            document.getElementById('tr_id').value = data ? data.id : '';
            document.getElementById('tr_template').value = data ? data.template_id : '';
            document.getElementById('tr_action').value = data ? data.action_key : '';
            document.getElementById('tr_label').value = data ? data.action_label : '';
            document.getElementById('tr_from').value = data ? data.from_stage_key : '';
            document.getElementById('tr_to').value = data ? data.to_stage_key : '';
            document.getElementById('tr_perm').value = data ? data.permission_scope : 'assignee_or_manager';
            document.getElementById('tr_target').value = data ? data.target_user_field : '';
            document.getElementById('tr_candidate_unit').value = data && data.candidate_unit_id ? data.candidate_unit_id : '';
            document.getElementById('tr_sort').value = data ? data.sort_order : '0';
            document.getElementById('tr_user_select').checked = data ? !!data.requires_user_select : false;
            document.getElementById('tr_active').checked = data ? !!data.is_active : true;
            showSettingsModal('transitionModal');
        };
    </script>
@endpush