@extends('layouts.bootstrap')

@section('title', 'Document Types Management')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">
                <i class="bi bi-file-earmark-text me-2"></i>Document Types Management
            </h1>
            <p class="text-muted mb-0">Manage document types for tender requirements</p>
        </div>
        <div>
            <a href="{{ route('document-types.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-1"></i>Add New Document Type
            </a>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Document Types Table -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <h5 class="card-title mb-0">
                <i class="bi bi-list-ul me-2"></i>All Document Types ({{ $documentTypes->count() }})
            </h5>
        </div>
        <div class="card-body p-0">
            @if($documentTypes->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 60px;">#</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th style="width: 100px;">Status</th>
                                <th style="width: 80px;">Order</th>
                                <th style="width: 120px;">Used In</th>
                                <th style="width: 150px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($documentTypes as $documentType)
                                <tr>
                                    <td>
                                        <span class="badge bg-secondary">{{ $documentType->id }}</span>
                                    </td>
                                    <td>
                                        <strong>{{ $documentType->name }}</strong>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ Str::limit($documentType->description, 80) ?: 'No description' }}
                                        </small>
                                    </td>
                                    <td>
                                        @if($documentType->is_active)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ $documentType->sort_order }}</span>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ $documentType->requirements_count ?? 0 }} tenders
                                        </small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ route('document-types.edit', $documentType) }}" 
                                               class="btn btn-outline-primary" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            @if(($documentType->requirements_count ?? 0) == 0)
                                                <form action="{{ route('document-types.destroy', $documentType) }}" 
                                                      method="POST" class="d-inline"
                                                      onsubmit="return confirm('Are you sure you want to delete this document type?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger" title="Delete">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            @else
                                                <button class="btn btn-outline-secondary" disabled title="Cannot delete - used in tenders">
                                                    <i class="bi bi-lock"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-file-earmark-text text-muted" style="font-size: 3rem;"></i>
                    <h5 class="text-muted mt-3">No Document Types Found</h5>
                    <p class="text-muted">Start by creating your first document type for tender requirements.</p>
                    <a href="{{ route('document-types.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-1"></i>Create First Document Type
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Help Section -->
    <div class="row mt-4">
        <div class="col-md-8">
            <div class="card border-info">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>How Document Types Work</h6>
                </div>
                <div class="card-body">
                    <ul class="mb-0">
                        <li><strong>Active Status:</strong> Only active document types appear in tender forms</li>
                        <li><strong>Sort Order:</strong> Controls the display order in tender forms (lower numbers first)</li>
                        <li><strong>Usage Tracking:</strong> Shows how many tenders use each document type</li>
                        <li><strong>Delete Protection:</strong> Document types used in tenders cannot be deleted</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-success">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="bi bi-lightbulb me-2"></i>Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('document-types.create') }}" class="btn btn-outline-success btn-sm">
                            <i class="bi bi-plus me-1"></i>Add Document Type
                        </a>
                        <a href="{{ route('tenders.index') }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-eye me-1"></i>View Tenders
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection