@extends('layouts.master')
@section('page')
    <title>Downloads | {{setting('site.title')}}</title>
@endsection
@section('content')
    <div class="cm-page-header overlay-dark bg-cover" style="background-image: url({{asset('assets/images/tech-support/download.jpg')}});">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="block text-white text-center"></div>
                </div>
            </div>
        </div>
    </div>
    <section class="section page-content pt-80 pb-80">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8" style="margin-top: 30px">
                    <div class="row">
                        @foreach ($download_categories as $category)
                            <div class="col-md-6 mt-4 mt-md-0">
                                <h5 class="text-dark font-w-600">For {{$category->title}}</h5>
                                @foreach ($category->downloads as $item)
                                    <div class="barWrapper mt-5">
                                        <a href="#{{$item->id}}" class="dropdown-btn question" >
                                            {{$item->name}}
                                        </a>
                                        <div class="dropdown-container answer" >
                                            <div class="pricing-item shadow text-center mt-30">
                                                @php $download_file = json_decode($item->file,true); @endphp 
                                                <div class="pricing-footer">
                                                    <a href="javascript:void(0);"  data-download_id="{{$item->id}}" data-dlink={{$download_file[0]['download_link']}} class="btn btn-primary1 get-download-details">Download</a>
                                                </div>
                                                <ul class="list-unstyled">
                                                    <li> <span style="float: left">Download</span> - <span class="badge">{{$item->download}}</span>  </li>
                                                    <li><span style="float: left">File Size</span> - <span class="badge">{{$item->file_size}}</span></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-4 mt-4 mt-lg-0">
                    <div class="widget widget-categoty">
                        <div class="widget-heading">Product Categories </div>
                        <ul class="category-list list-unstyled p-4">
                            @foreach ($categories as $category)
                                <li>
                                    <span class="fas fa-caret-right mr-2"></span>
                                    <a href="{{ route('product-category', ['slug' => $category->slug]) }}" class="text-reset">
                                        {{$category->title}}
                                        <small class="text-muted">({{ $category->products()->count() }})</small>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection()
@push('styles')
    <style>
        h5{text-decoration: underline;}
        .widget{margin-top:0px;}
        .badge{border-radius:2px;line-height:22px;padding:0 10px;font-size:11px;font-weight:500;background:#2CA8FF;color:#ffffff;float:right;}
        .text{color:#117abc;font-weight: 600;display:inline-block;margin-bottom:5px;}
        .text:hover{color:#f5421c;}
        .question:hover, .question:focus{color:#d33733;text-decoration:none;}
        .question{color:#117abc;}
        .answer{display:none;}
    </style>
@endpush()
@push('scripts')
    <script>
        var dropdown = document.getElementsByClassName("dropdown-btn");
        var i;
        for (i = 0; i < dropdown.length; i++) {
            dropdown[i].addEventListener("click", function() {
            this.classList.toggle("active");
            event.stopPropagation();
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } 
            else {
                dropdownContent.style.display = "block";
            }
            });
        } 
    </script>
    <script>
        $(document).ready(function(){
            $(".get-download-details").click(function(){
                var item_id = $(this).data('download_id');
                let dlink = $(this).data('dlink');
                $.ajax({
                    url: "{{route('download-file')}}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "item_id": item_id,
                    },
                    success: function(response){
                        var path = dlink.replace('\'', "/");
                        var base_url = {!! json_encode(url('/')) !!};
                        let link=base_url+'/storage/'+path;
                        window.location.href =link;
                    }
                });
            });
        });
    </script>
@endpush()