@extends('layouts.base')

@section('title', 'Stock produit')

@section('actions')
    <div class="form-group">
        <button data-toggle="modal" data-target="#production-modal" class="btn btn-primary waves-effect waves-light">
            <span class="btn-label"><i class="fa fa-plus"></i></span>Màj du Stock
        </button>
    </div>

    <div id="production-modal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Chossisez votre site</h4>
                </div>
                <div class="modal-body">
                    <form id="production-form" method="get" action="{{route('stock.edit')}}">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-12" id="section">
                                    <div class="form-group">
                                        <select name="site" required="required" class="form-control">
                                            <option disabled value="">Selectionner un site</option>
                                            @foreach($sites as $site)
                                                <option {{ $loop->index == 0 ? 'selected' : '' }} value="{{ $site->id }}"  @if(in_array($site->id, request('site', []))) selected  @endif>{{ $site->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                    <button onclick="$('#production-form').submit()" type="button" class="btn btn-danger waves-effect waves-light">Modifier</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')

    <div class="card">
        <div class="card-body">
{{--                        <h4 class="card-title">@yield('title')</h4>--}}
{{--                        <h6 class="card-subtitle">Exporter CSV, Excel, PDF & Imprimer</h6>--}}
            <div class="table-responsive">
                <table id="table" class="display nowrap table table-hover table-striped table-bordered"
                       cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        @foreach($header as $key => $head)
                            <th class="{{ $key === 'hide' ? 'not-export' : '' }}">{{ ucfirst(__($head)) }}</th>
                        @endforeach
                        <th class="not-export"></th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        @foreach($header as $key => $head)
                            <th>{{ ucfirst(__($head))  }}</th>
                        @endforeach
                        <th class="not-export"></th>
                    </tr>
                    </tfoot>
                    <tbody>
                    @foreach($stocks as $stock)
                        <tr>
                            <td>{{$stock->product->code}}</td>
                            <td>{{$stock->product->name}}</td>
                            <td class="badge badge-success font-14">{{number_format($stock->value,0,'.',' ')}}</td>
                            <td>{{$stock->site->name}}</td>
                            <td class="badge badge-warning">{{$stock->updated_at->format('d/m/Y')}}</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary">Action</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item"
                                           href="">Mettre à jour</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('javascripts')

    <!-- This is data table -->
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    <!-- end - This is for export functionality only -->
    <script>
        $('#table').DataTable({
            dom: 'Bfrtip',
            "columnDefs": $('#table > thead > tr > th').map((i, el) => {
                return { "searchable": !$(el).hasClass('not-export'), "targets": i };
            }),
            buttons: [
                // 'copy', 'csv', 'excel', 'pdf', 'print'
            ].map((button) => {
                return {
                    extend: button,
                    exportOptions: {
                        columns: ':not(.not-export)'
                    }
                };
            }),
            @if (app()->getLocale() != 'en')
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
            @endif
        });
    </script>

    <!-- Magnific popup JavaScript -->
    <script src="{{ asset('assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup.min.js') }}"></script>

    <script>
        $('.image-popups').magnificPopup({
            delegate: 'a',
            type: 'image',
            removalDelay: 500, //delay removal by X to allow out-animation
            callbacks: {
                beforeOpen: function() {
                    // just a hack that adds mfp-anim class to markup
                    this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
                    this.st.mainClass = this.st.el.attr('data-effect');
                }
            },
            closeOnContentClick: true,
            midClick: true
        });
    </script>

@endsection