@extends('layout.master')

@section('title', 'Manual Pengguna')

@push('css')
<style>
    :root {
        --manual-bg-card: rgba(255, 255, 255, 0.9);
    }

    .documentation-header {
        background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--accent-rgb)));
        color: white;
        padding: 40px 20px;
        border-radius: 15px;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }

    .documentation-header::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }

    .search-container {
        max-width: 500px;
        margin: 25px auto 0;
        position: relative;
        z-index: 2;
    }

    .search-input {
        height: 50px;
        border-radius: 25px;
        border: none;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        padding-left: 50px;
        transition: all 0.3s ease;
    }

    .search-input:focus {
        box-shadow: 0 10px 35px rgba(var(--primary-rgb), 0.2);
        transform: translateY(-2px);
    }

    .search-icon {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
    }

    .nav-tabs-custom {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 35px;
        border: none;
    }

    .nav-tabs-custom .nav-link {
        border: 2px solid #e2e8f0;
        border-radius: 50px;
        padding: 10px 25px;
        color: #64748b;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

    .nav-tabs-custom .nav-link:hover {
        border-color: rgb(var(--primary-rgb));
        color: rgb(var(--primary-rgb));
        transform: translateY(-2px);
    }

    .nav-tabs-custom .nav-link.active {
        background: rgb(var(--primary-rgb));
        border-color: rgb(var(--primary-rgb));
        color: white;
        box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.2);
    }

    .manual-card {
        background: var(--manual-bg-card);
        border-radius: 20px;
        border: 1px solid rgba(226, 232, 240, 0.5);
        height: 100%;
        padding: 25px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .manual-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        border-color: rgb(var(--primary-rgb));
    }

    .manual-icon-container {
        width: 70px;
        height: 70px;
        background: #f8fafc;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

    .manual-card:hover .manual-icon-container {
        background: #eff6ff;
        transform: rotate(5deg);
    }

    .manual-icon {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }

    .manual-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .manual-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }

    .badge-pdf { background: #fee2e2; color: #dc2626; }
    .badge-video { background: #fef3c7; color: #d97706; }
    .badge-link { background: #e0f2fe; color: #0284c7; }

    .action-buttons {
        display: flex;
        gap: 10px;
    }

    .btn-manual {
        flex: 1;
        padding: 10px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn-view {
        background: rgb(var(--primary-rgb));
        color: white;
    }

    .btn-view:hover {
        background: rgb(var(--primary-rgb));
        opacity: 0.9;
        color: white;
        transform: scale(1.05);
    }

    .btn-download {
        background: #f1f5f9;
        color: #475569;
    }

    .btn-download:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    .empty-state {
        padding: 60px 20px;
        text-align: center;
        background: #f8fafc;
        border-radius: 20px;
        border: 2px dashed #e2e8f0;
    }

    /* Animations */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .fade-in-up {
        animation: fadeInUp 0.5s ease forwards;
    }
</style>
@endpush


@section('content')
<div class="page-header mb-4">
    <h5 class="page-title">Manual Pengguna</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item active">Manual Pengguna</li>
        </ol>
    </nav>
</div>

<div class="documentation-header text-center">
    <h1 class="display-6 fw-bold mb-2 text-white">Manual Pengguna</h1>
    <p class="opacity-75 mb-0">Senarai Manual Pengguna Sistem e-Geospatial Perhutanan</p>
</div>

<div class="search-container mb-5">
    <i class="bi bi-search search-icon"></i>
    <input type="text" id="manualSearch" class="form-control search-input" placeholder="Cari manual mengikut tajuk...">
</div>

<section class="section">
    <ul class="nav nav-tabs-custom" id="manualTabs" role="tablist">
        @if(in_array(Auth::user()->role_id, [1, 2]))
        <li class="nav-item">
            <button class="nav-link active" id="admin-tab" data-bs-toggle="tab" data-bs-target="#admin" type="button" role="tab">Pentadbir</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="state-admin-tab" data-bs-toggle="tab" data-bs-target="#state-admin" type="button" role="tab">Pentadbir Negeri</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="user-tab" data-bs-toggle="tab" data-bs-target="#user" type="button" role="tab">Pengguna</button>
        </li>
        @elseif(Auth::user()->role_id == 3)
        <li class="nav-item">
            <button class="nav-link active" id="state-admin-tab" data-bs-toggle="tab" data-bs-target="#state-admin" type="button" role="tab">Pentadbir Negeri</button>
        </li>
        @elseif(Auth::user()->role_id == 4)
        <li class="nav-item">
            <button class="nav-link active" id="user-tab" data-bs-toggle="tab" data-bs-target="#user" type="button" role="tab">Pengguna</button>
        </li>
        @endif
    </ul>

    <div class="tab-content" id="manualContent">
        @php
            $allCategories = [
                'admin' => '2',
                'state-admin' => '3',
                'user' => '4'
            ];

            $roleId = Auth::user()->role_id;

            if (in_array($roleId, [1, 2])) {
                $categories = $allCategories;
            } elseif ($roleId == 3) {
                $categories = ['state-admin' => '3'];
            } elseif ($roleId == 4) {
                $categories = ['user' => '4'];
            } else {
                $categories = [];
            }
        @endphp

        @foreach($categories as $id => $name)
        <div class="tab-pane fade @if($loop->first) show active @endif" id="{{ $id }}" role="tabpanel">
            <div class="row g-4" id="list-{{ $id }}">
                @forelse($manuals->where('user_role_id', $name) as $manual)
                    <div class="col-xl-3 col-lg-4 col-md-6 manual-item fade-in-up" data-title="{{ strtolower($manual->title) }}">
                        <div class="manual-card">
                            <div>
                                <span class="manual-badge badge-{{ $manual->type }}">
                                    @if($manual->type == 'pdf') <i class="bi bi-file-earmark-pdf"></i> PDF
                                    @elseif($manual->type == 'video') <i class="bi bi-play-circle"></i> Video
                                    @else <i class="bi bi-link-45deg"></i> Link @endif
                                </span>
                                <div class="manual-icon-container">
                                    @php
                                        $icon = 'assets/img/pdf.png';
                                        if($manual->type == 'video') $icon = 'assets/img/mp4.png';
                                    @endphp
                                    <img src="{{ asset($icon) }}" alt="{{ $manual->title }}" class="manual-icon">
                                </div>
                                <h3 class="manual-title">{{ $manual->title }}</h3>
                            </div>
                            
                            <div class="action-buttons">
                                @php $link = $manual->type == 'pdf' ? asset('storage/' . $manual->file_path) : $manual->url; @endphp
                                <a href="{{ $link }}" target="_blank" class="btn btn-manual btn-view">
                                    <i class="bi bi-eye"></i> Papar
                                </a>
                                @if($manual->type == 'pdf')
                                <a href="{{ $link }}" download="{{ $manual->title }}.pdf" class="btn btn-manual btn-download">
                                    <i class="bi bi-download"></i> Simpan
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="empty-state">
                            <i class="bi bi-folder2-open display-4 text-muted mb-3 d-block"></i>
                            <p class="text-muted mb-0">Tiada manual tersedia dalam kategori ini.</p>
                        </div>
                    </div>
                @endforelse
            </div>
            
            <div id="no-results-{{ $id }}" class="col-12 d-none">
                <div class="empty-state">
                    <i class="bi bi-search display-4 text-muted mb-3 d-block"></i>
                    <p class="text-muted mb-0">Tiada manual ditemui yang sepadan dengan carian anda.</p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>

@endsection

@section('js')
<script>
    $(document).ready(function() {
        $('#manualSearch').on('keyup', function() {
            let value = $(this).val().toLowerCase();
            let activeTabId = $('#manualTabs .nav-link.active').attr('data-bs-target');
            let items = $(activeTabId + ' .manual-item');
            let visibleCount = 0;

            items.each(function() {
                if ($(this).attr('data-title').indexOf(value) > -1) {
                    $(this).removeClass('d-none').addClass('fade-in-up');
                    visibleCount++;
                } else {
                    $(this).addClass('d-none').removeClass('fade-in-up');
                }
            });

            let noResultsId = '#no-results-' + activeTabId.replace('#', '');
            if (visibleCount === 0 && items.length > 0) {
                $(noResultsId).removeClass('d-none');
            } else {
                $(noResultsId).addClass('d-none');
            }
        });

        // Reset search on tab change
        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('#manualSearch').val('').trigger('keyup');
        });
    });
</script>
@endsection