@extends('layouts.master')
@section('title', 'User')
@push('css')
@endpush

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <form method="POST" action="{{ route('user.product.add') }}">
                @csrf
                <div class="form-horizontal">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> product Id </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="product_id" id="txtFirstName" readonly placeholder=""
                                    value="{{ productCode() }}" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Category </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="category" class="chosen-select"
                                    id="demo-chosen-select" tabindex="2">
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> product Name </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="product_name" id="txtFirstName" placeholder="" value=""
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Brand </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="brand" class="chosen-select"
                                    id="demo-chosen-select" tabindex="2">
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->name }}">{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Model </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="model" id="txtFirstName" placeholder="" value=""
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Size </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="size" id="txtFirstName" placeholder="" value=""
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Unit </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="unit" class="chosen-select"
                                    id="demo-chosen-select" tabindex="2">
                                    @foreach ($units as $unit)
                                        <option value="{{ $unit->name }}">{{ $unit->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Vat </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="username" name="vat" placeholder="" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Re-order level </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" id="username" name="reorder_level" placeholder="" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Purchase Rate </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="username" name="purchase_rate" placeholder=""
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Sales Rate </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="username" name="sales_rate" placeholder="" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Wholesale Rate </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="username" name="wholesale_rate" placeholder=""
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Is Service </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="checkbox col-sm-6">
                                <input id="demo-form-checkbox" name="isService" type="checkbox" value="1">
                                <label for="demo-form-checkbox"></label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for=""> </label>
                            <label class="col-sm-1 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                                    class="btn btn-sm btn-success pull-left">
                                    Save
                                    <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="">
        <h3 class="panel-title">product Information</h3>
    </div>
    <div class="col-xl-12">

        <div class="panel">

            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="form-group">
                            <input type="text" class="form-control" id="product_search" onkeyup="search()" placeholder="Search Product">
                          </div>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-primary" onclick="location.reload()">Refresh</a>
                    </div>
                </div>
                <div class="product-list">
                    @include('administration_module.product.product_table')
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('ul.pagination li a').on('click', function(e) {
                e.preventDefault();
                openMyLink($(this).attr('href'));
            });
        });

        function search() {
            var search = $('#product_search').val();
            if (search == '') {
                search = 0;
            }
            openMyLink('{{ url('/administration/product/search') }}/' + search);
        }

        function openMyLink(link) {
            $('.product-list').html('<h1 class="text-center"><strong>Loading...</strong></h1>');
            $.ajax({
                    url: link,
                    type: 'GET',
                })
                .done(function(response) {
                    $('.product-list').html(response);
                });
        }
    </script>
    <script>
        $(document).ready(function() {
            var table = $('#example').DataTable({
                lengthChange: false,
                buttons: ['copy', 'excel', 'pdf', 'colvis']
            });

            table.buttons().container()
                .appendTo('#example_wrapper .col-md-6:eq(0)');
        });
    </script>
@endpush