@extends('layouts.app')

@section('title', 'Manage Items Opname')
@section('breadcrumb', 'Manage Items Opname')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection
@section('list-stock-master-data-item', 'kt-menu__item--open kt-menu__item--here')
@section('list-stock-master-opname', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                    </h3>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <a class="btn btn-success text-white" data-toggle="modal" data-target="#importExport">
                        <i class="fa fa-print"></i> Import / Export
                    </a>
                </div>
            </div>
            @include('layouts.notification')
            {{-- begin: hint --}}
            <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> Manage Items Opname
                                </div>
                            </div>
                            <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                                <div class="card-body">
                                    <p>Halaman ini merupakan halaman untuk melakukan setting untuk item opname, yang bisa dilakukan pada halaman ini adalah:</p>
                                    <ul>
                                        <li>Menentukan nama item</li>
                                        <li>Menentukan Visible - Hidden item</li>
                                        <li>Menentukan kategori item</li>
                                        <li>Melakukan drag pada unit untuk menentukan posisi dari item disetiap kategorinya</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end: hint --}}

            <div class="container">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                @php
                                    $c0=0;
                                    $c1=0;
                                    $c2=0;
                                @endphp
                                @foreach ($category as $item)
                                    <a class="nav-link {{($c0++ == 0) ? 'active' : '' }}" id="v-category-{{$item['id']}}-tab" data-toggle="pill" href="#v-category-{{$item['id']}}" role="tab" aria-controls="v-category-{{$item['id']}}" aria-selected="{{($c1++ == 0) ? 'true' : 'false' }}">{{$item['category']}}</a>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-md-9">
                            <form action="{{route('stock.data.stock.order.update')}}" method="POST">
                            @csrf
                            <div class="tab-content" id="v-pills-tabContent">
                                @foreach ($category as $item)
                                    <div class="tab-pane fade {{($c2++ == 0) ? 'show active' : '' }}" id="v-category-{{$item['id']}}" role="tabpanel" aria-labelledby="v-category-{{$item['id']}}-tab">
                                        <table class="datatable" class="table table-hover" width="100%">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>SKU</th>
                                                    <th>Name</th>
                                                    <th>Status Order</th>
                                                    <th>Category</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($item['brand_items'] as $val)
                                                    <tr>
                                                        <td><i class="fa fa-sort"></i></td>
                                                        <td>
                                                            {{$val['accurate_code']}}
                                                        </td>
                                                        <td>
                                                            <input type="hidden" name="item_id[]" value="{{$val['id']}}">
                                                            <input class="form-control" type="text" name="item_name[]" value="{{$val['name']}}">
                                                            <span style="display:none;">{{$val['name']}}</span>
                                                        </td>
                                                        <td>
                                                            <select name="status_opname[]" class="status_opname" style="width:100%">
                                                                <option value="1" {{($val['is_opname'] == 1) ? 'selected' : ''}}> Visible</option>
                                                                <option value="0" {{($val['is_opname'] == 0) ? 'selected' : ''}}>Hidden</option>
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <select name="item_category[]" class="item_category" style="width:100%">
                                                                @foreach ($category as $item_category)
                                                                    <option value="{{$item_category['id']}}"  {{($val['id_brand_category'] == $item_category['id']) ? 'selected' : ''}}>{{$item_category['category']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endforeach
                            </div>
                            <div class="col-md-12 mt-4">
                                <div class="pull-right">
                                    <button type="submit" class="btn btn-primary" id="save"> Save</button>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

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


    {{-- start modal --}}
    <div class="modal fade" id="importExport" tabindex="-1" role="dialog" aria-labelledby="importExportLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="importExportLabel">
                    <i class="fa fa-print"></i> Import / Export
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <form action="{{route('stock.data.stock.opname.import')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div>
                        <label>Export Item Order</label>
                        <a href="{{route('stock.data.stock.opname.export')}}" class="badge badge-success"><i class="fa fa-print"></i> Export</a>
                    </div>
                    <div class="form-group">
                        <label>Import file</label>
                        <input type="file" class="form-control" name="file">
                    </div>
                    <div class="form-group">
                        <label>Master PIN</label>
                        <input type="password" class="form-control" name="password" placeholder="******" maxlength="6" required>
                    </div>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $(document).ready(function() {
            $('.item_category').select2();
            $('.status_opname').select2();
        });
    </script>
    <script src="{{asset('js/custom/jquery-sortable.js')}}"></script>
    <script>
        $( function() {
            $('tbody').sortable();
        } );
    </script>
    <script>
        $( "#save" ).click(function() {
            $('#loading').show();
        });
    </script>
@endsection