@extends('admin.layouts.app')

@section('title', 'সব আর্নিং প্রজেক্ট')

@section('panel')

@php
    $pageTitle = 'সব আর্নিং প্রজেক্ট';
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.projects.create') }}" class="btn btn--primary btn-sm">
        <i class="las la-plus"></i>
        নতুন প্রজেক্ট যোগ করুন
    </a>
@endpush

<div class="row">
    <div class="col-lg-12">
        <div class="card">

            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h5 class="mb-0">
                    <i class="las la-project-diagram"></i>
                    সব আর্নিং প্রজেক্ট লিস্ট
                </h5>

                <a href="{{ route('admin.projects.create') }}"
                   class="btn btn--primary btn-sm project-create-button">
                    <i class="las la-plus"></i>
                    নতুন প্রজেক্ট যোগ করুন
                </a>
            </div>

            <div class="card-body">

                {{-- Success Message --}}
                @if(session('success'))
                    <div class="alert alert--success alert-dismissible fade show" role="alert">
                        <i class="las la-check-circle"></i>
                        {{ session('success') }}

                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="alert"
                                aria-label="Close">
                        </button>
                    </div>
                @endif

                {{-- Error Messages --}}
                @if($errors->any())
                    <div class="alert alert--danger mb-3">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover text-center align-middle project-table">

                        <thead>
                            <tr>
                                <th>সিরিয়াল</th>
                                <th>আইকন</th>
                                <th>প্রজেক্ট টাইটেল</th>
                                <th>ক্যাটাগরি</th>
                                <th>ক্যাটাগরি সিরিয়াল</th>
                                <th>কাস্টম ইউআরএল</th>
                                <th>কারা দেখবে (Accessibility)</th>
                                <th>স্ট্যাটাস</th>
                                <th>অ্যাকশন</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($projects as $project)
                                <tr>

                                    {{-- Serial --}}
                                    <td>
                                        <span class="fw-bold">
                                            {{ $project->serial }}
                                        </span>
                                    </td>

                                    {{-- Project Icon --}}
                                    <td>
                                        @if(!empty($project->icon))
                                            <img
                                                src="{{ asset($project->icon) }}"
                                                alt="{{ $project->title }} icon"
                                                class="project-icon"
                                            >
                                        @else
                                            <span class="text-muted">
                                                <i class="las la-image fs-3"></i>
                                            </span>
                                        @endif
                                    </td>

                                    {{-- Project Title --}}
                                    <td>
                                        <strong>{{ $project->title }}</strong>
                                    </td>

                                    {{-- Category --}}
                                    <td>
                                        <span class="badge badge--primary">
                                            {{ $project->category ?? 'Work & Services' }}
                                        </span>
                                    </td>

                                    {{-- Category Serial --}}
                                    <td>
                                        <span class="fw-bold text-muted">
                                            {{ $project->category_serial ?? 1 }}
                                        </span>
                                    </td>

                                    {{-- Custom URL --}}
                                    <td>
                                        @if(!empty($project->custom_url))
                                            <code>{{ $project->custom_url }}</code>
                                        @else
                                            <span class="text-muted">URL নেই</span>
                                        @endif
                                    </td>

                                    {{-- Accessibility --}}
                                    <td>
                                        @if($project->accessibility === 'all')
                                            <span class="badge badge--info">
                                                সবার জন্য
                                            </span>

                                        @elseif($project->accessibility === 'active_1')
                                            <span class="badge badge--success">
                                                অ্যাক্টিভ ইউজার (১)
                                            </span>

                                        @elseif($project->accessibility === 'active_0')
                                            <span class="badge badge--warning">
                                                ইনঅ্যাক্টিভ ইউজার (০)
                                            </span>

                                        @else
                                            <span class="badge badge--dark">
                                                নির্ধারিত নয়
                                            </span>
                                        @endif
                                    </td>

                                    {{-- Status --}}
                                    <td>
                                        @if((int) $project->status === 1)
                                            <span class="badge badge--success">
                                                <i class="las la-check-circle"></i>
                                                Active
                                            </span>
                                        @else
                                            <span class="badge badge--danger">
                                                <i class="las la-times-circle"></i>
                                                Inactive
                                            </span>
                                        @endif
                                    </td>

                                    {{-- Actions --}}
                                    <td>
                                        <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">

                                            <a
                                                href="{{ route('admin.projects.edit', $project->id) }}"
                                                class="btn btn-sm btn--warning"
                                            >
                                                <i class="las la-edit"></i>
                                                Edit
                                            </a>

                                            <form
                                                action="{{ route('admin.projects.destroy', $project->id) }}"
                                                method="POST"
                                                class="d-inline-block"
                                                onsubmit="return confirm('আপনি কি নিশ্চিতভাবে এই প্রজেক্টটি ডিলিট করতে চান?');"
                                            >
                                                @csrf
                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="btn btn-sm btn--danger"
                                                >
                                                    <i class="las la-trash"></i>
                                                    Delete
                                                </button>
                                            </form>

                                        </div>
                                    </td>

                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="py-5">
                                        <div class="empty-project-message">
                                            <i class="las la-folder-open"></i>

                                            <h6 class="mt-2 mb-1">
                                                কোনো প্রজেক্ট তৈরি করা হয়নি
                                            </h6>

                                            <p class="text-muted mb-3">
                                                নতুন একটি আর্নিং প্রজেক্ট তৈরি করুন।
                                            </p>

                                            <a
                                                href="{{ route('admin.projects.create') }}"
                                                class="btn btn--primary btn-sm"
                                            >
                                                <i class="las la-plus"></i>
                                                নতুন প্রজেক্ট যোগ করুন
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

                    </table>
                </div>

                {{-- Pagination --}}
                @if(method_exists($projects, 'links'))
                    <div class="d-flex justify-content-end mt-3">
                        {{ $projects->links() }}
                    </div>
                @endif

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

@endsection

@push('style')
<style>
    .project-table {
        min-width: 1050px;
    }

    .project-table thead th {
        white-space: nowrap;
        vertical-align: middle;
        font-weight: 800;
    }

    .project-table tbody td {
        vertical-align: middle;
    }

    .project-icon {
        width: 40px;
        height: 40px;
        padding: 3px;
        object-fit: contain;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        background-color: #ffffff;
    }

    .project-table code {
        display: inline-block;
        max-width: 200px;
        padding: 4px 7px;
        overflow: hidden;
        color: #6f42c1;
        background-color: rgba(111, 66, 193, 0.08);
        border-radius: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .empty-project-message {
        text-align: center;
    }

    .empty-project-message > i {
        color: #b5b5b5;
        font-size: 48px;
    }

    @media (min-width: 768px) {
        .project-create-button {
            display: none;
        }
    }
</style>
@endpush