@extends('layout')

@section('title')
Product
@endsection

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Product</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Product</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        @include('flash-message')
        <div class="card card-default">
            <div class="card-header">
                <div class="card-title">
                    <div class="row align-items-center btn-back">
                        <span class="fas fa-arrow-left"></span>
                        <img class="ml-4" src="{{ Helper::getImage($ImageURLs) }}" alt="" srcset="">
                        <div class="ml-2"><h3 class="card-title">{{ $ProductName }}</h3><br>{{ $InvSKU }}</div>
                    </div>
                </div>
                <div class="card-tools">
                    <button class="btn btn-primary submit">Save Change</button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row"></div>
                    </div>
                    <div class="col-sm-12">
                        <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="basic-info-tab" data-toggle="pill" href="#basic-info" role="tab" aria-controls="basic-info" aria-selected="true">Basic Info</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pricing-tab" data-toggle="pill" href="#pricing" role="tab" aria-controls="pricing" aria-selected="false">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="inventory-tab" data-toggle="pill" href="#inventory" role="tab" aria-controls="inventory" aria-selected="false">Inventory</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="reward-tab" data-toggle="pill" href="#reward" role="tab" aria-controls="reward" aria-selected="false">Reward</a>
                            </li>
                        </ul>
                            
                        <form class="form-horizontal" method="POST" action="{{ route('product-update', $ProductId) }}" id="form-product" enctype="multipart/form-data">
                            @method('PUT')
                            @csrf
                            <div class="tab-content py-4" id="custom-content-below-tabContent">
                                <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-info-tab">
                                    <div class="form-group">
                                        <label for="">Name*</label>
                                        <input type="text" class="form-control form-control-border @error('ProductName') is-invalid @enderror" name="ProductName" value="{{ $ProductName ? $ProductName : '' }}">
                                    </div>
                                    <!-- <div class="form-group">
                                        <label for="">Image</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" name="Image" class="custom-file-input @error('Image') is-invalid @enderror" id="exampleInputFile">
                                                <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                            </div>
                                        </div>
                                    </div> -->
                                    <div class="form-group">
                                        <label for="">URL Image</label>
                                        <input type="text" class="form-control form-control-border @error('ImageURLs') is-invalid @enderror" name="ImageURLs" id="ImageURLs" value="{{ $ImageURLs ? $ImageURLs : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Product URL*</label>
                                        <input type="text" class="form-control form-control-border @error('ProductUrl') is-invalid @enderror" name="ProductUrl" value="{{ $ProductURLs ? $ProductURLs : '' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Description*</label>
                                        <textarea class="form-control form-control-border" name="ProductDescription" id="" rows="5">{{ $ProductDescription ? $ProductDescription : '' }}</textarea>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-sm-6">
                                            <label for="">Category</label>
                                            <select class="form-control form-control-border select2" name="CategoriesId" id="">
                                            `   @foreach(App\Models\Category::where('CategoryFor', 'product')->get() as $cat)
                                                    <option value="{{$cat->Id}}" {{ $cat->Id == $CategoriesId ? "selected" : "" }}>{{$cat->CategoryName}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label for="">Category</label>
                                            <select class="form-control form-control-border select2" multiple="multiple" name="TagId[]" id="">
                                                @if(!is_null($TagId))
                                                    @foreach(App\Models\Tags::all() as $tag)
                                                        <option value="{{$tag->Id}}" {{ in_array($tag->Id, json_decode($TagId)) ? "selected" : "" }}>{{$tag->TagsName}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
                                    <div class="form-row">
                                        <div class="form-group col-sm-6">
                                            <label for="">Price</label>
                                            <input class="form-control form-control-border" type="number" name="Price" id="Price" value="{{ $Price ? intval($Price) : 0 }}">
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label for="">Unit</label>
                                            <select class="form-control form-control-border" name="UnitId" id="UnitId">
                                                <option value="Pcs">Pcs</option>
                                                <option value="Hour">Hour</option>
                                                <option value="Day">Day</option>
                                                <option value="Month">Month</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-sm-4">
                                            <label for="">Discount Type</label>
                                            <select class="form-control form-control-border" name="DiscType" id="DiscType">
                                                <option value="Percentage" {{ intval($DiscountPctg) > 0 ? 'selected' : '' }}>Percentage</option>
                                                <option value="Nominal" {{ intval($DiscountRp) > 0 ? 'selected' : '' }}>Nominal</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-4">
                                            <label for="">Discount Value</label>
                                            <input class="form-control form-control-border price-component" type="number" name="DiscountVal" id="DiscountVal" value="{{ intval($DiscountPctg) > 0 ? intval($DiscountPctg) : intval($DiscountRp) }}">
                                        </div>
                                        <div class="form-group col-sm-4">
                                            <label for="">Price After Discount</label>
                                            <input class="form-control form-control-border" type="number" name="PriceAfterDiscount" id="PriceAfterDiscount" value="{{$PriceAfterDiscount ? intval($PriceAfterDiscount) : 0 }}" readonly>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-sm-8">
                                            <label for="">Tax Percentage</label>
                                            <div class="input-group input-group-border mb-3">
                                                <input type="number" class="form-control form-control-border" name="TaxPctg" id="TaxPctg" value="{{$TaxPctg ? intval($TaxPctg) : 0 }}">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="form-group col-sm-">
                                            <label for="">Tax</label>
                                            <input class="form-control form-control-border price-component" type="number" name="TaxRp" id="TaxRp">
                                        </div> -->
                                        <div class="form-group col-sm-4">
                                            <label for="">Price After Tax</label>
                                            <input class="form-control form-control-border" type="number" name="PriceWithTax" id="PriceWithTax" value="{{$PriceWithTax ? intval($PriceWithTax) : 0 }}" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="inventory" role="tabpanel" aria-labelledby="inventory-tab">
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">SKU</label>
                                            <input type="text" class="form-control form-control-border" name="InvSKU" value="{{ $InvSKU ? $InvSKU : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Brand</label>
                                            <input type="text" class="form-control form-control-border" name="InvBrand" value="{{ $InvBrand ? $InvBrand : '' }}">
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Quantity</label>
                                            <input type="number" class="form-control form-control-border" name="InvQty" value="{{ $InvQty ? $InvQty : '' }}">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col">
                                            <label for="">Width</label>
                                            <div class="input-group input-group-border mb-3">
                                                <input type="number" class="form-control form-control-border" name="InvWidth" id="InvWidth" value="{{$InvWidth ? intval($InvWidth) : 0 }}">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">Cm</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Height</label>
                                            <div class="input-group input-group-border mb-3">
                                                <input type="number" class="form-control form-control-border" name="InvHeight" id="InvHeight" value="{{$InvHeight ? intval($InvHeight) : 0 }}">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">Cm</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Depth</label>
                                            <div class="input-group input-group-border mb-3">
                                                <input type="number" class="form-control form-control-border" name="InvDepth" id="InvDepth" value="{{$InvDepth ? intval($InvDepth) : 0 }}">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">Cm</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col">
                                            <label for="">Weight</label>
                                            <div class="input-group input-group-border mb-3">
                                                <input type="number" class="form-control form-control-border" name="InvWeight" id="InvWeight" value="{{$InvWeight ? intval($InvWeight) : 0 }}">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">Gr</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Extra Shipping Fee</label>
                                        <input type="number" class="form-control form-control-border" name="InvShippingFee" value="{{ $InvShippingFee ? intval($InvShippingFee) : '' }}">
                                    </div>
                                    <div class="d-inline">
                                        <input type="checkbox" name="FlgActive" {{ $FlgActive ? 'checked' : '' }} data-bootstrap-switch>
                                        <label class="ml-2" for=""> Is Active</label>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="reward" role="tabpanel" aria-labelledby="reward-tab">
                                    <div class="form-group">
                                        <label for="">Point</label>
                                        <input type="text" class="form-control form-control-border" name="RewardPoint" value="{{ $RewardPoint ? intval($RewardPoint) : '' }}">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script>
    $(document).on('click', '.submit', function(){
        $('#form-product').trigger('submit')
    })

    // $('#form-product').on('submit', function(e){
    //     e.preventDefault()
    //     $.ajax({
    //         url: $(this).attr('action'),
    //         type: "POST",
    //         data: new FormData(this),
    //         dataType: "JSON",
    //         processData: false,
    //         contentType: false,
    //         cache: false,
    //         success: function(res) {
    //             location.reload()
    //         }
    //     })
    // })

    $(document).on('change','#DiscountVal', function(){
        let discType = $('#DiscType').val()
        let price = parseInt($('#Price').val())
        let discVal = $(this).val()
        let newPrice = 0

        switch (discType) {
            case 'Percentage':
                newPrice = price - (price * discVal / 100)
                break;
            default:
                newPrice = price - discVal
                break;
        }

        $('#PriceAfterDiscount').val(newPrice)
    })

    $(document).on('change','#TaxPctg', function(){
        let newPrice = 0
        let price = parseInt($('#Price').val())
        let discountPrice = $('#PriceAfterDiscount').val() == "" ? 0 : parseInt($('#PriceAfterDiscount').val())
        let taxVal = parseInt($(this).val())

        if(discountPrice > 0) newPrice = discountPrice + (discountPrice * taxVal / 100)
        else newPrice = price + (price * taxVal / 100)

        $('#PriceWithTax').val(newPrice)
    })
</script>
@endsection