@extends('app')
@section('content')
    @include('layout.header')
    @include('components.loader')
    <div class="admin-pdf-container page-container p-0">
        <div class="mx-lg-5 px-lg-3 mx-2 inner-main">
            <div class="admin-group-btn d-md-flex justify-content-between py-3">
                <h5 class=" p-lg-2 px-3 text-blue my-2 px-lg-4 me-2 w-auto fw-bold">
                    Campaign Sales Resources PDF - Download
                </h5>
                <button  class="btn btn-blue p-lg-2 px-3 my-2 px-lg-4 w-auto" id="downloadAllBtn"><i class="fa-solid fa-download"
                    style="color: #ffffff;"></i> Download All</button>
            </div>
            <div class="row">
                @foreach ($files as $file)
                <div class="col-lg-4 col-md-6 col-12 my-2">
                    <div class="card border-0 rounded-2 ">
                        <img loading="auto|eager|lazy" src="{{ Vite::asset('resources/images/' . $file['image']) }}" class="card-img-top rounded-2"
                            alt="Campaign Video Thumbnail">
                    </div>
                    <div class="card border-0 rounded-2  mx-2 p-2 py-3 bg-white bg-opacity-75 pdf-card"  style="margin-top: -80px; height: 318px;">
                             <h6 class="card-title text-blue pdf-title" style="height: 70px; overflow: hidden;">{{ $file['title'] }}
                            </h6>
                            <p class="card-text pdf-font-text pdf-discription" style="height: 180px; overflow: hidden;">{{ $file['discription'] }}</p>
                                <div>
                                    <a href="{{ asset($file['file']) }}" class="btn btn-blue" download target="_self"><i class="fa-solid fa-download"
                                        style="color: #ffffff;"></i> Download</a>
                                </div>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- <div class="d-flex align-items-center justify-content-center">
                <div class="green-card-row rounded-4 bg-white p-3 pt-sm-3 px-sm-5 my-2">

                    <div class="table-responsive table-responsive-coustom">
                        <table width="100%" class="table custom-table" id="participant-detail-app-sold">
                            <thead class="table-heading py-2">
                                <tr class="m-3 text-dark">
                                    <th width="45%" class="p-2 text-dark">Name</th>
                                    <th width="35%" class="p-2 text-dark">File</th>
                                    <th width="35%" class="p-2 text-dark">Action</th>
                                </tr>
                            </thead>
                            <tbody class="table-body-participant">
                                @foreach ($files as $file)
                                <tr style="background-color: #efe8e8;" class="">
                                    <td data-label="Name" class="p-1 pfd-name  text-wrap">
                                        {{ $file['name'] }}
                                    </td>
                                    <td data-label="File" class="p-1 text-wrap">
                                        {!! $file['icon'] !!}
                                    </td>
                                    <td data-label="Action" class="p-1  text-wrap">
                                        <a href="{{ $file['file'] }}" class="btn btn-blue p-lg-1 px-3 my-1 px-lg-4 w-auto" download>
                                            <i class="fa-solid fa-bell me-2"></i> Download
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div> --}}
        </div>

    </div>
    @vite(['resources/js/admin_pdf.js'])
    @include('layout.footer')
@endsection