@extends('layouts.app')

@php
    $mainClass = 'lg:w-[80%] w-full flex flex-col bg-[#f7f7f7]'
@endphp

@section('title', 'آپلود فایل رایگان دائمی با لینک مستقیم | نیکس فایل')

@section('aside-content')

    <aside class=" w-full lg:w-[20%] flex flex-col mb-4">
        <div class="bg-primary-color text-white text-left py-8 flex items-center jutsify-center">
            @include('components.header')
        </div>
        <div class="hidden lg:block">
            @include('components.fake-upload-box')
        </div>
        <div class="w-[90%] hidden mx-auto lg:flex gap-2 flex-wrap max-w-full mt-4 lg:mt-[100px]">
            @foreach($backlinks as $backlink)
                <a
                    target="_blank"
                    class="bg-gray-100 px-4 py-1 rounded-md hover:bg-primary-color hover:text-white transition-all duration-300 grow text-sm text-center"
                    href="{{$backlink->link}}">{{$backlink->text}}</a>
            @endforeach
        </div>
    </aside>
@endsection

@section('content')
    <div class="container w-[90%] mx-auto my-8 flex flex-col">
        <div class="container mx-auto w-full grid grid-cols-1 lg:grid-cols-2 gap-6 my-4">
            @if($banners->isNotEmpty())
                @foreach($banners as $banner)
                    <a class="w-full" href="{{ $banner->banner_redirect_link }}" target="_blank">
                        <img
                            class="max-h-[180px] w-full object-contain rounded-lg"
                            src="{{ asset('storage/' . $banner->banner_image_file) }}" alt="Banner Image">
                    </a>
                @endforeach
            @else
                <div class="bg-gray-200 w-full h-[150px] rounded-lg flex justify-center items-center">
                    <p class="text-gray-800">محل تبلیغات شما</p>
                </div>
                <div class="bg-gray-200 w-full h-[150px] rounded-lg flex justify-center items-center">
                    <p class="text-gray-800">محل تبلیغات شما</p>
                </div>
            @endif
        </div>
        <div
            class="bg-white shadow-md rounded-lg p-4 text-center grow min-h-[400px] flex flex-col justify-center items-center">
            @if($file && $file->path && Storage::exists('public/' . $file->path))
                <div class="mb-4 text-xs max-w-[400px]">
                    <div class="flex justify-center my-3 gap-8 lg:gap-4 flex-wrap">
                        <div class="flex gap-2 items-center">
                            <div
                                class="max-w-[160px] inline-flex items-center overflow-hidden text-ellipsis whitespace-nowrap">
                                <p>نام فایل:</p>
                                <p class="py-1 px-1 rounded-lg">{{ $file->original_file_name }}</p>
                            </div>
                            <p>سایز فایل:
                                <span
                                    class="py-1 px-1 rounded-lg">{{ number_format($file->file_size / 1048576, 2) }} MB
                                </span>
                            </p>
                        </div>
                        <div class="flex gap-2 items-center">
                            <p>فرمت فایل:
                                <span class="py-1 px-1 rounded-lg">{{ strtoupper($file->file_extension) }}</span>
                            </p>
                            <p>تاریخ آپلود:
                                <span
                                    class="py-1 px-1 rounded-lg">{{ jdate($file->created_at)->format('j F Y ساعت H:i') }}</span>
                            </p>
                        </div>
                    </div>

                    @if($fileType === 'image')
                        <!-- Image Preview -->
                        <img src="{{ asset('storage/' . $file->path) }}" alt="Image Preview"
                             class="max-h-[400px] max-w-full mx-2 block lg:mx-auto rounded-lg shadow object-cover object-center">
                    @elseif($fileType === 'video')
                        <!-- Video Preview -->
                        <video controls class="w-full mx-auto rounded-lg shadow max-h-[500px]">
                            <source src="{{ asset('storage/' . $file->path) }}"
                                    type="video/{{ $file->file_extension }}">
                            مرورگر شما قادر به پردازش این فرمت ویدیو نیست.
                        </video>
                    @else
                        <!-- No Preview Available -->
                        <div class="flex flex-col items-center justify-center">
                            <img src="{{ asset('images/logo-menu.webp') }}" alt="">
                        </div>
                        <p class="text-gray-600 text-lg mt-4 border border-primary-color py-2 px-6 rounded-lg mx-auto">
                            فرمت {{$file->file_extension}} پیش نمایش ندارد.
                        </p>
                    @endif
                </div>

                <div class="mt-1 flex gap-4 justify-center items-center mb-4 text-xs flex-wrap">
                    <a href="{{ route('file.download', $file->shortened_link) }}"
                       class="hover:underline bg-primary-color border border-primary-color text-white inline-flex items-center
                             justify-center rounded-md p-2 gap-2 !no-underline text-sm hover:bg-primary-color hover:text-white transition-all duration-300">
                        دانلود فایل
                        <i class="fa-solid fa-download"></i>
                    </a>
                    <p onclick="copyToClipboardShare('{{ route('file.preview', $file->shortened_link) }}')"
                       class="cursor-pointer text-red-600 hover:underline border border-primary-color inline-flex items-center
                             justify-center rounded-md p-2 gap-2 !no-underline text-sm hover:bg-primary-color hover:text-white transition-all duration-300">
                        اشتراک
                        <i class="fa-solid fa-copy"></i>
                    </p>

                    @if($fileType === 'image')
                        <!-- Image Preview -->
                        <a
                            target="_blank"
                            class="hover:underline bg-secondary-color border border-secondary-color text-white inline-flex items-center
                             justify-center rounded-md p-2 gap-2 !no-underline text-sm hover:bg-secondary-color hover:text-white transition-all duration-300"
                            href="{{ asset('storage/' . $file->path) }}">
                            بزرگنمایی تصویر
                        </a>
                    @elseif($fileType === 'video')
                        <!-- Video Preview -->
                        <a
                            class="hover:underline bg-secondary-color border border-secondary-color text-white inline-flex items-center
                             justify-center rounded-md p-2 gap-2 !no-underline text-sm hover:bg-secondary-color hover:text-white transition-all duration-300"
                            href="{{ asset('storage/' . $file->path) }}">
                            بزرگنمایی ویدیو
                        </a>
                    @else
                    @endif
                </div>
            @else
                <!-- Display message if no file is available -->
                <img class="mx-auto mb-4" src="{{asset('images/logo-menu.webp')}}" alt="">
                <p class="text-lg mt-4 border border-primary-color py-2 px-6 !font-thin rounded-lg w-max mx-auto text-white bg-primary-color">
                    <span>
                        پیام سیستم :
                    </span>
                    <span class="">
                        @if($file && $file->path === "deleted")
                            فایل مورد نظر حذف شده است.
                        @else
                            فایلی برای نمایش وجود ندارد.
                        @endif
                </span>
                </p>
            @endif
            <div class="w-[90%] mx-auto flex lg:hidden gap-2 flex-wrap max-w-full mt-4 lg:mt-[100px]">
                @foreach($backlinks as $backlink)
                    <a
                        target="_blank"
                        class="bg-gray-100 px-4 py-1 rounded-md hover:bg-primary-color hover:text-white transition-all duration-300 grow text-sm text-center"
                        href="{{$backlink->link}}">{{$backlink->text}}</a>
                @endforeach
            </div>
        </div>
        <div class="items-center mt-4">
            <div
                class="mx-auto bg-white/70 rounded-3xl shadow-custom backdrop-blur-20 p-4 lg:p-8 backdrop-blur-xl">
                <div class="grid grid-cols-2 lg:grid-cols-6 gap-4 lg:gap-8">
                    @if($ads->isNotEmpty())
                        @foreach($ads as $ad)
                            <a
                                target="_blank" href="{{ $ad->redirect_link }}"
                                aria-label="advertising picture"
                                class="rounded-xl min-h-[150px]">
                                <img src="{{ asset('storage/' . $ad->picture_file) }}" alt=""
                                     class="rounded-3xl w-full h-auto object-cover aspect-square sm:w-[150px] md:w-[200px] lg:w-[262px]"
                                     width="262"
                                     height="262"
                                >
                            </a>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>

    <script>
        function copyToClipboardShare(link) {
            const tempInput = document.createElement('input');
            document.body.appendChild(tempInput);
            tempInput.value = link;
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);
            alertify.success('لینک اشتراک گذاری با موفقیت کپی شد !');
        }
    </script>
@endsection