@extends('layouts.app')
@section('title', 'Pembina Templat')
@section('heading', 'Templat Senarai Semak')
@section('page-title', 'Pembina: '.$template->name)
@section('subtitle', 'Versi '.$template->version.($template->is_active ? ' • Aktif' : ''))

@section('actions')
    <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editTemplateModal"><i class="bi bi-gear me-1"></i> Tetapan Templat</button>
    <a href="{{ route('checklist-templates.index') }}" class="btn btn-link">Kembali</a>
@endsection

@section('content')
@php($inputTypes = App\Models\ChecklistItem::INPUT_TYPES)

<div class="row g-3">
    <div class="col-lg-8">
        {{-- ============ SEKSYEN ============ --}}
        @foreach ($template->sections as $section)
        <div class="card mb-3">
            <div class="card-header checklist-section-header d-flex justify-content-between align-items-center">
                <div>
                    <span class="badge bg-success me-1">{{ $section->code }}</span>
                    <strong>{{ $section->title }}</strong>
                    @if($section->is_formula_enabled)<span class="badge bg-info ms-1">Formula</span>@endif
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editSection{{ $section->id }}"><i class="bi bi-pencil"></i></button>
                    <form method="POST" action="{{ route('checklist.sections.destroy', $section) }}" data-confirm="Padam seksyen '{{ $section->code }}' beserta skop & item?">@csrf @method('DELETE')<button class="btn btn-outline-danger"><i class="bi bi-trash"></i></button></form>
                </div>
            </div>
            <div class="card-body">
                @if($section->description)<p class="small text-muted">{{ $section->description }}</p>@endif

                {{-- Skop --}}
                @if($section->scopes->isNotEmpty())
                <div class="mb-2">
                    <h6 class="small text-uppercase text-muted">Skop</h6>
                    @foreach ($section->scopes as $scope)
                        <div class="d-flex justify-content-between align-items-center border rounded px-2 py-1 mb-1">
                            <span><span class="badge bg-secondary">{{ $scope->code }}</span> {{ $scope->title }}</span>
                            <form method="POST" action="{{ route('checklist.scopes.destroy', $scope) }}" data-confirm="Padam skop ini?">@csrf @method('DELETE')<button class="btn btn-sm btn-link text-danger p-0"><i class="bi bi-x-lg"></i></button></form>
                        </div>
                    @endforeach
                </div>
                @endif

                {{-- Borang tambah skop --}}
                <details class="mb-3"><summary class="small text-primary" style="cursor:pointer">+ Tambah skop</summary>
                    <form method="POST" action="{{ route('checklist.scopes.store', $section) }}" class="row g-2 mt-1">
                        @csrf
                        <div class="col-3"><input name="code" class="form-control form-control-sm" placeholder="Kod (SKOP1)" required></div>
                        <div class="col-5"><input name="title" class="form-control form-control-sm" placeholder="Tajuk skop" required></div>
                        <div class="col-2"><input name="order" type="number" class="form-control form-control-sm" placeholder="Turutan" value="0"></div>
                        <div class="col-2 d-grid"><button class="btn btn-sm btn-outline-success">Tambah</button></div>
                    </form>
                </details>

                {{-- Item --}}
                <h6 class="small text-uppercase text-muted">Item</h6>
                <div class="table-responsive">
                <table class="table table-sm align-middle">
                    <thead><tr><th>Kod</th><th>Label</th><th>Skop</th><th>Token</th><th>Jenis</th><th>Unit</th><th>Wajib</th><th></th></tr></thead>
                    <tbody>
                    @forelse ($section->items as $item)
                        <tr>
                            <td>{{ $item->code }}</td>
                            <td>{{ $item->label }}@if($item->is_calculated)<span class="badge bg-info ms-1">dikira</span>@endif</td>
                            <td>@if($item->scope)<span class="badge bg-secondary">{{ $item->scope->code }}</span>@else<span class="text-muted small">— Tiada —</span>@endif</td>
                            <td><code>{{ $item->formula_token ?: '—' }}</code></td>
                            <td><span class="small">{{ $inputTypes[$item->input_type] ?? $item->input_type }}</span></td>
                            <td>{{ $item->unit ?: '—' }}</td>
                            <td>{!! $item->is_required ? '<i class="bi bi-check-lg text-success"></i>' : '—' !!}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-link p-0 me-1" data-bs-toggle="modal" data-bs-target="#editItem{{ $item->id }}"><i class="bi bi-pencil"></i></button>
                                <form method="POST" action="{{ route('checklist.items.destroy', $item) }}" class="d-inline" data-confirm="Padam item ini?">@csrf @method('DELETE')<button class="btn btn-sm btn-link text-danger p-0"><i class="bi bi-trash"></i></button></form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="text-center text-muted">Tiada item.</td></tr>
                    @endforelse
                    </tbody>
                </table>
                </div>

                {{-- Borang tambah item --}}
                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addItem{{ $section->id }}"><i class="bi bi-plus-lg"></i> Tambah Item</button>
            </div>
        </div>

        {{-- Modal edit seksyen --}}
        @include('checklist.templates._section_modal', ['section' => $section, 'mode' => 'edit'])
        {{-- Modal tambah item --}}
        @include('checklist.templates._item_modal', ['section' => $section, 'item' => null, 'inputTypes' => $inputTypes])
        {{-- Modal edit item --}}
        @foreach ($section->items as $item)
            @include('checklist.templates._item_modal', ['section' => $section, 'item' => $item, 'inputTypes' => $inputTypes])
        @endforeach
        @endforeach

        {{-- Tambah seksyen --}}
        <div class="card">
            <div class="card-body">
                <h6>Tambah Seksyen Baharu</h6>
                <form method="POST" action="{{ route('checklist.sections.store', $template) }}" class="row g-2">
                    @csrf
                    <div class="col-md-2"><input name="code" class="form-control" placeholder="Kod (A)" required></div>
                    <div class="col-md-5"><input name="title" class="form-control" placeholder="Tajuk seksyen" required></div>
                    <div class="col-md-2"><input name="order" type="number" class="form-control" placeholder="Turutan" value="{{ $template->sections->count() + 1 }}"></div>
                    <div class="col-md-2"><div class="form-check mt-2"><input type="checkbox" name="is_formula_enabled" value="1" class="form-check-input" id="newSecFormula"><label for="newSecFormula" class="form-check-label small">Formula</label></div></div>
                    <div class="col-md-1 d-grid"><button class="btn btn-success">+</button></div>
                </form>
            </div>
        </div>
    </div>

    {{-- ============ FORMULA ============ --}}
    <div class="col-lg-4">
        <div class="card position-sticky" style="top:70px">
            <div class="card-header bg-white fw-semibold">Formula Seksyen</div>
            <div class="card-body">
                <p class="small text-muted">Token tersedia: <em>formula_token</em> setiap item & <em>result_token</em> formula sebelumnya. Cth: <code>SKOP1 + SKOP2 + SKOP3</code>, <code>A - B</code>, <code>D / A * 100</code>.</p>
                @forelse ($template->formulas as $f)
                    <div class="border rounded p-2 mb-2">
                        <div class="d-flex justify-content-between">
                            <strong><code>{{ $f->result_token }}</code> = {{ $f->expression }}</strong>
                            <div>
                                <button class="btn btn-sm btn-link p-0 me-1" data-bs-toggle="modal" data-bs-target="#editFormula{{ $f->id }}"><i class="bi bi-pencil"></i></button>
                                <form method="POST" action="{{ route('checklist.formulas.destroy', $f) }}" class="d-inline" data-confirm="Padam formula?">@csrf @method('DELETE')<button class="btn btn-sm btn-link text-danger p-0"><i class="bi bi-trash"></i></button></form>
                            </div>
                        </div>
                        <div class="small text-muted">{{ $f->label }} @if($f->unit)({{ $f->unit }})@endif @if($f->guard_div_zero)<span class="badge bg-warning text-dark">guard ÷0</span>@endif</div>
                    </div>
                    @include('checklist.templates._formula_modal', ['template' => $template, 'formula' => $f])
                @empty
                    <p class="text-muted small">Tiada formula.</p>
                @endforelse

                <hr>
                <h6 class="small">Tambah Formula</h6>
                <form method="POST" action="{{ route('checklist.formulas.store', $template) }}">
                    @csrf
                    <div class="mb-2"><input name="result_token" class="form-control form-control-sm" placeholder="Token hasil (cth: A)" required></div>
                    <div class="mb-2"><input name="label" class="form-control form-control-sm" placeholder="Label"></div>
                    <div class="mb-2"><input name="expression" class="form-control form-control-sm" placeholder="Ungkapan (cth: A - B)" required></div>
                    <div class="row g-2 mb-2">
                        <div class="col-6"><input name="unit" class="form-control form-control-sm" placeholder="Unit"></div>
                        <div class="col-6"><input name="order" type="number" class="form-control form-control-sm" placeholder="Turutan" value="{{ $template->formulas->count()+1 }}"></div>
                    </div>
                    <div class="form-check mb-2"><input type="checkbox" name="guard_div_zero" value="1" class="form-check-input" id="guardNew"><label for="guardNew" class="form-check-label small">Lindung pembahagian dengan sifar</label></div>
                    <select name="checklist_section_id" class="form-select form-select-sm mb-2">
                        <option value="">— Kaitkan seksyen (pilihan) —</option>
                        @foreach ($template->sections as $s)<option value="{{ $s->id }}">{{ $s->code }} — {{ $s->title }}</option>@endforeach
                    </select>
                    <button class="btn btn-sm btn-success w-100">Tambah Formula</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Modal tetapan templat --}}
<div class="modal fade" id="editTemplateModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
    <form method="POST" action="{{ route('checklist-templates.update', $template) }}">
        @csrf @method('PUT')
        <div class="modal-header"><h5 class="modal-title">Tetapan Templat</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <div class="mb-2"><label class="form-label">Nama</label><input name="name" value="{{ $template->name }}" class="form-control" required></div>
            <div class="mb-2"><label class="form-label">Versi</label><input name="version" value="{{ $template->version }}" class="form-control" required></div>
            <div class="mb-2"><label class="form-label">Penerangan</label><textarea name="description" class="form-control">{{ $template->description }}</textarea></div>
            <div class="form-check form-switch"><input type="checkbox" name="is_active" value="1" class="form-check-input" id="tplActive" @checked($template->is_active)><label for="tplActive" class="form-check-label">Templat aktif</label></div>
        </div>
        <div class="modal-footer"><button class="btn btn-success">Simpan</button></div>
    </form>
</div></div></div>
@endsection