@extends('admin.layouts.master')

@section('title', 'Course Management')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --secondary: #64748b;
            --bg-light: #f8fafc;
            --border-color: #e2e8f0;
            --text-main: #1e293b;
            --text-muted: #64748b;
        }

        /* --- Card & Layout --- */
        .saas-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        /* --- UNIFIED SEARCH & FILTER DESIGN (The "Same Design" you asked for) --- */
        .input-group-merged {
            position: relative;
            display: flex;
            align-items: center;
            color: var(--text-muted);
        }

        .input-group-merged i {
            position: absolute;
            left: 16px;
            font-size: 1.1rem;
            z-index: 5;
            pointer-events: none;
        }

        /* Shared style for both Input and Select to look identical */
        .form-control-unified {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.8rem;
            /* Padding for the icon */
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-main);
            background-color: var(--bg-light);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            transition: all 0.2s ease-in-out;
            appearance: none;
            /* Removes default browser styling for selects */
        }

        .form-control-unified:focus {
            background-color: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
            outline: none;
        }

        /* Custom Arrow for Selects */
        select.form-control-unified {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 16px 12px;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        /* --- Table Styling --- */
        .saas-table th {
            background: var(--bg-light);
            padding: 1rem 1.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            border-bottom: 1px solid var(--border-color);
        }

        .saas-table td {
            padding: 1rem 1.5rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
        }

        .saas-table tbody tr:hover td {
            background-color: #f8fafc;
        }

        .course-avatar {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-light);
        }

        .course-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- Buttons --- */
        .action-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: 0.2s;
            cursor: pointer;
        }

        .action-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: #f5f3ff;
        }

        .action-btn.delete:hover {
            border-color: #ef4444;
            color: #ef4444;
            background: #fef2f2;
        }

        /* --- Badges --- */
        .status-badge {
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .status-active {
            background: #dcfce7;
            color: #166534;
        }

        .status-active::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #22c55e;
            border-radius: 50%;
        }

        .status-suspended {
            background: #fee2e2;
            color: #991b1b;
        }

        .status-suspended::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #ef4444;
            border-radius: 50%;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">
        <div class="d-flex align-items-center justify-content-between page-header-breadcrumb mb-4">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item"><a href="#" class="text-muted text-decoration-none">Academic</a>
                        </li>
                        <li class="breadcrumb-item active fw-medium text-primary">Courses</li>
                    </ol>
                </nav>
                <h2 class="fw-bold text-dark m-0">Course Management</h2>
            </div>
            <a href="{{ route('admin.course.create') }}" class="btn btn-primary px-4 py-2 d-flex align-items-center gap-2"
                style="border-radius: 12px; font-weight: 500;">
                <i class="ri-add-line fs-18"></i> Create New Course
            </a>
        </div>

        @livewire('admin.course.course-list')
    </div>
@endsection