@extends('admin.admin_master')
@section('admin')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Add Product Page </h4><br><br>
                            <form method="post" action="{{ route('product.store') }}" id="myForm">
                                @csrf
                                <div class="row">
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-2 col-form-label">Product Name
                                        </label>
                                        <div class="form-group col-sm-10">
                                            <input name="name" class="form-control" type="text">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-2 col-form-label">Description
                                        </label>
                                        <div class="form-group col-sm-10">
                                            <textarea name="description" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <!-- end row -->

                                    {{-- 
                                    <div class="row mb-3">
                                        <label class="col-sm-2 col-form-label">Supplier Name </label>
                                        <div class="col-sm-10">
                                            <select name="supplier_id" class="form-select"
                                                aria-label="Default select example">
                                                <option selected="">Open this select menu</option>
                                                @foreach ($supplier as $supp)
                                                    <option value="{{ $supp->id }}">{{ $supp->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> --}}
                                    <!-- end row -->

                                    <div class="row mb-3">
                                        <label class="col-sm-2 col-form-label">Primary Unit Name </label>
                                        <div class="col-sm-10">
                                            <select name="unit_id" id="unit_id" class="form-select"
                                                aria-label="Default select example" onchange="setPunit()">
                                                <option selected="">Open this select menu</option>
                                                @foreach ($unit as $uni)
                                                    <option value="{{ $uni->id }}">{{ $uni->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-2 col-form-label">Alternate Units</label>
                                        <div class="col-sm-10">
                                            <table class="table-sm table-bordered" width="100%"
                                                style="border-color: #ddd;">
                                                <thead>
                                                    <tr>
                                                        <th> Alternate Unit </th>
                                                        <th> = </th>
                                                        <th colspan="2"> Multiply Primary Unit </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <select name="sec_unit_id" class="form-select"
                                                                aria-label="Default select example">
                                                                <option selected="">Open this select menu</option>
                                                                @foreach ($unit as $uni)
                                                                    <option value="{{ $uni->id }}">1
                                                                        {{ $uni->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td> = </td>
                                                        <td>

                                                            <input type="text" class="form-control"
                                                                name="sec_conversion_qty" />

                                                        </td>
                                                        <td>
                                                            <div class="col-sm-12" id="punit_container"
                                                                style="font-weight: bold">

                                                            </div>
                                                        </td>

                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <!-- end row -->
                                    <div class="row mb-3">
                                        <label class="col-sm-2 col-form-label">Category Name </label>
                                        <div class="col-sm-10">
                                            <select name="category_id" class="form-select"
                                                aria-label="Default select example">
                                                <option selected="">Open this select menu</option>
                                                @foreach ($category as $cat)
                                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-2 col-form-label">Opening Stock
                                        </label>
                                        <div class="form-group col-sm-10">
                                            <input name="op_quantity" class="form-control" type="text" value="0">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-2 col-form-label">MRP
                                        </label>
                                        <div class="form-group col-sm-10">
                                            <input name="mrp_price" class="form-control" type="text" value="0">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-2 col-form-label"> Barcode
                                        </label>
                                        <div class="form-group col-sm-10">
                                            <input name="barcode" class="form-control" type="text" value="0">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-2 col-form-label"> HSN / SAC
                                        </label>
                                        <div class="form-group col-sm-10">
                                            <input name="hsn_sac" class="form-control" type="text" value="0">
                                        </div>
                                    </div>
                                    {{-- <div class="row mb-3">
                                        <label class="col-sm-2 col-form-label">Area Price Mapper </label>
                                        <div class="form-group col-sm-12 offset-sm-2">
                                           
                                            <table class="table-sm table-bordered" style="border-color: #ddd;">
                                                <thead>
                                                    <tr>
                                                        <th>Area Name</th>
                                                        <th>Area Code </th>
                                                        <th>Area State </th>
                                                        <th>MRP</th>
                                                        <th>Sale Price </th>

                                                    </tr>
                                                    @foreach ($area as $key => $item)
                                                        <tr>
                                                            <td>{{ $item->name }} </td>
                                                            <td>{{ $item->area_code }} </td>
                                                            <td>{{ $item->state }} </td>
                                                            <input type="hidden" name="area_id[]" value="{{$item->id}}" />
                                                            <td><input type="text" name="areamrp[]" required /> </td>
                                                            <td><input type="text" name="areasale[]" required /> </td>
                                                        </tr>
                                                    @endforeach
                                                </thead>
                                            </table>
                                        </div>
                                    </div> --}}



                                    <!-- end row -->
                                    <div class="row mb-3">
                                        <input type="submit" class="btn btn-info waves-effect waves-light"
                                            style="width:120px" value="Add Product">
                                    </div>
                            </form>



                        </div>
                    </div>
                </div> <!-- end col -->
            </div>



        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#myForm').validate({
                rules: {
                    name: {
                        required: true,
                    },
                    supplier_id: {
                        required: true,
                    },
                    unit_id: {
                        required: true,
                    },
                    category_id: {
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: 'Please Enter Your Product Name',
                    },
                    supplier_id: {
                        required: 'Please Select One Supplier',
                    },
                    unit_id: {
                        required: 'Please Select One Unit',
                    },
                    category_id: {
                        required: 'Please Select One Category',
                    },
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
            });
        });

        function setPunit(ev) {
            document.getElementById("punit_container").innerHTML = $("#unit_id option:selected").text();;
        }
    </script>
@endsection