@extends('Frontend.Master.authMaster')

@section('content')
    <div class="container">
        <div class="row">
            {{-- Search Bar --}}
            <div class="col-md-12">
                <form action="{{ route('front.details') }}" method="GET">
                    <div class="search_bar">
                        <div class="txt_area">
                            <input type="text" name="query" class="form-control"
                                value="{{ $getData['searched_data'] ?? '' }}" placeholder="Search here">
                        </div>
                        <div class="icons">
                            <button type="submit" style="border: none; background: transparent;">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            {{-- Select + Download --}}
            @if($getData['first'] == 'no' && count($getData['mediaItems']) > 0)
                <div class="col-md-12 mt-3">
                    <form method="POST" action="{{ route('front.download.zip') }}">
                        @csrf
                        <div class="select-div d-flex justify-content-between align-items-center mb-2">
                            <div class="select-check">
                                <div class="form-group">
                                    <input type="checkbox" id="selectAll">
                                    <label for="selectAll">Select All</label>
                                </div>
                            </div>
                            <div class="download-all-btn">
                                <button type="submit" class="btn btn-sm btn-primary">Download Selected</button>
                            </div>
                        </div>

                        {{-- ✅ Wrap items inside a container for JS targeting --}}
                        <div id="media-items-container">
            @endif

                        {{-- Results List --}}
                        <div class="col-md-12">
                            <div class="document_management_details_list">
                                @isset($getData)
                                    @forelse($getData['mediaItems'] as $item)
                                        <div class="details_card">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="thumnail-img">
                                                        <img src="{{ asset('storage/' . $item->thumb_image) }}"
                                                            class="card-img-absolute" alt="data-thumbnail" />
                                                        <div class="img-check">
                                                            <div class="form-group">
                                                                @if($getData['first'] == 'no')
                                                                    <input type="checkbox" name="selected_files[]"
                                                                        value="{{ $item->id }}" class="select-item">
                                                                    <label></label>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-8">
                                                    <div class="data-right">
                                                        <div class="ttl">
                                                            <h6>{{ $item->title }}</h6>
                                                        </div>

                                                        @php
                                                            $tagsArray = is_array($item->tags) ? $item->tags : json_decode($item->tags, true);
                                                        @endphp
                                                        @foreach($tagsArray ?? [] as $tag)
                                                            <span class="tag">
                                                                <span class="tag-icon"><i class="fa-solid fa-tag"></i></span>
                                                                {{ is_array($tag) ? implode(', ', $tag) : $tag }}
                                                            </span>
                                                        @endforeach

                                                        <p>{{ Str::limit($item->description, 300, '...') }}</p>
                                                        <p>{{ $item->purpose }}</p>

                                                        <div class="uplod_vw_dv-div">
                                                            <div class="uplod_vw_dv">
                                                                <span class="upld">
                                                                    <span style="color:#ff6692;"><i
                                                                            class="fas fa-upload"></i></span>
                                                                    <span style="color:#a9a9a9;"> Uploaded at <span class="upld_dt"
                                                                            style="color:#000;">
                                                                            {{ \Carbon\Carbon::parse($item->created_at)->format('d.m.Y') }}
                                                                        </span></span>
                                                                </span>
                                                                <span class="view">
                                                                    <span style="color:#635bff;">
                                                                        <i class="fas fa-download"></i>
                                                                    </span>
                                                                    <span style="color:#a9a9a9;"> Downloads <span class="view_amunt"
                                                                            style="color:#000;">
                                                                            {{ $item->download_count }}
                                                                        </span></span>
                                                                </span>
                                                                <span class="view">
                                                                    <span style="color:#28d2cd;">
                                                                        <i class="fas fa-eye"></i>
                                                                    </span>
                                                                    <span style="color:#a9a9a9;"> Views <span class="view_amunt"
                                                                            style="color:#000;">
                                                                            {{ $item->view_count }}
                                                                        </span></span>
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <div class="uplod-btn">
                                                            <a href="{{ route('searched.file.details', $item->id) }}">Details</a>

                                                        <a href="{{ route('user.searchdownload', $item->id) }}" class="btn btn-sm btn-success">                                                                
                                                                <i class="fas fa-download"></i> Download
                                                            </a>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        @if($getData['first'] == 'no')
                                            <div class="details_card">
                                                <p>No matching documents found.</p>
                                            </div>
                                        @endif
                                    @endforelse

                                    @if($getData['first'] == 'yes')
                                        <div class="details_card">
                                            <p>Start your search to see results.</p>
                                        </div>
                                    @endif
                                @endisset
                            </div>
                        </div>

                        @if($getData['first'] == 'no' && count($getData['mediaItems']) > 0)
                                </div>
                            </form>
                        @endif
            </div>
        </div>

        {{-- ✅ Checkbox Logic --}}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const selectAll = document.getElementById('selectAll');
                const container = document.getElementById('media-items-container');

                if (selectAll && container) {
                    // Select All Toggle
                    selectAll.addEventListener('change', function () {
                        const allChecks = container.querySelectorAll('.select-item');
                        allChecks.forEach(cb => cb.checked = this.checked);
                    });

                    // Individual Checkbox Toggle
                    container.addEventListener('change', function (e) {
                        if (e.target.classList.contains('select-item')) {
                            const allChecks = container.querySelectorAll('.select-item');
                            const checked = container.querySelectorAll('.select-item:checked');


                            selectAll.checked = allChecks.length === checked.length;
                        }
                    });
                }
            });
        </script>
@endsection