@extends('front.layout.app')
@section('content')

<style>
.crd img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.crd {
    height: 230px;
}

.con2.con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.card-header h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
}

.tab-content>.tab-pane {
    color: #fff;
}

.btn-xl {
    padding: 1rem 2rem
}

.icon-mid:before {
    vertical-align: middle
}

input.form-control {
    padding: 12px !important;
    font-size: 17px !important;
}

.form-group {
    margin-bottom: 1.7rem;
}

.pos-divv {
    position: relative;
}

.pos-divv input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

a.burger-btn.d-block.d-xl-none {
    z-index: 99;
    position: relative;
    width: 70%;
}

i.bi.bi-x.bi-middle {
    background: #fff;
    padding: 15px 14px;
    position: relative;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-wrapper .sidebar-header img {
    height: 3.2rem;
}

@media only screen and (min-width: 300) and (max-width: 1444px) {
    .sidebar-wrapper .sidebar-header img {
        height: 2.2rem !important;
    }
}

.btn1 {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #fff;
    background-color: #fdaf17;
    padding: 15px 25px;
    font-weight: 600;
    outline: none;
    border: 0;
    margin-top: -3px !important;
    border-radius: 5px;
}

label {
    display: inline-block;
    font-weight: 500;
}
.nav-pills .nav-link {
    background: none;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #fff;
    background-color: #fdaf17;
    padding: 15px 25px;
    font-weight: 600;
    outline: none;
    border: 0;
    margin: 0 0 35px 0 !important;
    border-radius: 5px;
}
.service-wrap {
    margin-top: 150px;
}
.pay_section {
    height: unset !important;
    display: grid;
    place-items: center;
    padding: 200px 0;
}
.hat::before {
    position: absolute;
    content: '';
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-image: url(../images/msk.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

button.showReport{
    background: transparent;
    border: none;
    color: black;
    font-weight: 600;
    font-size: 20px;
    padding: 0;
    color: white;
}

button.showReport::after {
    content: none;
}

a.crd.hat img {
    width: 300px;
    border-radius: 20px;
    height: 200px;
}

</style>


<main>

    <section class='pay_section'>

        <div class="container">
            <div class="service-wrap">
                <div class="">
                    <div class="row">
                        <div class="col-lg-3 col-12 ">
                            <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                                aria-orientation="vertical">
                                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home"
                                    aria-selected="true">Your Videos</button>
                                <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-profile" type="button" role="tab"
                                    aria-controls="v-pills-profile" aria-selected="false">Purchase Gallery</button>
                                    
                                     <button class="nav-link" id="v-pills-profile-tab123" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-profile123" type="button" role="tab"
                                    aria-controls="v-pills-profile" aria-selected="false">Purchase Bundles</button>
                            </div>
                        </div>
                        <div class="col-lg-9 col-12">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                                    aria-labelledby="v-pills-home-tab">

                                    <div class="">
                                        <div class="card-header">
                                            <h4>Your Videos</h4>
                                        </div>
                                        
                                        <div class="card-body">
                                            @if($videos)
                                            <div class="row gy-3">
                                                @foreach($videos as $video)
                                                
                                                    <div class="col-12  col-md-6 col-lg-4">
                                                        <div class="crd">
                                                            <img src="{{ asset('assets/admin/uploads/video/'.$video->thumbnail) }}"
                                                                class="img-fluid" alt="">
    
                                                            <div class="con2 con">
                                                                <a class="d-block" data-fancybox="" data-type="video"
                                                                    href="{{ asset('assets/admin/videos/'.$video->video) }}">
                                                                    <div href="" class="playBtn"></div>
                                                                </a>
                                                            </div>
                                                            
                                                            <div class="dropdown" style="position:absolute; top:1%; right:3%;">
                                                              <button class="btn dropdown-toggle showReport" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                                . . .
                                                              </button>
                                                              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                                <li><a type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Report</a></li>
                                                              </ul>
                                                            </div>
                                                            <!-- Modal -->
                                                            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                                              <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                  <div class="modal-header">
                                                                    <h5 class="modal-title text-dark" id="staticBackdropLabel">Report Video</h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                  </div>
                                                                  <div class="modal-body text-dark">
                                                                    <form id="reportForm" action="{{ route('report') }}" method="post" enctype="multipart/form-data">
                                                                        @csrf
                                                                        <input type="hidden" name="customer_id" value="{{ Auth::guard('customer')->user()->id }}" />
                                                                        <input type="hidden" name="video_id" value="{{ $video->id }}" />
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="copyrightViolation" name="report[]" value="Copyright Violation">
                                                                            <label for="copyrightViolation">Copyright Violation</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="unauthorizedRecording" name="report[]" value="Unauthorized Recording">
                                                                            <label for="unauthorizedRecording">Unauthorized Recording</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="personalInformation" name="report[]" value="Personal Information Exposure">
                                                                            <label for="personalInformation">Personal Information Exposure</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="abusiveLanguage" name="report[]" value="Abusive Language">
                                                                            <label for="abusiveLanguage">Abusive Language</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="hateSpeech" name="report[]" value="Hate Speech">
                                                                            <label for="hateSpeech">Hate Speech</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="violence" name="report[]" value="Violence">
                                                                            <label for="violence">Violence</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="harassment" name="report[]" value="Harassment">
                                                                            <label for="harassment">Harassment</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="scams" name="report[]" value="Scams">
                                                                            <label for="hateSpeech">Scams</label>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <input type="checkbox" id="misinformation" name="report[]" value="Misinformation">
                                                                            <label for="misinformation">Misinformation</label>
                                                                        </div>
                                                    
                                                                        <div class="form-group">
                                                                            <label for="description">Provide additional details or comments about the issue.</label>
                                                                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                                                                        </div>
                                                    
                                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                                        <button type="submit" class="btn btn-primary">Submit Report</button>
                                                                    </form>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                                
                                                <section class="pagi5867">
                                                    <div class="pagination d-flex justify-content-center">
                                                       {{ $videos->links() }}
                                                        
                                                    </div>
                                                </section>
                                            </div>
                                            @endif
                                        </div>
                                        
                                    </div>

                                </div>
                                
                                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
                                    aria-labelledby="v-pills-profile-tab">

                                    <div class="row flex-lg-nowrap">

                                        <div class="">
                                        <div class="card-header">
                                            <h4>Your Photos</h4>
                                        </div>
                                       
                                        <div class="card-body">
                                            @if($photos)
                                                <div class="row gy-3">
                                                    @foreach($photos as $photo)
                                                        <div class="col-12  col-md-6 col-lg-4">
                                                            <div class="crd hat">
                                                                <a class="d-block" data-fancybox="" data-type=""
                                                                        href="{{ asset('assets/admin/uploads/albums/'.$photo->images) }}">
                                                                         <img src="{{ asset('assets/admin/uploads/albums/'.$photo->images) }}"
                                                                    class="img-fluid" alt="">
                                                                    </a>
                                                               
                                                                <div class="con2 con">
                                                                    <a class="d-block" data-fancybox="" data-type="image"
                                                                        href="{{ asset('assets/admin/uploads/albums/'.$photo->images) }}">
                                                                        <div href="" class=""></div>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    <section class="pagi5867">
                                                        <div class="pagination d-flex justify-content-center">
                                                           {{ $photos->links() }}
                                                            
                                                        </div>
                                                    </section>
                                                </div>
                                            @endif
                                        </div>
                                        </div>

                                    </div>
                                </div>
                                
                                
                                
                                
                                <div class="tab-pane fade" id="v-pills-profile123" role="tabpanel"
                                    aria-labelledby="v-pills-profile-tab123">

                                    <div class="row flex-lg-nowrap">

                                        <div class="">
                                        <div class="card-header">
                                            <h4>Your Bundles</h4>
                                        </div>
                                       
                                        <div class="card-body">
                                            @if($bundles)
                                                <div class="row gy-3">
                                                    @foreach($bundles as $bundle)
                                                        <div class="col-12  col-md-6 col-lg-4">
                                                            <a class="crd hat" href="{{ route('user.bundleDetail', $bundle->id) }}">
                                                                <!--<a class="d-block" data-fancybox="" data-type=""-->
                                                                <!--        href="{{ asset('assets/admin/uploads/bundles/'.$bundle->thumbnail) }}">-->
                                                                         <img src="{{ asset('assets/admin/uploads/bundles/'.$bundle->thumbnail) }}"
                                                                    class="img-fluid" alt="">
                                                                    <!--</a>-->
                                                               
                                                                <!--<div class="con2 con">-->
                                                                <!--    <a class="d-block" data-fancybox="" data-type="image"-->
                                                                <!--        href="{{ asset('assets/admin/uploads/bundles/'.$bundle->thumbnail) }}">-->
                                                                <!--        <div href="" class=""></div>-->
                                                                <!--    </a>-->
                                                                <!--</div>-->
                                                            </a>
                                                        </div>
                                                    @endforeach
                                                    <section class="pagi5867">
                                                        <div class="pagination d-flex justify-content-center">
                                                           {{ $bundles->links() }}
                                                            
                                                        </div>
                                                    </section>
                                                </div>
                                            @endif
                                        </div>
                                        </div>

                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

    </section>

</main>


@endsection

<script>
    
$(document).ready(function() {
    var readURL = function(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }
  
            reader.readAsDataURL(input.files[0]);
            console.log('check>>', input.files[1]);
            console.log('check data 2>>', input.files[2]);
      
          }
    } 
    $(".file-upload").on('change', function(){
        readURL(this);
    });
    
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
  });
</script>