@extends('layouts.app')

@section('title', 'Manage Daily Stock')
@section('breadcrumb', 'Manage Daily Stock')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('stock.daily', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    <i class="fa fa-cubes"></i> Daily Stock of <b>{{Session::get('brands_pick')['name'] }}</b>
                </h3>
            </div>
            <div class="kt-portlet__head-toolbar">
                <h5 class="text-warning"> Delivery In: {{$deliveryIn}}</h5> &nbsp;&nbsp;&nbsp;
                <h5 class="text-danger"> Delivery Out: {{$deliveryOut}}</h5> &nbsp;&nbsp;&nbsp;
                <h5 class="text-success"> Opname: {{$opname}}</h5>
            </div>
        </div>
        <div class="kt-portlet__body">
            @include('layouts.notification')

            @php
                $date_start = old('date_start') ?? $date_start;
                $date_end = old('date_end') ?? $date_end;
                $searchOutlet = old('searchOutlet') ?? $searchOutlet;
                // $status1 = old('status1') ?? $status1;
                // $status2 = old('status2') ?? $status2;
                // $searchValue = old('searchValue') ?? $searchValue;
            @endphp

           {{-- begin: Search form --}}
            <form action="{{route('stock.daily')}}" method="GET">
                <div class="row m--margin-bottom-20">
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>Start Date:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></div>
                            <input type="date" name="date_start" id="date_start" class="form-control m-input" value="{{$date_start}}">
                        </div>
                    </div>

                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label>End Date:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></div>
                            <input type="date" name="date_end" id="date_end" class="form-control m-input" value="{{$date_end}}">
                        </div>
                    </div>
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">
                        <label for="">Outlet :</label>
                            <div class="input-group">

                            <select name="searchOutlet" id="searchOutlet"  style="width:100%!important;">
                                <option value="">--All--</option>
                                @foreach ($name['result'] as $item)
                                    <option value="{{$item['name']}}" {{ $item['name'] == $searchOutlet ? 'selected' : ''}}>{{$item['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row mt-2 pull-right">
                    <div class="col-lg-12">
                        <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                        &nbsp;&nbsp;
                        <input class="btn btn-secondary reset" type="reset" id="reset">
                    </div>
                </div>
            </form>
           {{-- end: Search form --}}

           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        {{-- <th>No</th> --}}
                        <th>Outlet</th>
                        <th>Date</th>
                        <th>Total Inventory</th>
                        <th>Delivery In</th>
                        <th>Delivery Out</th>
                        <th>Opname</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}

        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.outlet').select2();
            $('#searchOutlet').select2();
        });

        $(document).on('click', '.reset', function(){
            window.location.href = '{{ route("stock.daily") }}';
        })

        // $('.searchValue').hide();
        // $(document).ready(function(){
        //     $("#status1").change(function(){
        //     var selectedStatus = $(this).children("option:selected").val();

        //     if(selectedStatus == ""){
        //         $('.status2').hide();
        //         $('.status2').val('');
        //     }
        //     else{
        //         $('.status2').show();
        //     }
        // });

        // $("#status2").change(function(){
        //     var selectedStatus = $(this).children("option:selected").val();

        //     if(selectedStatus == ""){
        //         $('.searchValue').hide();
        //     }
        //     else{
        //         $('.searchValue').show();
        //     }
        // });
    // });
    </script>
    <script>
        // check if filter error
        var ajaxError = "{!! session('ajaxError') !!}"
        $.fn.dataTable.ext.errMode = 'none';
        if (!ajaxError) {
            $('#datatable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                stateSave:true,
                "bFilter": false,
                "lengthChange": false,
                ajax: "{{route('stock.table')}}?date_start={{$date_start}}&date_end={{$date_end}}&searchOutlet={{$searchOutlet}}",
                columns: [
                    // {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                    {data: 'name', name: 'name'},
                    {data: 'date', name: 'date'},
                    {data: 'total', name: 'total'},
                    {data: 'deliveryIn', name: 'deliveryIn'},
                    {data: 'deliveryOut', name: 'deliveryOut'},
                    {data: 'opname', name: 'opname'},
                    {data: 'action', name: 'action', searchable: false, orderable: false}
                ]
            }).on('processing.dt', function (e, settings, processing) {
                    if (processing) {
                        $('#datatable').hide();
                        $('#loading').show();
                    } else {
                        $('#datatable').show();
                        $('#loading').hide();
                    }
            });
        }
    </script>
@endsection