@extends('master.back')
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('admin/css/bootstrap/bootstrap.min.css') }}"/>
@endsection
@section('content')
    <!-- START BREADCRUMB -->
    <ul class="breadcrumb">
        <li class="active"><a href="{{ route('admin.home') }}">Home</a></li>
    </ul>
    <!-- END BREADCRUMB -->
    <!-- PAGE CONTENT WRAPPER -->
    <div class="page-content-wrap">

        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <!-- START DEFAULT DATATABLE -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Məhsullar</h3>
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-success btn-lg" style="float: right" data-toggle="modal" data-target="#myModal">
                            Yeni
                        </button>
                    </div>

                </div>
                <!-- END DEFAULT DATATABLE -->
            </div>
        </div>

        <div class="col-md-10 col-md-offset-1">

            @if(count($products) > 0)
                @foreach($products->chunk(4) as $productschunk)
                    <div class="gallery" id="links">
                        @foreach($productschunk as $product)
                            <a class="gallery-item" href="{{ route('admin.settings.product', ['id' => $product->id]) }}" title="{{ $product->name }}" data-gallery>
                                <div class="image">
                                    <img src="{{ url('/') }}/settings/product/{{ $product->image }}" alt="{{ $product->name }}"/>
                                </div>
                                <div class="meta">
                                    <strong>{{ $product->name }}</strong>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endforeach
            @else
                Elave olunmayib
            @endif
        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <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" id="myModalLabel">Yeni məhsul</h4>
                </div>
                <div class="">
                    <form action="{{ route('admin.settings.products') }}" method="post" enctype="multipart/form-data">
                        <div class="col-md-10 col-md-offset-1" style="padding-top: 10px">
                            <div id="wrapper">
                                <p><label for="image">Photo</label></p>
                                <input type="file" name="image" id="image" accept="image/*" onchange="preview_image(event)">
                                <p><img id="output_image"/></p>
                            </div>
                            <div class="form-group">
                                <select class="form-control" name="category">
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" name="price" placeholder="Məhsulun qiyməti" class="form-control"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="discount" placeholder="Endirim (vacib deyil)" class="form-control"/>
                            </div>
                            <div class="form-group">
                                <textarea class="summernote_email" name="detail"></textarea>
                            </div>
                            <div class="form-group">
                                <input type="text" name="slug" placeholder="Link" class="form-control"/>
                            </div>
                            <div class="input-group">
                                <input type="text" name="product" placeholder="Məhsulun adı" class="form-control"/>
                                <div class="input-group-btn">
                                    <button class="btn btn-success btn-block"><span class="fa fa-plus"></span> Add</button>
                                </div>
                            </div>
                        </div>
                        {{ csrf_field() }}
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
@endsection
@section('audio')
    <audio id="audio-alert" src="{{ asset('admin/audio/alert.mp3') }}" preload="auto"></audio>
    <audio id="audio-fail" src="{{ asset('admin/audio/fail.mp3') }}" preload="auto"></audio>
@endsection
@section('js')
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- START PLUGINS -->
    <script type="text/javascript" src="{{ asset('admin/js/plugins/jquery/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/jquery/jquery-ui.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/bootstrap/bootstrap.min.js') }}"></script>
    <!-- END PLUGINS -->

    <!-- START THIS PAGE PLUGINS-->
    <script type="text/javascript" src="{{ asset('admin/js/plugins/icheck/icheck.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset('admin/js/plugins/summernote/summernote.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/scrolltotop/scrolltopcontrol.js') }}"></script>

    <script type="text/javascript" src="{{ asset('admin/js/plugins/morris/raphael-min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/morris/morris.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/rickshaw/d3.v3.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/rickshaw/rickshaw.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/bootstrap/bootstrap-datepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/owl/owl.carousel.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset('admin/js/plugins/moment.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <!-- END THIS PAGE PLUGINS-->

    <!-- START TEMPLATE -->

    <script type="text/javascript" src="{{ asset('admin/js/plugins.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/js/actions.js') }}"></script>

    <script type="text/javascript" src="{{ asset('admin/js/demo_dashboard.js') }}"></script>
    <!-- END TEMPLATE -->

    <script>
        function preview_image(event)
        {
            var reader = new FileReader();
            reader.onload = function()
            {
                var output = document.getElementById('output_image');
                output.src = reader.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
@endsection