@extends('layouts.app')
@section('title', 'Banners | Website')

@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/jquery-ui/jquery-ui-1.10.4.custom.min.css') }}">
    <link href="{{ asset('/plugins/datepicker/datepicker3.css') }}" rel="stylesheet">
    <style>
        #banner-list .banner-item {
            position: relative;
            width: 60%;
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
        }
        #banner-list .banner-item.disabled {
            opacity: 0.6;
        }
        #banner-list .banner-image img {
            width: 100%;
            margin-top: 35px;
        }
        #banner-list .banner-status-label {
            font-weight: 700;
            color: #DDD;
        }
        #banner-list .banner-status-label.selected {
            color: #418DCB;
        }
        #banner-list .banner-item .banner-actions {
            position: absolute;
            top: 12px;
            right: 5px;
        }
        #banner-list .banner-actions {
            font-size: 14px;
            line-height: 22px;
            color: #465261;
        }
    </style>
@endsection

@section('content')
    <div class="">

    <div class="studio98_websters">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                <div class="ibox-title2">
                        <h5 class="sl_whiteout notranslate">Manage {{ $banner->name }}</h5>
                        <div class="pull-right">
                            <button class="btn btn-primary" href="javascript:void(0);" onclick="openGallery()"> Upload and Select image</button>
                        </div>
                    </div>
                    <div class="ibox-content p-md">
                        @include('flash::message')
                        @if( $banner->type == 'sidebar' and $banner->item()->where('type', 'video')->count() < 1  )
                            <div class="panel">
                                <div class="panel panel-default banner-item p-3">
                                    <div class="form-group">
                                        <h3>Add Video</h3>
                                    </div>
                                    <div class="form-group">
                                        <a href="{{ website_url('banner/video-item-create/' . $banner->id) }}" class="btn btn-primary ">Add Video</a>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="panel" id="banner-list">
                            @if(count($items) > 0)
                                @foreach($items AS $item)
                                    @if( $item->type == 'form' )
                                        @include('Website::banner._item_form')
                                    @elseif( $item->type == 'video' )
                                        @include('Website::banner._video')
                                    @else
                                        @include('Website::banner._item')
                                    @endif
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('Website::layout._gallery_popup')
@endsection

@section('footer')
    <script src="{{ asset('/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
    <script>

        $(document).ready(function () {
            $('#gallery_manager').on('shown.bs.modal', function (e) {
                $('#gallery_manager .other_file_image,#gallery_manager li#slider_tab').remove();
                if( $('#gallery_manager .use_banner_image').length < 1 ) {
                    @if( $banner->type == 'sidebar' )
                        $('#gallery_manager').find('.modal-footer').append('<button type="button" class="btn btn-primary use_banner_image">Insert Image</button>');
                    @else
                        $('#gallery_manager').find('.modal-footer').append('<button type="button" class="btn btn-primary use_banner_image">Use Image as Banner</button>');
                    @endif
                }
            });
            doSortable();
            dateGroupDiv('.input-daterange .banner_item_date');
            updateBannerCard();

            $('.video_file').change(function () {
                $(this).closest('form').submit();
            });
        });

        $(document).on('click', '#gallery_manager .use_banner_image', function() {
            var amazon_url  = $(this).find('img').attr('src');
            if( $('#gallery_manager li.selected').length > 0 ) {
                var media_id = $('#gallery_manager li.selected a').data('id');
                saveBannerImage(media_id);
                $('#gallery_manager').modal('hide');
            }
        });

        $(document).on('change', '.item_status', function () {
            var status      = $(this).val();
            var bannerItem  = $(this).closest('.banner-item');
            var itemId      = bannerItem.data('id');
            updateBannerCard();
            if( status == 2 || status == 1) {
                $.ajax({
                    method: 'POST',
                    url: '{{ website_url('banner/item-switch/' . $banner->id) }}',
                    data: 'item_id='+itemId+'&_token='+csrf_token+'&status='+status,
                }).done(function(response) {});
            }
        });

        function updateBannerCard() {
            $('#banner-list').find('.item_status:checked').each(function () {
                var status      = $(this).val();
                var bannerItem  = $(this).closest('.banner-item');
                var itemId      = $(this).data('id');

                $(bannerItem).find('.banner-actions').find('.banner-status-label').removeClass('selected');
                $(this).closest('.banner-status-label').addClass('selected');

                if( $(bannerItem).hasClass('disabled') ) {
                    $(bannerItem).removeClass('disabled');
                    $(bannerItem).find('input, select, button').each(function () {
                        $(this).prop('disabled', false);
                    });
                }
                if( status == 3 ) {
                    $(bannerItem).find('.input-daterange').show();
                } else {
                    $(bannerItem).find('.input-daterange').hide();
                }
                if( status == 2 ) {
                    $(bannerItem).addClass('disabled');
                    $(bannerItem).find('input, select, button').each(function () {
                        if( $(this).attr('type') !== 'radio' ) {
                            $(this).prop('disabled', true);
                        }
                    });
                }
            });
        }

        $(document).on('click', '.banner-item .remove_item', function () {
            var itemId = $(this).closest('.banner-item').data('id');
            if( confirm('Are you sure you want to delete ?') )
            {
                $.ajax({
                    method: 'POST',
                    url: '{{ website_url('banner/item-delete/' . $banner->id) }}',
                    data: 'item_id='+itemId+'&_token='+csrf_token,
                }).done(function(response) {
                    $('#item_' + itemId).remove();
                    toastrShow('Image deleted', 'Success');
                });
            }
        });

        function updateVideoItem( object ) {
            var btn     = $(object).find('button[type=submit]');
            var btnTex  = $(btn).html();
            var formData = new FormData($(object)[0]);
            formData.append('_token', csrf_token);
            processBtnDisable(btn, btnTex);
            $.ajax({
                type: 'POST',
                url: '{{ website_url('banner/video-item/' . $banner->id) }}',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(response) {
                    location.reload();
                },
                error: function(response) {

                },
            });
            return false;
        }

        function updateBannerItem ( object ) {
            var btn     = $(object).find('button[type=submit]');
            var btnTex  = $(btn).html();
            var data    = $(object).serialize();
            processBtnDisable(btn, btnTex);
            $.ajax({
                method: 'POST',
                url: '{{ website_url('banner/item-update/' . $banner->id) }}',
                data: data,
            }).done(function (response) {
                toastrShow('Image has been updated', 'Success');
                revertProcessBtnDisable(btn,btnTex);
            });
            return false;
        }

        function saveBannerImage( mediaId ) {
            $.ajax({
                method: 'POST',
                url: base_url + '/website/banner/create-item/{{ $banner->id }}',
                data: 'media_id=' + mediaId + '&_token='+csrf_token,
                dataType: 'json',
            }).done(function(response) {
                $('#banner-list').prepend(response.data);
                dateGroupDiv('.input-daterange .banner_item_date');
                doSortable();
            })
        }

        function doSortable() {
            $('#banner-list').sortable({
                connectWith: 'div',
                tolerance: 'pointer',
                forcePlaceholderSize: true,
                opacity: 1,
                update: function (event, ui) {
                    var data = $(this).sortable('serialize');
                    $.ajax({
                        data: data + '&_token='+csrf_token,
                        type: 'POST',
                        url: '{{ website_url("banner/sorting/" .$banner->id) }}',
                    }).done(function() {
                    });
                }
            }).disableSelection();
        }
    </script>
@endsection