@extends('layouts.app')

@section('title', 'Manage Daily Task')
@section('breadcrumb', 'Manage Daily Task')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('manage-daily-task', '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 Task of <b>{{Session::get('brands_pick')['name'] }}</b>
                </h3>
            </div>
            <div class="kt-portlet__head-toolbar">
                <h5 class="text-warning"> Pending: {{$pending}}</h5> &nbsp;&nbsp;&nbsp;
                <h5 class="text-danger"> Problem: {{$problem}}</h5> &nbsp;&nbsp;&nbsp;
                <h5 class="text-success"> Complete: {{$complete}}</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('task.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>
                <br>
                <div class="row m--margin-bottom-20"  >
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile status1">
                        <label>Status :</label>
                        <div class="input-group">
                            <select name="status1" id='status1' class="form-control">
                                <option value="">-- All --</option>
                                <option value="pending" {{ 'pending' == $status1 ? 'selected' : ''}}>Pending</option>
                                <option value="problem" {{ 'problem' == $status1 ? 'selected' : ''}}>Problem</option>
                                <option value="complete" {{ 'complete' == $status1 ? 'selected' : ''}}>Complete</option>
                            </select>
                        </div>

                    </div>
                    @if(!$status2 == null)
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile status2">
                        <label>Value :</label>
                        <div class="input-group">
                            <select name="status2" id="status2" class="form-control">
                                <option value="">-- All --</option>
                                <option value="kurang" {{ 'kurang' == $status2 ? 'selected' : ''}}>Kurang dari</option>
                                <option value="lebih" {{ 'lebih' == $status2 ? 'selected' : ''}}>Lebih Dari</option>
                                <option value="sama" {{ 'sama' == $status2 ? 'selected' : ''}}>Sama Dengan</option>
                            </select>
                        </div>

                    </div>
                    @else
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile status2" style="display:none">
                        <label>Value :</label>
                        <div class="input-group">
                            <select name="status2" id="status2" class="form-control">
                                <option value="">-- All --</option>
                                <option value="kurang">Kurang dari</option>
                                <option value="lebih">Lebih Dari</option>
                                <option value="sama">Sama Dengan</option>
                            </select>
                        </div>

                    </div>
                    @endif

                    @if(!$searchValue == null)
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile searchValue">
                        <label>Search Value</label>
                    <input name="searchValue" value="{{$searchValue}}" id="searchValue" type="number" class="form-control"  placeholder="Search Message">
                    </div>
                    @else
                    <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile searchValue" style="display:none">
                        <label>Search Value</label>
                        <input name="searchValue" id="searchValue"  type="number" class="form-control"  placeholder="Search Value">
                    </div>
                    @endif

                </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 Task</th>
                        <th>Pending</th>
                        <th>Problem</th>
                        <th>Complete</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();
        });

        // $('.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>
        $(document).on('click', '.reset', function(){
            reset();
        })

        function reset(){
            $('#searchOutlet').val('').trigger('change');
            $('#date_start').val('');
            $('#date_end').val('');
            window.location.href = '{{ route("task.daily") }}';
        }
        // 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('task.daily.table')}}?date_start={{$date_start}}&date_end={{$date_end}}&searchOutlet={{$searchOutlet}}&status1={{$status1}}&status2={{$status2}}&value={{$searchValue}}",
                columns: [
                    // {data: 'DT_RowIndex', name: 'id', searchable: false, orderable: false},
                    {data: 'name', name: 'name'},
                    {data: 'date', name: 'date'},
                    {data: 'total', name: 'total'},
                    {data: 'pending', name: 'pending'},
                    {data: 'problem', name: 'problem'},
                    {data: 'complete', name: 'completeate'},
                    {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