@extends('layouts.app')
@section('title', 'Pages | Website')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}" >
    <style>
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>Custom User List</h5>
                    <div class="pull-right">
                        <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#create_list">Add List</a>
                    </div>
                </div>
                <div class="ibox-content p-md" id="notification-form">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div class="table-responsive">
                        <table style="width: 100%;" class="table table-striped table-bordered table-hover" id="list_listing">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Created Date</th>
                            </tr>
                            </thead>
                        </table>
                        <tbody></tbody>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal fade" id="create_list" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return saveList();']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add List</h4>
                </div>
                <div class="modal-body">
                    @include('Website::mobile-setting.push-notifications.custom-list.form')
                    <div class="custom-conditions"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="edit_list" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return updateList();']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Edit List</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('/plugins/dataTables/dataTables.bootstrap4.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            var oTable = $('#list_listing').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ mobile_notification_url('custom-list-records') }}",
                    data: function (data) {
                    }
                }
            });


            conditions();
            // $('#condition').change();

        });

        function deleteList(id) {
            if(confirm('Are you sure you want to delete this item ?')) {
                $.ajax({
                    method: 'POST',
                    url: '{{ mobile_notification_url('custom-list-remove')}}',
                    data: 'id='+id,
                }).done(function(response) {
                    location.reload();
                });
            }
        }

        function editList(id) {
            $.ajax({
                method: 'GET',
                url: '{{ mobile_notification_url('custom-list-edit')}}',
                data: 'id='+id,
            }).done(function(response) {
                $('#edit_list .modal-body').html(response);
                conditions();
                $('#edit_list').modal('show');

            });
        }

        function conditions() {
            $('.condition').on('change',function () {
                const type = $(this).children("option:selected").val();
                if(type === 'address'){
                    $('.card_total_fields').hide();
                    $('.address_fields').show();
                }else if(type === 'card_total') {
                    $('.card_total_fields').show();
                    $('.address_fields').hide();
                }else{
                    $('#create_list .custom-conditions').empty();
                    $('.card_total_fields').hide();
                    $('.address_fields').hide();
                }
            });
        }

        function saveList() {
            return reloadAjaxSubmit('create_list',"{{ mobile_notification_url('store-custom-list')}}",'name','Submit');
        }

        function updateList() {
            return reloadAjaxSubmit('edit_list',"{{ mobile_notification_url('store-custom-list')}}",'name','Submit');
        }

    </script>
@endsection