@extends('admin')

@section('content')
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="col-md-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-social-dribbble font-purple-soft"></i>
                    <span class="caption-subject font-purple-soft bold uppercase">Quản lý popup</span>
                </div>
            </div>
            <div class="portlet-body">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab_1_1" data-toggle="tab" aria-expanded="true"> Web </a>
                    </li>
                    <li class="">
                        <a href="#tab_1_2" data-toggle="tab" aria-expanded="false"> Ios </a>
                    </li>
                    <li class="">
                        <a href="#tab_1_3" data-toggle="tab" aria-expanded="false"> Android </a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="tab_1_1">
                        <div class="row" style="margin-bottom: 15px">
                            <div class="col-md-12">
                                <a data-type="{{ \App\Models\Popup::WEB }}" href="#add-popup" data-toggle="modal"
                                   class="btn btn-success btn-add-popup" style="margin-top: 15px; margin-bottom: 15px">Thêm
                                    popup</a>
                            </div>
                            <div class="col-md-12">
                                <table class="table table-striped table-bordered table-hover" id="log-table">
                                    <thead>
                                    <tr>
                                        <th>Hình ảnh</th>
                                        <th>Link</th>
                                        <th>Bắt đầu</th>
                                        <th>Kết thúc</th>
                                        <th>Trạng thái</th>
                                        <th>Hành động</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab_1_2">
                        <div class="row" style="margin-bottom: 15px">
                            <div class="col-md-12">
                                <a data-type="{{ \App\Models\Popup::IOS }}" href="#add-popup" data-toggle="modal"
                                   class="btn btn-success btn-add-popup" style="margin-top: 15px; margin-bottom: 15px">Thêm
                                    popup</a>
                            </div>
                            <div class="col-md-12">
                                <table class="table table-striped table-bordered table-hover" id="log-table-ios">
                                    <thead>
                                    <tr>
                                        <th>Hình ảnh</th>
                                        <th>Link</th>
                                        <th>Bắt đầu</th>
                                        <th>Kết thúc</th>
                                        <th>Trạng thái</th>
                                        <th>Hành động</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab_1_3">
                        <div class="row" style="margin-bottom: 15px">
                            <div class="col-md-12">
                                <a data-type="{{ \App\Models\Popup::ANDROID }}" href="#add-popup" data-toggle="modal"
                                   class="btn btn-success btn-add-popup" style="margin-top: 15px; margin-bottom: 15px">Thêm
                                    popup</a>
                            </div>
                            <div class="col-md-12">
                                <table class="table table-striped table-bordered table-hover" id="log-table-android">
                                    <thead>
                                    <tr>
                                        <th>Hình ảnh</th>
                                        <th>Link</th>
                                        <th>Bắt đầu</th>
                                        <th>Kết thúc</th>
                                        <th>Trạng thái</th>
                                        <th>Hành động</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="add-popup" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ url('admin/editors/create') }}" method="post" enctype="multipart/form-data"
                  id="form-add-popup">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">Thêm popup</h4>
                    </div>
                    <div class="modal-body">

                        {!! csrf_field() !!}

                        <div class="row">
                            <div class="col-md-12" style="margin-bottom: 15px">
                                <div class="form-group">
                                    <div class="col-md-12">


                                        <div class="fileinput fileinput-new"
                                             data-provides="fileinput">

                                            <div class="fileinput-new thumbnail"
                                                 style="width: 200px; height: 180px;">
                                                <img id="inp-image-web2"
                                                     src="/frontend3/assets/img/placeholder.png"
                                                     alt=""></div>
                                            <div class="fileinput-preview fileinput-exists thumbnail"
                                                 style="max-width: 200px; max-height: 150px;"></div>
                                            <div>
                                                                            <span class="btn default btn-file">
                                                                                <span class="fileinput-new"> Chọn hình ảnh </span>
                                                                                <span class="fileinput-exists"> Thay đổi </span>
                                                                                <input type="file"
                                                                                       name="image"> </span>
                                                <a href="javascript:;"
                                                   class="btn default fileinput-exists"
                                                   data-dismiss="fileinput"> Xóa </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Link</label>
                                    <div>
                                        <input type="text" name="link" class="form-control"
                                               id="link">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <label>Thời gian bắt đầu</label>
                                <div>
                                    <input type="text" name="start_time" class="form-control datepicker"
                                           id="start_time" required>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label>Thời gian kết thúc</label>
                                <div>
                                    <input type="text" name="end_time" class="form-control datepicker"
                                           id="end_time" required>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label>Trạng thái</label>
                                <div>
                                    <select class="form-control" name="status">
                                        <option value="{{ \App\Models\Popup::ACTIVE }}">Kích hoạt</option>
                                        <option value="{{ \App\Models\Popup::IN_ACTIVE }}">Không kích hoạt</option>
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="type" id="data-type">

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                        <button type="button" class="btn green" id="btn-save">Lưu</button>
                    </div>
                </div>
            </form>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')
<script>

    var tableWeb = '';
    var tableIos = '';
    var tableAndroid = '';
    var type = '';
    $('.btn-add-popup').click(function () {
        type = $(this).attr('data-type');
        $('#data-type').val(type);
    });
    $('#btn-save').click(function (e) {
        e.preventDefault();

        var form = new FormData($('#form-add-popup')[0]);

        $.ajax({
            url: '{{ url('admin/popup/create') }}',
            data: form,
            type: 'POST',
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData: false,
            dataType: 'json',
            success: function (response) {
                if (response.status == 0) {
                    alert(response.message);
                    return;
                }
                tableIos.ajax.reload();
                tableWeb.ajax.reload();
                tableAndroid.ajax.reload();
                $('#add-popup').modal('hide');
            }
        });
    });

    $(document).ready(function () {
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
        });
        tableWeb = $('#log-table').DataTable({
            "bDestroy": true,
            processing: true,
            //  serverSide: true,
            "aaSorting": [],
            searching: true,
            ajax: {
                data: {
                    type: '{{ \App\Models\Popup::WEB }}'
                },
                url: '{!! url('admin/popup/popup.data') !!}',
            },
            columns: [
//                {data: 'id', name: 'id'},
                {data: 'image', name: 'image'},
                {data: 'link', name: 'link'},
                {data: 'start_time', name: 'start_time'},
                {data: 'end_time', name: 'end_time'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action'},
            ]
        });

        tableIos = $('#log-table-ios').DataTable({
            "bDestroy": true,
            processing: true,
            //  serverSide: true,
            "aaSorting": [],
            searching: true,
            ajax: {
                data: {
                    type: '{{ \App\Models\Popup::IOS }}'
                },
                url: '{!! url('admin/popup/popup.data') !!}',
            },
            columns: [
//                {data: 'id', name: 'id'},
                {data: 'image', name: 'image'},
                {data: 'link', name: 'link'},
                {data: 'start_time', name: 'start_time'},
                {data: 'end_time', name: 'end_time'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action'},
            ]
        });

        tableAndroid = $('#log-table-android').DataTable({
            "bDestroy": true,
            processing: true,
            //  serverSide: true,
            "aaSorting": [],
            searching: true,
            ajax: {
                data: {
                    type: '{{ \App\Models\Popup::ANDROID }}'
                },
                url: '{!! url('admin/popup/popup.data') !!}',
            },
            columns: [
//                {data: 'id', name: 'id'},
                {data: 'image', name: 'image'},
                {data: 'link', name: 'link'},
                {data: 'start_time', name: 'start_time'},
                {data: 'end_time', name: 'end_time'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action'},
            ]
        });
    });

</script>
@endpush