@extends('layouts.app')

@section('title', 'Manage Daily Omzet')
@section('breadcrumb', 'Manage Daily Omzet')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('omzet.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-money-check-alt"></i> Daily Omzet of <b>{{Session::get('brands_pick')['name'] }}</b>
                </h3>
            </div>
            <div class="kt-portlet__head-toolbar">
                <h5 class="text-grey"> Total: {{$total}}</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;
            @endphp

           {{-- begin: Search form --}}
            <form action="{{route('omzet.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>Outlet Name</th>
                        <th>Date</th>
                        <th>Total Omzet</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("omzet.daily") }}';
        })
    </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,
                "bFilter": false,
                "lengthChange": false,
                ajax: "{{route('omzet.table')}}?date_start={{$date_start}}&date_end={{$date_end}}&searchOutlet={{$searchOutlet}}",
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'date', name: 'date'},
                    {data: 'brand_outlet_omzets', name: 'brand_outlet_omzets', render: $.fn.dataTable.render.number(',', '.', 0, '')},
                ]
            }).on('processing.dt', function (e, settings, processing) {
                    if (processing) {
                        $('#datatable').hide();
                        $('#loading').show();
                    } else {
                        $('#datatable').show();
                        $('#loading').hide();
                    }
            });
        }
    </script>
@endsection