@extends('layouts.app')
@section('content')
    @if( Auth::user()->id != 38604)
        <div class="row">
            <div class="col-md-12">
                <form class="form-inline" action="{{ route('sku.export') }}" method="post">
                    @csrf
                    <div class="form-group">
                        <label class="sr-only" for="dateRange">Date Range</label>
                        <input type="text" name="dateRange" id="dateRange" class="form-control"
                               value="{{old('dateRange')}}" autocomplete="off" placeholder="Search for date ">
                    </div>
                    <button type="submit" class="btn btn-primary">Export Sku Report</button>
                </form>
            </div>
        </div>
    @endif
    <form class="form-inline">
        <div class="row" style="margin-bottom: 15px;margin-top: 15px;">

            <div class="col-md-12">
                <div class="form-group ">
                    <label class="sr-only" for="sku">Sku</label>
                    <input type="text" class="form-control" id="sku" name="sku" placeholder="Sku"
                           value="{{ request('sku') }}">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="variant">Variant</label>
                    <input type="text" class="form-control" id="variant" name="variant" placeholder="Variant"
                           value="{{ request('variant') }}">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="product_name">Variant</label>
                    <input type="text" class="form-control" id="product_name" name="product_name"
                           placeholder="Product name"
                           value="{{ request('product_name') }}">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="variant">Variant</label>
                    @include('components.seller-filter')
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12 ">
                <div class="form-group">
                    <label class="sr-only" for="qty_order">Quantity Order</label>
                    <select name="qty_order" id="qty_order" class="form-control">
                        <option value="" style="display: none;">Quantity Order</option>
                        <option value="asc">ASC</option>
                        <option value="desc">Desc</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="per_page_item">Per Page</label>
                    <select name="per_page_item" id="per_page_item" class="form-control">
                        <option value="" style="display: none">Per Page</option>
                        <option value="25" @if(request('per_page_item') == 25) selected @endif >25</option>
                        <option value="50" @if(request('per_page_item') == 50) selected @endif >50</option>
                        <option value="100" @if(request('per_page_item') == 100) selected @endif >100</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="sr-only" for="product_status">Product Status</label>
                    <select name="product_status" id="product_status" class="form-control">
                        <option value="" style="display: none">Product Status</option>
                        <option value="1" @if(request('product_status') == '1') selected @endif >Published</option>
                        <option value="0" @if(request('product_status') == '0') selected @endif >Unpublished</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">Search</button>
                <a href="{{route('sku.index')}}" class="btn btn-warning">Reset</a>
            </div>
        </div>
    </form>
    <div class="row " style="margin-top: 15px !important;">
        <div class="col-lg-12 ">
            <div class="panel panel-primary">
                <div class="panel-heading" style="padding: 10px 15px !important;">Skus Listing</div>
                <div class="panel-body">
                    @include('components.alert')

                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>S.No.</th>
                            <th>Name</th>
                            <th>Variant</th>
                            <th>Sku</th>
                            <th>Price</th>
                            <th>Category</th>
                            <th>Subcategory</th>
                            <th>Seller</th>
                            <th>Qty</th>
                            <th>Added Date</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($skus as $sku)
                            <tr>
                                <td>{{ $skus->firstItem() + $loop->index }}</td>
                                <td>
                                    <a target="_blank"
                                       href="{{ route('product', $sku->product->slug) }}">{{ $sku->product->name }}</a>
                                    @if($sku->product->published == 1)
                                        <i class="fa fa-check text-success" data-toggle="tooltip" title="Published"></i>
                                    @else
                                        <i class="fa fa-ban text-danger" data-toggle="tooltip" title="Unpublished"></i>
                                    @endif
                                </td>
                                <td>{{ $sku->variant }}</td>
                                <td>{{ $sku->sku }}</td>
                                <td>{{ $sku->price }}</td>
                                <td>{{ $sku->product->category->name ?? null }}</td>
                                <td>{{ $sku->product->subcategory->name ?? null }}</td>
                                <td>{{ $sku->product->productSeller->name ?? null }}</td>
                                <td>{{ $sku->qty }}</td>
                                <td>{{ $sku->created_at }}</td>
                                <td>
                                    <div class="btn-group btn-group-xs" role="group" aria-label="...">
                                        <a @if( Auth::user()->id != 38604) href="{{ route('sku.edit', $sku) }}"
                                           @endif class="btn btn-primary"
                                           data-toggle="tooltip" title="Update Inventory"><i
                                                class="fa fa-edit"></i></a>
                                        @if(auth()->user()->user_type == 'admin')
                                            <button type="button" class="btn btn-danger" data-toggle="modal"
                                                    data-target="#deleteSku{{$sku->id}}">
                                                <i class="fa fa-trash"></i>
                                            </button>

                                            <div class="modal fade" id="deleteSku{{$sku->id}}" tabindex="-1"
                                                 role="dialog" aria-labelledby="myModalLabel">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <form action="{{ route('sku.destroy', $sku) }}" method="post">
                                                            @csrf
                                                            @method('Delete')
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <h4 class="modal-title" id="myModalLabel">Delete
                                                                    Record</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                Are you sure want to delete this record?
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default"
                                                                        data-dismiss="modal">Close
                                                                </button>
                                                                <button type="submit" class="btn btn-danger">Delete
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8">No Record(s) found!</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                    {{ $skus->appends(request()->input()) }}
                </div>
            </div>
        </div>
    </div>

@endsection

@push('css')
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
@push('script')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function () {
            let dateRange = $('input[name="dateRange"]');
            dateRange.daterangepicker({
                autoUpdateInput: false,
                maxDate: new Date(),
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            dateRange.on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            dateRange.on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
            });

        });
    </script>
@endpush