@extends('site.layouts.app')

@section('title','File Cloud | Dashboard')
    
{{-- SEO Start --}}
@section('meta_description', 'This is the description for SEO')
@section('meta_keywords', 'SEO, Keywords, Web Development')
@section('meta_author', 'John Doe')
{{-- SEO End --}}


@section('content')
<div class="dashboard">
  <div class="container">
      <div class="dashboard-inner py-50">
          <div class="accordion accordion-flush" id="accordionFlushExample">
              @foreach ($folders as $folder)
              @if ($folders === 0)
              <p class="text-center text-danger">No folders or media created.</p>
              @endif
                  <div class="accordion-item">
                      <h2 class="accordion-header" id="flush-heading{{ $folder->id }}">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{ $folder->id }}" aria-expanded="false" aria-controls="flush-collapse{{ $folder->id }}">
                              <i class="fa fa-folder" style="color:#f8d876;padding-right: 7px;font-size: 21px;"></i> {{ $folder->name }}
                          </button>
                      </h2>
                      <div id="flush-collapse{{ $folder->id }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ $folder->id }}" >
                        {{-- data-bs-parent="#accordionFlushExample" --}}
                          <div class="accordion-body">
                              @if ($folder->children->isNotEmpty())
                                  @include('site.web.folder_content', ['subfolders' => $folder->children])
                              @elseif($folder->children->isEmpty())
                                    <p class="text-left text-danger">No folders created</p>
                              @endif
                              {{-- Media links start  --}}
                                  <!-- Media links -->
                                    @foreach ($folder->media as $file)
                                    
                                        <div class="menu-inner2 col-lg-12">
                                            @if ($file->type === 'file')

                                                @if ($file->status == 1 && $Authenticated_user->subscription == 0)

                                                <a href="javascript:void(0)" data-toggle="modal" data-target="#exampleModalToggle{{$file->id}}">
                                                    <img class="img-fluid" src="{{ asset('site/assets/images/Video.png') }}">
                                                    {{ $file->title }} &nbsp;&nbsp; <i style="color:red" class="fa-solid fa-lock"></i>
                                                    {{-- need to add later if requried --}}
                                                    {{-- <img class="img-fluid" src="./assets/images/folderlock.png"> --}}
                                                </a>
                                                
                                                @elseif($file->status == 1 && $Authenticated_user->subscription == 1 || $file->status == 0 )

                                                <a href="{{ route('site.view.media', encrypt($file->id)) }}" target="_blank">
                                                    <img class="img-fluid" src="{{ asset('site/assets/images/Video.png') }}">
                                                    {{ $file->title }}
                                                </a>


                                                @endif

                                            @elseif ($file->type === 'link')


                                                @if ($file->status == 1 && $Authenticated_user->subscription == 0)

                                                <a href="javascript:void(0)" data-toggle="modal" data-target="#exampleModalToggle{{$file->id}}">
                                                    <img class="img-fluid" src="{{ asset('site/assets/images/Link.png') }}">
                                                    {{ $file->title }} &nbsp;&nbsp; <i style="color:red" class="fa-solid fa-lock"></i>
                                                </a>
                                                
                                                @elseif($file->status == 1 && $Authenticated_user->subscription == 1 || $file->status == 0 )

                                                <a href="{{ route('site.view.media', encrypt($file->id)) }}" target="_blank">
                                                    <img class="img-fluid" src="{{ asset('site/assets/images/Link.png') }}">
                                                    {{ $file->title }}
                                                </a>

                                                @endif

                                            @elseif ($file->type === 'youtube')


                                                @if ($file->status == 1 && $Authenticated_user->subscription == 0)

                                                <a href="javascript:void(0)" data-toggle="modal" data-target="#exampleModalToggle{{$file->id}}">
                                                    <img class="img-fluid" src="{{ asset('site/assets/images/page6 4.png') }}">
                                                    {{ $file->title }} &nbsp;&nbsp; <i style="color:red" class="fa-solid fa-lock"></i>
                                                </a>
                                                
                                                @elseif($file->status == 1 && $Authenticated_user->subscription == 1 || $file->status == 0 )

                                                    <a href="{{ route('site.view.media', encrypt($file->id)) }}" target="_blank">
                                                        <img class="img-fluid" src="{{ asset('site/assets/images/page6 4.png') }}">
                                                        {{ $file->title }}
                                                    </a>

                                                @endif

                                            @endif
                                        </div>
                                    @endforeach
                              {{-- Media links end  --}}
                          </div>
                      </div>
                  </div>
              @endforeach
          </div>
      </div>
  </div>
</div>

<!-- Media links section -->
{{-- <div class="row">
  @foreach ($media as $file)
      <div class="menu-inner2 col-lg-3 ps-5 mb-3">
          <a href="{{ route('site.view.media', encrypt($file->id)) }}">
              <img class="img-fluid" src="{{ asset('path_to_your_image') }}">
              {{ $file->title }}
          </a>
      </div>
  @endforeach
</div> --}}

</div>

{{-- Pricing model start  --}}
  {{--Model Pricing start   --}} 
  @foreach ($folders as $folder)
  @foreach ($folder->media as $file)
  <div class="modal fade" id="exampleModalToggle{{$file->id}}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body py-0">
          <div class="container">
            <div class="d-flex justify-content-center">
              <div class="offers-inner3 col-lg-5 bg-white text-dark">
                <h5 class="page-9-heading">Pricing Plans</h5>
                <p class="offer3">
                  Life Time <br> <strong>Free Subscription</strong>
                </p>
                <p class="offer4"><span class="price"><span class="pricesign5">$</span>{{ $subscription_plans_data->value}}</span><span class="pricesign3">/</span>Life</p>
                <p class="offer-content"> Dive into a world of AWS articles<br> top-notch YouTube resources, and quality video content<br> enjoy lifetime access to premium daily content</p>
                <div class="offers-menu3">
                  <h4>Features:</h4>
                  <ul class="px-0">
                    <li class="features"><i class="fa fa-circle mb-3" style="color: #ff9b26;font-size: 12px;margin-right: 8px;"></i>All in one</li>
                    <li class="features"><i class="fa fa-circle mb-3" style="color: #ff9b26;font-size: 12px;margin-right: 8px;"></i>Unlimited Files</li>
                    <li class="features"><i class="fa fa-circle mb-3" style="color: #ff9b26;font-size: 12px;margin-right: 8px;"></i>Videos, Files, Links</li>
                    <li class="features"><i class="fa fa-circle mb-3" style="color: #ff9b26;font-size: 12px;margin-right: 8px;"></i>Ad Free Experience</li>
                  </ul>
                  <div class="register-btn text-center">  
                    <a href="{{ route('payment.checkout')}}">Get Started</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
  @endforeach
  {{--Model Test end   --}}

{{-- Pricing model end  --}}


<script>
    $(document).ready(function() {
        // Listen for clicks on elements with data-toggle="modal"
        $('[data-toggle="modal"]').click(function() {
            // Get the target modal ID from the data-target attribute
            var targetModal = $(this).data('target');
            console.log(targetModal);
            // Open the modal using Bootstrap's modal method
            $(targetModal).modal('show');
        });

        // Payment process start 
        window.addEventListener('message', function(e) {
                    $("#paymentFrame").css("height",e.data['newHeight']+'px');
        }, false);
        // Payment process end
    });
</script>
@endsection