@extends('layouts.app')
@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
@section('css')
<style>
    a{
        color: #222;
    }
    #menutype{
        position: absolute;
        z-index: 99;
        width:250px;
        left: 250px;
    }
</style>
@endsection

<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <div class="heading-elements">
            <button type="button" class="btn btn-info mr-1 add_click" data-toggle="modal" data-target="#qrMenuModal">Add QR Menu</button>
        </div>
    </div>
      <div class="card-body collapse in">
        <div class="card-block card-dashboard">
             <table class="table table-hover table-bordered dom-jQuery-events" >

                <select name="type" class="form-control" id="menutype">
                    <option value="">All Types</option>
                    <option value="oliva_eng" @if(Request::input('type') == 'oliva_eng') selected @endif>Menu Oliva English</option>
                    <option value="oliva_esp" @if(Request::input('type') == 'oliva_esp') selected @endif>Menu Oliva Espanish</option>
                    <option value="marmi_eng" @if(Request::input('type') == 'marmi_eng') selected @endif>Menu Marmi Ristorante English</option>
                    <option value="marmi_esp" @if(Request::input('type') == 'marmi_esp') selected @endif>Menu Marmi Ristorante Espanish</option>
                </select>

                <thead>
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Type</th>
                        <th>Order</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                <?php $i = 1; ?>
                @if(isset($data) && !empty($data))
                @foreach($data as $row)
                    <tr>
                        <td>{{$i++}}</td>
                        <td>
                            @if($row->image != "")
                            <a href="{{asset('/laravel_code/public/qrmenu/' . $row->image)}}" target="_blank">
                                <img class="img" src="{{asset('/laravel_code/public/qrmenu/' . $row->image)}}" style="width: 90px; height:140px">
                            </a>
                            @else
                            <i class="fa fa-picture-o fa-5x"></i>
                            @endif
                        </td>
                        <td>
                            @if($row->type == 'oliva_eng')
                            <a href="{{route($row->type)}}" target="_blank">Oliva English</a>
                            @elseif($row->type == 'oliva_esp')
                            <a href="{{route($row->type)}}" target="_blank">Oliva Espanish</a>
                            @elseif($row->type == 'marmi_eng')
                            <a href="{{route($row->type)}}" target="_blank">Marmi Ristorante English</a>
                            @elseif($row->type == 'marmi_esp')
                            <a href="{{route($row->type)}}" target="_blank">Marmi Ristorante Espanish</a>
                            @endif
                        </td>
                        <td>{{$row->order}}</td>
                        <td>
                            <a data-id="{{$row->id}}" class="text-info edit_click" style="cursor:pointer" title="Edit"><i class="icon-edit2"></i></a>
                            <a href="{{route('deleteQRMenu',['id'=>$row->id])}}" class="text-danger" title="Delete" onclick="return confirm('Are you sure you want to delete this ?');"><i class="icon-trash-o"></i></a>
                        </td>
                    </tr>
                @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>
</div>


@include('admin.menu.qr.menu_qr_modal') 
@section('js')

<script src="{{asset('assets/admin/vendors/js/tables/jquery.dataTables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/tables/datatables/datatable-advanced.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">

    $("body").on("change", "#file2", function (){
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader)
            return; // no file selected, or no FileReader support

        if (/^image/.test(files[0].type)) { // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function () { // set image data as background of div
                $("#banner_preview2").css({"background": "url(" + this.result + ")","background-size":"cover"});
            }
        }
    });
        
    $(".edit_click").on('click', function (event) {
        event.preventDefault();

        $("#qrMenuForm").attr("action","{{route('updateQRMenu')}}");
        $('#qrMenuModalLabel').html('Edit QR Menu');

        var id = $(this).attr("data-id");
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');      
        $.ajax({
            type: 'POST',
            url: '{{route("getQRMenu")}}',
            data: {id:id, _token: CSRF_TOKEN},
            dataType: 'json',
            success: function (response) {
                $('#id').val(response.id);
                $('#order').val(response.order);
                
                var public_path = "{{ asset('/laravel_code/public/qrmenu/') }}";
                var image_url = public_path+"/"+response.image;
                if(response.image != ''){
                    $('#old_image_div').html("<img src='"+image_url+"' width='230px' height='280px'>");
                    $('#old_image').val(response.image);
                }
                
                $('#type option[value="' + response.type + '"]').prop('selected', true);
                $('#qrMenuModal').modal('show');
            }
        }); 

           
    });

    $('.add_click').click(function() {
        $('#qrMenuModalLabel').html('Add QR Menu');
        $('#qrMenuForm')[0].reset();
        $("#qrMenuForm").attr("action","{{route('saveQRMenu')}}");
        $('#old_image_div').html('');
    });

    $('#menutype').on('change', function () {
        var val = $(this).val(); 
        if (val) {window.location = 'qr-menu?type='+val;}else{window.location = 'qr-menu';}
        return false;
    });
    
</script>
@endsection
@endsection