@extends('templates.structure') 
@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('wickedpicker/dist/wickedpicker.min.css')}}">
<style>
    .ck-content { min-height:500px; max-height:auto; }

</style>
@endsection
@section('content')

<div class="row">
    <div class="col-md-8">
        <!-- general form elements disabled -->
        <div class="card">
            <div class="card-header">
                {{-- <h3 class="card-title">Form Event & Broadcasting</h3> --}}
            </div>
            <!-- /.card-header -->
            <form role="form" id="form">
                <div class="card-body">
                    <div class="row">                 
                        <!-- text input -->                                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" value="{{$data->name}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Address</label>
                                <input type="text" name="address" id="address" value="{{$data->address}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>City</label>
                                <input type="text" name="city"  value="{{$data->city}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {{-- <label>Address</label> --}}
                                <div class="form-row">
                                    <div class="form-group col-md-6">                                    
                                        <label>Lat</label>
                                        <input type="text" name="lat" value="{{$data->lat}}" class="form-control">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Lng</label>
                                        <input type="text" name="lng" value="{{$data->lng}}" class="form-control">
                                    </div>
                                </div>
                            </div>                        
                        </div>                        
                        <!-- text input -->
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea name="message_val" style="display:none"></textarea>
                                <label>Description</label>
                            <textarea id="editor1" name="description" style="width: 100%;" class="form-controller">{!!$data->description!!}</textarea>
                                </div>
                            {{-- <input type="text" name="message" class="form-control"> --}}
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Image</label>
                                    <div style="display:none">
                                        <br>
                                    </div>
                                    <img id="falseinput" class="img-responsive" src="{!!$data->image!!}" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"/>
                                    <br>
                                    <br>
                                    <input type="file" name="image" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" class="form-control">
                                    <textarea id="base" style="display:none"></textarea>
                                </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" name="phone" value="{{$data->phone}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Capacity</label>
                                <input type="number" name="capacity" value="{{$data->capacity}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>OpenAt</label>
                                <input type="text" name="open_at" value="{{$data->open_at}}" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>CloseAt</label>
                                <input type="text" name="close_at" value="{{$data->close_at}}" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>
        <!-- /.card -->
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Add New Promotions</h3>
            </div>
            <!-- /.card-header -->
            <form role="form" id="formPromo">
                <div class="card-body">
                    <div class="row">                 
                        <!-- text input -->                                        
                        <div class="col-md-12">
                            <div class="form-group">                                
                                <input type="text" name="promotions" class="form-control" placeholder="new promotions here ...">
                            </div>
                        </div>
                        
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Promotion List</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped" style="width:100%">
                    <thead>
                        <tr>
                            <th>Position</th>   
                            <th>Name</th>                                     
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>                
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <form role="form" id="positionForm">
            <div class="card-body">
                <div class="row">                 
                    <!-- text input -->                                        
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Position</label>
                            <input type="text" name="to" class="form-control">
                            {{-- <input type="text" name="from" class="form-control" value="{{$data->position}}"> --}}
                        </div>
                    </div>
                    
                </div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
                <button type="submit" class="btn btn-info float-right">Save</button>
                {{-- <button class="btn btn-default float-right">Cancel</button> --}}
            </div>
        </form>

    </div>
  </div>
</div>
<!-- /.row -->
@endsection

@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<!-- Select2 -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<!-- bootstrap time picker -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('wickedpicker/dist/wickedpicker.min.js')}}"></script>
{{-- <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> --}}
{{-- <script src="jquery.geocomplete.js"></script> --}}
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    // $(function () {
        //Initialize Select2 Elements            
        let configwickedpicker = {            
            now: "00:00", //hh:mm 24 hour format only, defaults to current time
            twentyFour: true,  //Display 24 hour format, defaults to false
            upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
            downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
            close: 'wickedpicker__close', //The close class selector to use, for custom CSS
            hoverState: 'hover-state', //The hover state class to use, for custom CSS
            title: '', //The Wickedpicker's title,
            showSeconds: false, //Whether or not to show seconds,
            timeSeparator: ':', // The string to put in between hours and minutes (and seconds)
            secondsInterval: 1, //Change interval for seconds, defaults to 1,
            minutesInterval: 1, //Change interval for minutes, defaults to 1
            beforeShow: null, //A function to be called before the Wickedpicker is shown
            afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
            show: null, //A function to be called when the Wickedpicker is shown
            clearable: false, //Make the picker's input clearable (has clickable "x")
        }
        let positionFrom;
        let cafe_id;

        configwickedpicker.now = "{{substr_replace($data->open_at ,"", -2).":00"}}"    
        let open_at = $('[name="open_at"]').wickedpicker(configwickedpicker);
        configwickedpicker.now = "{{substr_replace($data->close_at ,"", -2).":00"}}"    
        let close_at = $('[name="close_at"]').wickedpicker(configwickedpicker);

        // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            var myEditor;
            ClassicEditor
              .create(document.querySelector('#editor1'))
              .then(function (editor) {
                // The editor instance
                myEditor = editor;
              })
              .catch(function (error) {
                console.error(error)
              })

        function readURL(input) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function (e) {
                    if(e.target.result != undefined){
                        $('#falseinput').closest('div').css('display', 'block')
                    }
					$('#falseinput').attr('src', e.target.result);
					$('#base').val(e.target.result);
				};
				reader.readAsDataURL(input.files[0]);
			}
        }
        
        $( "#form" ).submit(function( e ) {
            e.preventDefault()

            var bodyFormData = new FormData();
            bodyFormData.append('id', {{$data->id}})
            bodyFormData.append('name', $('[name="name"]').val())
            bodyFormData.append('address', $('[name="address"]').val())
            bodyFormData.append('lat', $('[name="lat"]').val())
            bodyFormData.append('lng', $('[name="lng"]').val())
            bodyFormData.append('phone', $('[name="phone"]').val())
            bodyFormData.append('capacity', $('[name="capacity"]').val())            
            bodyFormData.append('description', myEditor.getData() != "<p>&nbsp;</p>" ? myEditor.getData() : '')
            bodyFormData.append('image', $('#base').val())
            bodyFormData.append('open_at', $('[name="open_at"]').val())
            bodyFormData.append('close_at', $('[name="close_at"]').val())
            bodyFormData.append('city', $('[name="city"]').val())
            // bodyFormData.append('email', $('[name="email"]').val())
                    
            // console.log(config)
            axios.post('{{route("cafe.update")}}', bodyFormData, config) .then(function (response) {
                        console.log(response);
                        window.location = response.data.additional.redirect;

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });

                    });
        })
    // })


    var table = $('#example1').DataTable({
        "scrollX": true,  
        "processing": true,
        "serverSide": true, 
        "paging": false,
        // "ordering": false,
        "info": false,
        "searching": false,
        "ajax": {
            "url": '{{route("cafe-promotions.datatable", $data->id)}}',
            "dataSrc": ''
        }, 
        "columns": [            
                { "name": "position", "data": "position", "orderable": true, },
                { "name": "promotions", "data": "promotions", "orderable": true, },
                { "data": null, "orderable": false, "searchable": false },
            ],
        "order" :[[ 0, 'asc' ]],
        "columnDefs": [ {
            "targets": -1,
            "data": "action",
            "render": function ( data, type, row, meta ) {                
                var action = '';                
                action += '<button class="btn btn-outline-danger" onclick="deleted(\''+data.id+'\', \''+data.promotions+'\')"><i class="fa fa-trash"></i></button>&nbsp;'
                action += '<button class="btn btn-outline-primary" onclick="edit(\''+92+'\', \''+data.promotions+'\', \''+data.position+'\')"><i class="fa fa-pencil"></i></button>&nbsp;'                
                return action            
            }
        },
        ],
    })

    function deleted(id, name){
        Swal({ title: 'Are you sure?', text: "You want to delete "+name+"!", type: 'warning', showCancelButton:true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result)=> { if (result.value) {            

            let url = '{{url("cafe-promotions")}}/'+id;
            axios.delete(url, config) .then(function (response) {                                
                table.ajax.reload();
            })
            .catch(function (error) { console.log(error);
                $('#match-not').css('display', 'block')
                console.log(error.response)
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: error.response.data.data.message,
                    // footer: '<a href>Why do I have this issue?</a>'
                })
            });

        } })
    }

    function edit(id, name, position){
        cafe_id = id;
        positionFrom = position;
        $('#myModal').modal('show');
    }

    $( "#positionForm" ).submit(function( e ) {
        e.preventDefault()
        // alert(positionfrom);
        // alert($('[name="to"]').val());
        // alert("asd");
        
        var input = $(this).serialize()
        input += '&cafe_id='+cafe_id
        input += '&from='+positionFrom
        input += '&to='+$('[name="to"]').val()

        // var bodyFormData = new FormData();
        // bodyFormData.append('cafe_id', cafe_id);
        // bodyFormData.append('from', positionFrom);
        // bodyFormData.append('to', $('[name="to"]').val());

        axios.post('{{route("cafe-promotions.edit")}}', input, config) .then(function (response) {
                        // console.log(response);
                        table.ajax.reload();
                        $('#myModal').modal('hide')

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });
                    });
    });

    $( "#formPromo" ).submit(function( e ) {
            e.preventDefault()

            var bodyFormData = new FormData();
            bodyFormData.append('cafe_id', {{$data->id}});
            bodyFormData.append('promotions', $('#formPromo [name="promotions"]').val());

            axios.post('{{route("cafe-promotions.store")}}', bodyFormData, config) .then(function (response) {                
                $('#formPromo [name="promotions"]').val('')
                table.ajax.reload();
            })
            .catch(function (error) { console.log(error);
                $('.newerror').remove()
                var msgs = error.response.data.data.message
                $.each(msgs, function (index, value) {
                        $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                        // console.log(value[0])
                    });

            });
        });
</script>
@endsection