@extends('layouts.app')

@section('title', 'Manage Accurate Item')
@section('breadcrumb', 'Manage Accurate Item')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List Item
    </a>
@endsection
{{-- @section('List Accurate Item', 'kt-menu__item--open kt-menu__item--here') --}}
@section('accurate-items', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet" style="overflow-x: auto" >
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <div class="kt-portlet__head-toolbar">
                    {{-- <form action="http://localhost1/janjijiwa-franchise-view/public/file/" id="searchFile" method="GET"> --}}

                    <form action="{{ route('accurate-items.detail', [$id, $page]) }}" id="search-items" method="GET">
                        <div class="input-group">
                            <input type="text" name="search-code" value="{{ $search_code ?? null }}" class="form-control" placeholder="Search SKU">
                            <input type="text" name="search-items" value="{{ $search_items ?? null}}" class="form-control" placeholder="Search Items">
                            <div class="input-group-append">
                            <button class="btn btn-primary" type="submit">Search</button>
                            </div>
                        </div>
                    </form>

                {{-- </form> --}}
                </div>
            </div>
            <div class="kt-portlet__head-toolbar">
                <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">

                </div>

            </div>
        </div>
        <div class="kt-portlet__body">
            <div class="mb-4">
                <div class="col-md-12">
                    <div class="accordion accordion-toggle-arrow" id="accordion-info">
                        <div class="card" style="border-bottom: 1px solid #ebedf2">
                            <div class="card-header" id="headingOne4">
                                <div class="card-title" data-toggle="collapse" data-target="#collapse-info" aria-expanded="true" aria-controls="collapse-info">
                                    <i class="flaticon-info"></i> List Accurate Item
                                </div>
                            </div>
                            <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                                <div class="card-body">
                                    <ul>
                                        <li>Merupakan list item yang dikelompokan berdasarkan Accurate Code/SKU.</li>
                                        <li>Toggle On/Off berfungsi untuk menampilkan item berdasarkan Brandnya.</li>
                                        <li>Jika Toggle On/Off ter-disable, pastikan item order dan item opname tidak ter-hidden</li>
                                        <li>Tekan tombol <b>Shift+Scroll pada Mouse</b> untuk menggulir tabel secara Horizontal</b></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('layouts.notification')
           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%;overflow-x: auto">
                <thead>
                    <tr>
                        <th>Accurate Code</th>
                        <th>Name</th>
                        @foreach($brand as $key => $value)
                        <th val="{{ $value['id'] }}">{{ $value['name'] }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @if(count($data['list']['data']) > 0)
                    @foreach ($data['list']['data'] as $row => $items)
                        <tr>
                            <td>{{ $items['accurate_code'] }}</td>
                            <td>{{ $items['accurate_name'] }}</td>
                            @foreach ($brand as $key => $value)
                                <td>
                                    <div class='col-3'>
                                    <span class='kt-switch kt-switch-success kt-switch--icon'>
                                        <label>
                                            <input type='checkbox' value="{{ $value['id']}}" code="{{ $items['accurate_code'] }}" class="update-show"
                                                @foreach($data['item'] as $key1 => $value1)
                                                    @if($value1['accurate_code'] == $items['accurate_code'])
                                                    @if($value1['id_brand'] == $value['id'])
                                                        @if($value1['is_show'] == 1)
                                                        checked
                                                        @endif
                                                        @if($value1['id_unit2_order'] == null && $value1['id_unit2_opname'] == null)
                                                        disabled="disabled"
                                                        @endif
                                                    @endif
                                                    @endif
                                                @endforeach name='select'>
                                            <span></span>
                                        </label>
                                    </span>
                                </div></td>
                            @endforeach
                        </tr>
                    @endforeach
                    {{-- {{ $data['list']['data']->links() }} --}}
                    @else
                    <tr>
                        <td colspan="5">No data to display.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            <div class="float-right">


                @if($data['list']['prev_page_url'] == null && $data['list']['next_page_url'] == null)
                    @elseif($data['list']['prev_page_url'] == null)
                    <a href="{{url($data['url'].$data['list']['prev_page_url'])}}" class="btn btn-secondary disabled"> << </a>
                    <a href="{{url($data['url'].$data['list']['next_page_url'])}}" class="btn btn-info"> >> </a>
                    @elseif($data['list']['next_page_url'] == null)
                    <a href="{{url($data['url'].$data['list']['prev_page_url'])}}" class="btn btn-info"> << </a>
                    <a href="{{url($data['url'].$data['list']['next_page_url'])}}" class="btn btn-secondary disabled"> >> </a>
                    @else
                    <a href="{{url($data['url'].$data['list']['prev_page_url'])}}" class="btn btn-info"> << </a>
                    <a href="{{url($data['url'].$data['list']['next_page_url'])}}" class="btn btn-info"> >></a>
                @endif
                &nbsp;&nbsp;&nbsp; Showing {{$data['list']['from']}} to {{$data['list']['to']}} of {{$data['list']['total']}} entries
            </div>


        </div>
    </div>
@endsection

@section('custom-script')
    <script>
      $(document).ready(function(){
          $('.update-show').on('change', function(){
            $('#loading').show();
            if(this.checked)
                var check = 'true';
            else
                var check = 'false';
            var i = $(this).val();
            var u = $(this).attr('code');
            var url = '{{ route("accurate-items.update", [":val", ":code", ":check"]) }}';
            url = url.replace(':val', i),
            url = url.replace(':code', u),
            url = url.replace(':check', check)
            $.ajax({
                type: "POST",
                url: url,
                data :  {"_token" : "{{ csrf_token() }}"},
                success: function (response) {
                            $('#loading').hide();
                            console.log(response);
                            if(response.status == 'success'){
                                swal.fire({
                                    type : 'success',
                                    title : 'Success!',
                                    timer: 5000,
                                    text : 'Data has been saved!'
                                })
                            }
                }
            });
          })
      })
    </script>

@endsection