@extends("admin.template")

@section("content")
    <div class="row">
        <div class="col-md-6">
            <h1 class="page-title">Banners</h1>

        </div>
        <div class="col-md-6">
            @if(count($banners) < 3)
                <a class="btn btn-success pull-right" href="{{url("admin/frontend/banner/create")}}"><i class="fa fa-plus"></i> Create New Banner</a>
            @endif
        </div>
    </div>

    <div class="portlet light bordered">
        <div class="portlet-body">
            <div>
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>Position</th>
                        <th>Title</th>
                        <th>Content</th>
                        <th>Button Text</th>
                        <th>Button Link</th>
                        <th>Image</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($banners as $indexKey => $banner)
                        <tr>
                            <td><input type="text" class="form-control txt-num-short" value="{{$banner->position}}"></td>
                            <td><a href="{{url("admin/frontend/banner/save/".$banner->frontend_banner_id)}}">{{ $banner->title }}</a></td>
                            <td>{{ $banner->content }}</td>
                            <td>{{ $banner->button_text }}</td>
                            <td>{{ $banner->link }}</td>
                            <td><img src="{{ asset('assets/images/frontend/banners/'.$banner->image) }}" style="max-height: 200px; max-width: 300px;">
                            <td>
                <span class="action" data-banner="{{$banner->frontend_banner_id}}">
                    @if($indexKey != 0 && count($banners) != 1)
                        <button class="btn btn-danger" data-toggle="modal" data-target="#deleteConfirmation" onclick="setHref({{$banner->frontend_banner_id}})"><i class="fa fa-trash"></i></button>
                    @endif
                </span>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

                <div class="row">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-success">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="deleteConfirmation" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" >Confirmation Alert</h5>

                </div>
                <div class="modal-body">
                    Do you want to delete this item?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <a class="btn btn-danger" href="">Yes</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var url = "{{url('admin/frontend/banner/')}}";
        $(document).ready(function() {
            $("tbody").sortable({
                stop: function(event, ui) {
                    var i = 1;
                    var tmp;
                    $('tbody > tr').each(function() {
                        $(this).find("input[type='text']").val(i);

                        var actionContainer = $(this).find("td span.action");
                        if(i == 1 && actionContainer.find('button').length == 1){
                            tmp = actionContainer.html();
                            actionContainer.html("")
                        }else if(actionContainer.find('button').length == 0){
                            actionContainer.html(tmp);
                            $(this).find("button").attr("onclick","setHref("+$(this).find('td span.action').attr("data-banner")+")");
                            tmp = null;
                        }
                        i++;
                    });
                }
            });
        });

        setHref = function (id) {
            $('#deleteConfirmation .modal-footer a').attr("href",url+"/delete/"+id)
        }
    </script>
@endsection