@extends('layouts.master')

@section('content')
<main>
    <div style="padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px;">
            <h2>Diagram Templates</h2>
            <div>
                <a href="{{ route('admin.templates.create') }}" class="btn btn-primary">Create New Template</a>
            </div>
        </div>

        @if(auth()->user()->hasRole('admin'))
        <div class="panel" style="margin-bottom: 24px; padding: 20px;">
            <form action="{{ route('admin.templates.index') }}" method="GET" style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 200px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px;">Template Name</label>
                    <input type="text" name="name" value="{{ request('name') }}" class="input" placeholder="Search by name..." style="width: 100%;">
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px;">Created By</label>
                    <select name="creator_id" class="input" style="width: 100%;">
                        <option value="">All Creators</option>
                        @foreach($creators as $creator)
                            <option value="{{ $creator->id }}" {{ request('creator_id') == $creator->id ? 'selected' : '' }}>
                                {{ $creator->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div style="flex: 1; min-width: 200px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px;">Created Date</label>
                    <input type="date" name="date" value="{{ request('date') }}" class="input" style="width: 100%;">
                </div>
                <div style="display: flex; gap: 8px;">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('admin.templates.index') }}" class="btn">Reset</a>
                </div>
            </form>
        </div>
        @endif

        <div class="panel" style="padding: 0;">
            <table style="width: 100%; border-collapse: collapse; text-align: left;">
                <thead>
                    <tr style="border-bottom: 1px solid var(--border); background: var(--bg-main);">
                        <th style="padding: 12px 16px;">ID</th>
                        <th style="padding: 12px 16px;">Template Name</th>
                        <th style="padding: 12px 16px;">Created By</th>
                        <th style="padding: 12px 16px;">Created Date</th>
                        <th style="padding: 12px 16px; text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($templates as $template)
                    <tr style="border-bottom: 1px solid var(--border);">
                        <td style="padding: 12px 16px;">#{{ $template->id }}</td>
                        <td style="padding: 12px 16px; font-weight:600;">{{ $template->name }}</td>
                        <td style="padding: 12px 16px;">{{ $template->creator->name ?? 'Unknown' }}</td>
                        <td style="padding: 12px 16px;">{{ $template->created_at->format('M d, Y') }}</td>
                        <td style="padding: 12px 16px; text-align:right;">
                            <a href="{{ route('admin.templates.show', $template) }}" class="btn" style="color:green; border-color:#dcfce7; padding: 4px 12px;">View</a>
                            <a href="{{ route('admin.templates.edit', $template) }}" class="btn" style="color:var(--primary); border-color:var(--primary-light); padding: 4px 12px; margin-left: 4px;">Edit</a>
                            <form action="{{ route('admin.templates.destroy', $template) }}" method="POST" style="display:inline;" onsubmit="return confirm('Delete this template?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn" style="color:#ef4444; border-color:#fee2e2; padding: 4px 12px; margin-left: 4px;">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @if($templates->isEmpty())
            <div style="padding: 24px; text-align:center; color: var(--text-muted);">
                No templates found.
                 <!-- Create one from the <a href="{{ route('admin.templates.create') }}">Diagram Viewer</a>. -->
            </div>
            @endif
        </div>
        <div style="margin-top: 16px;">
            {{ $templates->links() }}
        </div>
    </div>
</main>
@endsection