@extends('layouts.admin')

@section('title', 'Page Articles')

@section('content')

    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
        navbar-scroll="true">
        <div class="container-fluid py-1 px-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
                    <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Tables</li>
                </ol>
                <h6 class="font-weight-bolder mb-0">Tables</h6>
            </nav>
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3">
                    <form action="{{ route('articles.index') }}" method="GET" class="d-flex align-items-center gap-2">

                        <div class="input-group">
                            <span class="input-group-text text-body">
                                <i class="fas fa-heading"></i>
                            </span>
                            <input type="text" name="title" class="form-control" placeholder="Cari judul..."
                                value="{{ request('title') }}">
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </nav>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <h6>Daftar Artikel</h6>
                        <a href="{{ route('articles.create') }}" class="btn btn-sm btn-primary">
                            + Tambah Artikel
                        </a>
                    </div>

                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Artikel
                                        </th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Learning Path
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Trending
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Status
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Dibuat
                                        </th>
                                        <th class="text-secondary opacity-7 text-center">
                                            Aksi
                                        </th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse ($articles as $article)
                                        <tr>
                                            {{-- Artikel --}}
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm">
                                                            {{ $article->title }}
                                                        </h6>
                                                        <p class="text-xs text-secondary mb-0">
                                                            {{ $article->slug }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>

                                            {{-- Learning Path --}}
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $article->learningPath->title ?? '-' }}
                                                </p>
                                            </td>

                                            {{-- Trending --}}
                                            <td class="align-middle text-center text-sm">
                                                @if ($article->is_trending)
                                                    <span class="badge badge-sm bg-gradient-success">
                                                        Trending
                                                    </span>
                                                @else
                                                    <span class="badge badge-sm bg-gradient-secondary">
                                                        Normal
                                                    </span>
                                                @endif
                                            </td>

                                            {{-- Status --}}
                                            <td class="align-middle text-center text-sm">
                                                @if ($article->status === 'publish')
                                                    <span class="badge badge-sm bg-gradient-info">
                                                        Publish
                                                    </span>
                                                @else
                                                    <span class="badge badge-sm bg-gradient-warning">
                                                        Draft
                                                    </span>
                                                @endif
                                            </td>

                                            {{-- Created --}}
                                            <td class="align-middle text-center">
                                                <span class="text-secondary text-xs font-weight-bold">
                                                    {{ $article->created_at->format('d M Y') }}
                                                </span>
                                            </td>

                                            {{-- Aksi --}}
                                            <td class="align-middle text-center">
                                                <a href="{{ route('articles.edit', $article->id) }}"
                                                    class="text-secondary font-weight-bold text-xs me-2">
                                                    Edit
                                                </a>

                                                <form action="{{ route('articles.destroy', $article->id) }}" method="POST"
                                                    class="d-inline" onsubmit="return confirm('Yakin hapus artikel ini?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-link text-danger text-xs p-0 m-0">
                                                        Hapus
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-secondary py-4">
                                                Belum ada artikel
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection