@extends('front.include.app')
@section('content')
<style>
     #disable {
        border: none;
        background: none;
        padding: 0px;
        padding-top: 0px;
        border-radius: 0px 8px 8px 0px;
    }

    .input-group>.form-control:not(:last-child),
    .input-group>.custom-select:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-radius: 8px 0px 0px 8px;
        height: 38px;
    }

    @media only screen and (max-width: 600px) {

        .blueinput,
        .blueinput:focus {
            border-radius: 8px;
            background-color: #263F6B;
            color: white;
            width: 70%;
            margin-top: 0px;
            margin-right: auto;
            margin-bottom: auto;
            margin-left: auto;
        }
    }
</style>
    <section class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12" align="center">
            <h3 class="blue paddin-20 mb-3">Download Unqiue Arts here</h3>
            <form method="GET">
                <div class="row search feild">
                
                    <div class="col-12">
                        <input type="text" name="search" value="{{isset($search)?$search:''}}" placeholder="Search" class="form-control blueinput" required>
                    </div>
                    <div class="col-6 mmt-4 mm-b-3">
                        <button type="submit" class="btn btn-success">Search</button>
                    </div>
                    <div class="col-6 mmt-4 mm-b-3">
                        <a href="{{route('common-arts')}}"><button type="button" class="btn btn-info">Reset</button></a>
                    </div>
                    
                </div>
            </form>
            <!-- <p>Note : <span class="red">Red</span> - Art is not ready <br> <span class="green">Green</span> - Art is Ready</p> -->
            </div>
        </div>
        <div class="row">

            @if (count($data) > 0)
                @foreach ($data as $item)
                    <div class="col-12" align="center">
                        <div id="inputFormRow">
                            <div class="input-group ">
                                <label for="" class="form-control blueinput">{{ $item->name }}</label>
                                <div class="input-group-append">
                                    @if ($item->upload !== '' && !empty($item->upload))
                                        <a href="{{ (strpos($item->upload, '://') !== false)?$item->upload:asset('CommonArt/' . $item->upload) }}" target="_blank" id="downlaod"
                                            download="AG_ART-{{ $item->name }}">
                                            <img src="{{ asset('assets/images/green.png') }}" width="35px">
                                        </a>
                                    @else
                                         <a href="#" id="disable">
                                            <img src="{{ asset('assets/images/5.png') }}" width="35px">
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif

            
        </div>
        <div class="row" align="center" style="margin-top: 50px;justify-content: center;">
            {!! $data->appends(Request::all())->links() !!}
        </div>

    </section>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <!-- JQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

    <script>
        function forceDownload(_this){
            const link = document.createElement("a");
            link.href = $(_this).attr('link');
            link.download = $(_this).attr('download');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
@endsection
