@extends('layouts.master')

@section('pagetitle')
Menus
@endsection
@section('title')
Menus
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor" style="font-weight: 600;">Menus</h4>
    </div>
    <div class="col-md-7 align-self-center text-right">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active">Menu</li>
            </ol>
            <a href="{{ url('menu/create') }}" type="button" class="btn btn-success d-none d-lg-block m-l-15">
                <i class="icon-plus"></i> Add Menu
            </a>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->

<div class="card">
    <div class="card-body">
        <h4 class="card-title"> Filter</h4>
        <hr>
        <!-- Nav tabs -->
        <form action="">
            <div class="row">
                <div class="col-sm-6">
                    <input type="text" name="name" class="form-control" autocomplete="off" placeholder=" Menu Name">
                </div>
                <div class="mt-0">
                    <button class="btn btn-warning">Search</button>
                </div>
            </div>

        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @include('layouts.alert')
        <hr>
        <div class="table-responsive">
            <table class="table table-hover color-table ">
                <thead>
                    <tr>
                        <th>S.no</th>
                        <th>Menu Type</th>
                        <th>Name</th>
                        <th>Menu Cover Image</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = ($menus->perPage() * ($menus->currentPage() - 1)) + 1 @endphp
                    @forelse($menus as $menu)
                    <tr>
                        <td>{{ $i++ }}</td>
                        <td>{{ @$menu->menuType->name }}</td>
                        <td>{{ @$menu->name }}</td>
                        <td>
                            @if($menu->image)
                            <img src="{{ env('UPLOAD_URL').'/'.$menu->image }}" data-toggle="modal" data-target="#exampleModal" data-image-url="{{ env('UPLOAD_URL').'/'.$menu->image }}" 
                            class="image-preview" style="width: 120px; height: 100px; object-fit: cover;">
                            @else
                            <img src="{{ url('images/dummy-logo.png') }}" style="width:120px;height: 100px;">
                            @endif
                        </td>
                        <!-- <img src="{{ env('UPLOAD_URL').'/'.$menu->image }}" style="width: 120px; height: 100px;"> </td> -->
                        <td>{{ $menu->price }}</td>
                        <td>
                            <input data-id="{{ $menu->id }}" class="toggle-class success" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $menu->status ? 'checked' : '' }}>
                        </td>
                        <!-- <td>{{ $menu->merchant_site_id }}</td> -->
                        <td>
                            <a href="{{ url('menu/'.$menu->id.'/edit') }}" data-toggle="tooltip" title="" data-original-title="Edit" class="btn btn-dropbox btn-flat btn-sm">
                                <i class="icon-pencil" aria-hidden="true"></i>
                            </a>

                            <a href="{{ url('menu/'.$menu->id.'/delete') }}" data-toggle="tooltip" title="" data-original-title="Delete" class="btn btn-danger btn-flat btn-sm">
                                <i class="icon-close" aria-hidden="true"></i>
                            </a>

                            <a href="{{ url('menu/'.$menu->id.'/view') }}" data-toggle="tooltip" title="" data-original-title="View" class="btn btn-success btn-flat btn-sm">
                                <i class="icon-eye" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                        <td>Menu Not Found!</td>
                    @endforelse

                    <!-- image preview modal-->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <img src="" id="modaltitlee" class="img-responsive" width="500" />
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end image preview modal-->

                </tbody>

            </table>
            {{ $menus->appends( Request::all() )->links() }}
        </div>
    </div>
</div>

@endsection
@push('script')
<script type="text/javascript">
    $(function() {
        $('.toggle-class').change(function() {
            var status = $(this).prop('checked') == true ? 1 : 0;
            var id = $(this).data('id');
            console.log(status);
            $.ajax({
                type: "get",
                dataType: "json",
                url: "{{ url('menu/statusUpdate') }}/ " + id,
                data: {
                    'status': status,
                    'id': id
                },
                success: function(data) {
                    sweetAlert("Updated successfully", "", "success");
                }
            });
        })
    })

    $('.image-preview').click(function() {
        $("#modaltitlee").attr('src', $(this).data('image-url'));
    })
</script>
@endpush