@extends("admin.layouts.app")
@section("styles")
    <link
        href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css"
        rel="stylesheet" type="text/css"/>
    <link
        href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
        rel="stylesheet"
        type="text/css"/>
    <style>
        .image-checkbox-container input[type="checkbox"]{
            display: none;
        }

        .image-checkbox-container img{
            border: 0;
            margin: 4px;
        }
        .done{
            border:4px solid red;
        }
    </style>
@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    {{Form::open(['route'=>["admin.images"],'role'=>"form",'method'=>"get"])}}

                    <div class="caption font-green">
                        <i class="icon-image font-green"></i>
                        <span class="caption-subject bold uppercase">Images</span>
                        {{Form::open(['route'=>["admin.images"],'role'=>"form",'method'=>"get"])}}
                        <input type="number" name="limit" id="limit" class="form-control" value="{{request()->get("limit")??15}}">
                        <button type="submit"  id="limit-btn" class="form-control">Submit</button>

                    </div>
                    {!! Form::close() !!}

                </div>
                {{Form::open(['route'=>["admin.images.update"],'role'=>"form",'method'=>"post", 'files' =>true])}}
                <div class="tab-content">
                    <div id="general" class="tab-pane fade in active">
                        <div class="portlet-body form">
                            @foreach($images as $image)
                                @php
                                    $name = basename($image);
                                    $ext = pathinfo($image, PATHINFO_EXTENSION);
                                    $file_name =pathinfo($image, PATHINFO_FILENAME);
                                    $current_file = Storage::disk("do_spaces")->exists("trans/images/$file_name.png");
                                @endphp
                              <span class="image-checkbox-container" >
                                    <input type="checkbox" @if($current_file) class="noSelect" @endif name="images[]" value="{{$image}}" />
                                    <img class="image" src="https://cdn.ihouse.ps/{{$image}}" width="100px" @if($current_file) style="border:3px solid red" @endif />
                                </span>
                            @endforeach

                        </div>
                    </div>
                    {!! $images->appends(["limit"=>request()->get("limit")??15])->links() !!}

                    <input type="hidden" name="page" value="{{request()->get("page")}}">
                    <input type="hidden" name="limit" value="{{request()->get("limit")}}">
                    <div class="form-actions noborder">


                    <button type="submit" name="action"  value="remove" class="btn blue">Remove Background from selected</button>
                    <button type="submit" name="action"  value="keep" class="btn red">Don't Remove Background from selected</button>
                        <br>
                        <button  class="form-control" id="select-all">Select All</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection
@section("scripts")
<script>


    $("#select-all").click(function(e){
        e.preventDefault();
        checkboxes = document.getElementsByName('images[]');
        for(var checkbox in checkboxes){
            if(! $( 'input[type="checkbox"]' ).prop('checked')){
                $( 'input[type="checkbox"]' ).prop('checked', true).attr('checked','checked');
                $(".image").css("border","4px solid #38A");
                $(".image").css("margin","0px");
            }else{
                $( 'input[type="checkbox"]' ).prop('checked', false).removeAttr('checked');
                $(".image").css("border","0");
                $(".image").css("margin","4px");
            }
        }
    });

    $('.image-checkbox-container img').on('click', function(){
        if(!$(this).prev('input[type="checkbox"]').prop('checked')){
            $(this).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked');
            this.style.border = '4px solid #38A';
            this.style.margin = '0px';
        }else{
            $(this).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
            this.style.border = '0';
            this.style.margin = '4px';
        }
    });

    var input = document.getElementById("limit");

    input.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            document.getElementById("limit-btn").click();
        }
    });
</script>
@endsection