@extends('layouts.master')

@section('pagetitle')
Products
@endsection
@section('title')
Products
@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;">Products</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">Products</li>
            </ol>
            <a href="{{ url('products/create') }}" type="button" class="btn btn-success d-none d-lg-block m-l-15">
                <i class="icon-plus"></i> Create Products
            </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-3">
                    <input type="text" name="category_name" class="form-control" autocomplete="off" placeholder="Category">
                </div>
                <div class="col-sm-3">
                    <input type="text" name="name" class="form-control" autocomplete="off" placeholder="Name">
                </div>
                <div class="col-sm-3">
                    <select name="status" class="form-control">
                        <option value="">Select Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="pending">Pending</option>
                    </select>
                </div>
            </div>
            <div class="mt-2">
                <button class="btn btn-warning">Search</button>
            </div>
    </div>
    </form>
</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>Category Name</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Condition</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = ($products->perPage() * ($products->currentPage() - 1)) + 1 @endphp
                    @forelse($products as $product)
                    <tr>
                        <td>{{ $i++ }}</td>
                        <td>{{ @$product->category->name }}</td>
                        <td>{{ @$product->name }}</td>
                        <td>{{ $product->price }}</td>
                        <td>{{ $product->condition }}</td>
                        <td>
                            <input data-id="{{ $product->id }}" class="toggle-class success" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $product->status ? 'checked' : '' }}>
                        </td>
                        <td>
                            <a href="{{ url('products/'.$product->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('products/'.$product->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('products/'.$product->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>Product Not Found!</td>
                    @endforelse
                </tbody>
            </table>
            {{ $products->appends( Request::all() )->links() }}
        </div>
    </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