@extends('layouts.app')
@section('title', 'Checklist Templates')
@section('content')
<div class="d-flex justify-content-between mb-3">
    <h4>Checklist Templates</h4>
    <div>
        <a href="{{ route('admin.checklists.history') }}" class="btn btn-outline-dark btn-sm">Submission History</a>
        <button class="btn btn-dark btn-sm" data-bs-toggle="modal" data-bs-target="#addTemplate">+ Add Template</button>
    </div>
</div>

@foreach ($templates as $t)
<div class="card p-3 mb-3">
    <div class="d-flex justify-content-between align-items-center">
        <h6>{{ $t->name }} <span class="badge bg-secondary">{{ ucfirst($t->shift_type) }}</span></h6>
        <form method="POST" action="{{ route('admin.checklist-templates.destroy', $t) }}" onsubmit="return confirm('Delete this template?')">
            @csrf @method('DELETE')
            <button class="btn btn-sm btn-outline-danger">Delete Template</button>
        </form>
    </div>
    <ul class="list-group list-group-flush mb-2">
        @foreach ($t->items as $item)
        <li class="list-group-item d-flex justify-content-between px-0">
            {{ $item->description }}
            <form method="POST" action="{{ route('admin.checklist-templates.remove-item', $item) }}">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger">✕</button>
            </form>
        </li>
        @endforeach
    </ul>
    <form method="POST" action="{{ route('admin.checklist-templates.add-item', $t) }}" class="d-flex gap-2">
        @csrf
        <input name="description" class="form-control" placeholder="New checklist item" required>
        <button class="btn btn-sm btn-dark">Add</button>
    </form>
</div>
@endforeach

<div class="modal fade" id="addTemplate" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.checklist-templates.store') }}">
                @csrf
                <div class="modal-header"><h5>Add Checklist Template</h5></div>
                <div class="modal-body">
                    <div class="mb-2"><label class="form-label">Name</label><input name="name" class="form-control" placeholder="e.g. Opening Checklist" required></div>
                    <div class="mb-2">
                        <label class="form-label">Type</label>
                        <select name="shift_type" class="form-select">
                            <option value="opening">Opening</option>
                            <option value="closing">Closing</option>
                            <option value="general">General</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn btn-dark">Save</button></div>
            </form>
        </div>
    </div>
</div>
@endsection