@extends('layouts.master')

@section('content')
    <main style="overflow-y: auto;">
        <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>@if(auth()->user()->hasRole('admin')) Diagram Templates @else User Requests @endif</h2>
                <div>
                    <a href="{{ route('admin.templates.create') }}"
                        class="btn btn-primary">@if(auth()->user()->hasRole('admin')) Create New Template @else Create New
                        Request @endif</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
                                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;">@if(auth()->user()->hasRole('admin')) Template Name @else
                            Customer Name @endif</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; white-space: nowrap;">
                                    <div style="display: flex; gap: 4px; justify-content: flex-end; align-items: center;">
                                        <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;">Edit</a>
                                        <form action="{{ route('admin.templates.destroy', $template) }}" method="POST"
                                            style="display:contents;" onsubmit="return confirm('Delete this template?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn"
                                                style="color:#ef4444; border-color:#fee2e2; padding: 4px 12px;">Delete</button>
                                        </form>
                                    </div>
                                </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