@extends('layouts.app')

@section('title', 'Departments')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-0">
                                <i class="fas fa-building mr-2"></i>
                                Departments Management
                            </h2>
                            <p class="mb-0 mt-2 opacity-75">Manage department information and details</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <a href="{{ route('departments.create') }}" class="btn btn-light btn-lg">
                                <i class="fas fa-plus mr-2"></i> Add New Department
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-primary text-white rounded-circle p-3">
                            <i class="fas fa-building fa-lg"></i>
                        </div>
                    </div>
                    <h3 class="text-primary mb-1">{{ $stats['total'] ?? 0 }}</h3>
                    <p class="text-muted mb-0">Total Departments</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-success text-white rounded-circle p-3">
                            <i class="fas fa-check-circle fa-lg"></i>
                        </div>
                    </div>
                    <h3 class="text-success mb-1">{{ $stats['active'] ?? 0 }}</h3>
                    <p class="text-muted mb-0">Active Departments</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-warning text-white rounded-circle p-3">
                            <i class="fas fa-pause-circle fa-lg"></i>
                        </div>
                    </div>
                    <h3 class="text-warning mb-1">{{ $stats['inactive'] ?? 0 }}</h3>
                    <p class="text-muted mb-0">Inactive Departments</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-info text-white rounded-circle p-3">
                            <i class="fas fa-users fa-lg"></i>
                        </div>
                    </div>
                    <h3 class="text-info mb-1">{{ $departments->total() ?? 0 }}</h3>
                    <p class="text-muted mb-0">Showing Results</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form method="GET" action="{{ route('departments.index') }}" class="row align-items-end">
                        <div class="col-md-4 mb-3">
                            <label for="search" class="form-label font-weight-bold">Search Departments</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="search" name="search" 
                                       value="{{ request('search') }}" placeholder="Search by name, code, or head...">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-primary" type="submit">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="status" class="form-label font-weight-bold">Status Filter</label>
                            <select class="form-control" id="status" name="status">
                                <option value="">All Status</option>
                                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label font-weight-bold">&nbsp;</label>
                            <div class="d-flex">
                                <button type="submit" class="btn btn-primary mr-2">
                                    <i class="fas fa-filter mr-1"></i> Filter
                                </button>
                                <a href="{{ route('departments.index') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-sync-alt mr-1"></i> Reset
                                </a>
                            </div>
                        </div>
                        <div class="col-md-2 mb-3 text-right">
                            <label class="form-label font-weight-bold">&nbsp;</label>
                            <div>
                                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exportModal">
                                    <i class="fas fa-download mr-1"></i> Export
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Departments Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="mb-0">
                                <i class="fas fa-list mr-2"></i>
                                All Departments
                            </h5>
                        </div>
                        <div class="col-md-6 text-right">
                            <span class="text-muted">
                                Showing {{ $departments->firstItem() ?? 0 }} to {{ $departments->lastItem() ?? 0 }} 
                                of {{ $departments->total() }} entries
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th class="border-0">
                                        <i class="fas fa-building mr-1"></i>Department
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-building mr-1"></i>ISP/Branch
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-tag mr-1"></i>Type
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-phone mr-1"></i>Phone
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-envelope mr-1"></i>Email
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-toggle-on mr-1"></i>Status
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-user mr-1"></i>Created By
                                    </th>
                                    <th class="border-0">
                                        <i class="fas fa-calendar mr-1"></i>Created At
                                    </th>
                                    <th class="border-0 text-center">
                                        <i class="fas fa-cogs mr-1"></i>Actions
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($departments as $department)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mr-3" 
                                                 style="width: 40px; height: 40px; font-weight: bold;">
                                                {{ strtoupper(substr($department->name, 0, 1)) }}
                                            </div>
                                            <div>
                                                <h6 class="mb-0 font-weight-bold">{{ $department->name }}</h6>
                                                <small class="text-muted">{{ $department->code }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($department->isp)
                                            <div class="d-flex align-items-center">
                                                <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center mr-2" 
                                                     style="width: 30px; height: 30px; font-size: 12px; font-weight: bold;">
                                                    <i class="fas fa-building"></i>
                                                </div>
                                                <div>
                                                    <span class="font-weight-bold">{{ $department->isp->name }}</span>
                                                    <br>
                                                    <small class="text-muted">{{ $department->isp->code }}</small>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-secondary">
                                            <i class="fas fa-building mr-1"></i>Department
                                        </span>
                                    </td>
                                    <td>
                                        @if($department->head_phone)
                                            <a href="tel:{{ $department->head_phone }}" class="text-decoration-none">
                                                <i class="fas fa-phone mr-1"></i>{{ $department->head_phone }}
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($department->head_email)
                                            <a href="mailto:{{ $department->head_email }}" class="text-decoration-none">
                                                <i class="fas fa-envelope mr-1"></i>{{ $department->head_email }}
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($department->is_active)
                                            <span class="badge badge-success">
                                                <i class="fas fa-check-circle mr-1"></i>Active
                                            </span>
                                        @else
                                            <span class="badge badge-warning">
                                                <i class="fas fa-pause-circle mr-1"></i>Inactive
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center mr-2" 
                                                 style="width: 30px; height: 30px; font-size: 12px; font-weight: bold;">
                                                {{ strtoupper(substr($department->creator->name ?? 'S', 0, 1)) }}
                                            </div>
                                            <span>{{ $department->creator->name ?? 'System' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-muted">
                                            <i class="fas fa-calendar mr-1"></i>
                                            {{ $department->created_at->format('M d, Y') }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('departments.show', $department) }}" 
                                               class="btn btn-sm btn-outline-info" 
                                               data-toggle="tooltip" 
                                               title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('departments.edit', $department) }}" 
                                               class="btn btn-sm btn-outline-warning" 
                                               data-toggle="tooltip" 
                                               title="Edit Department">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger" 
                                                    data-toggle="modal" 
                                                    data-target="#deleteModal{{ $department->id }}"
                                                    title="Delete Department">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Delete Confirmation Modal -->
                                <div class="modal fade" id="deleteModal{{ $department->id }}" tabindex="-1" role="dialog">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header bg-danger text-white">
                                                <h5 class="modal-title">
                                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                                    Confirm Delete
                                                </h5>
                                                <button type="button" class="close text-white" data-dismiss="modal">
                                                    <span>&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <p>Are you sure you want to delete the department <strong>"{{ $department->name }}"</strong>?</p>
                                                <p class="text-muted">This action cannot be undone.</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                    <i class="fas fa-times mr-1"></i>Cancel
                                                </button>
                                                <form action="{{ route('departments.destroy', $department) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">
                                                        <i class="fas fa-trash mr-1"></i>Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center py-5">
                                        <div class="text-muted">
                                            <i class="fas fa-building fa-3x mb-3"></i>
                                            <h5>No departments found</h5>
                                            <p>Start by creating your first department.</p>
                                            <a href="{{ route('departments.create') }}" class="btn btn-primary">
                                                <i class="fas fa-plus mr-2"></i>Add Department
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    @if($departments->hasPages())
    <div class="row mt-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted">
                    Showing {{ $departments->firstItem() ?? 0 }} to {{ $departments->lastItem() ?? 0 }} 
                    of {{ $departments->total() }} entries
                </div>
                <div>
                    {{ $departments->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-download mr-2"></i>
                    Export Departments
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Choose the format you want to export the departments data:</p>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <button class="btn btn-outline-primary btn-block" onclick="exportData('csv')">
                            <i class="fas fa-file-csv mr-2"></i>Export as CSV
                        </button>
                    </div>
                    <div class="col-md-6 mb-3">
                        <button class="btn btn-outline-success btn-block" onclick="exportData('excel')">
                            <i class="fas fa-file-excel mr-2"></i>Export as Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom Bootstrap 4 Enhancements */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.bg-primary {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
}

.bg-success {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
}

.bg-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
}

.bg-info {
    background: linear-gradient(135deg, #17a2b8, #117a8b) !important;
}

.bg-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.table th {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.pagination .page-link {
    border-radius: 0.375rem;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    color: #007bff;
}

.pagination .page-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-header h2 {
        font-size: 1.5rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
    }
    
    .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }
    
    .d-flex.align-items-center > div:first-child {
        margin-bottom: 0.5rem;
    }
}

/* Animation for empty state */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.text-muted i.fa-3x {
    animation: fadeIn 0.6s ease-out;
}
</style>

<script>
$(document).ready(function() {
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
    
    // Auto-submit form on status change
    $('#status').change(function() {
        $(this).closest('form').submit();
    });
    
    // Search form enhancement
    $('#search').on('keypress', function(e) {
        if (e.which === 13) {
            $(this).closest('form').submit();
        }
    });
});

function exportData(format) {
    // Implementation for export functionality
    alert('Export functionality will be implemented here for ' + format + ' format');
    $('#exportModal').modal('hide');
}
</script>
@endsection