@extends('admin.layout.app')
@section('content')
    <div class="content-wrapper">
        <section class="content py-2">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <form action="" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="card elevation-0">
                                <div class="card-header">
                                    <h3 class="card-title"><i class="fas fa-plus-circle mr-1"></i> Create Product
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                               <label for="image_input_field">Image</label><br>
                                               <img
                                                  id="image_preview"
                                                  src="{{asset('admin/img/cover/placeholder.png')}}"
                                                  style="width: 250px" class="rounded"
                                                  alt="">
                                                  <br>
                                               <input type="file" id="image_input_field" class="mt-3" name="image"><br>
                                               @error('image')
                                               <span class="text-danger text-sm pull-right">{{$errors->first('image')}}</span>
                                               @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="barcode">Barcode</label>
                                                        <input type="text" id="barcode" name="barcode" class="form-control"
                                                               value="{{old('barcode')}}"
                                                               placeholder="Enter Barcode">
                                                        @error('barcode')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('barcode')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="name">Product Name*</label>
                                                        <input type="text" id="name" name="name" class="form-control"
                                                               value="{{old('name')}}"
                                                               placeholder="Enter ">
                                                        @error('name')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('name')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="pack_size">Pack Size*</label>
                                                        <input type="number" id="pack_size" name="pack_size" class="form-control"
                                                               value="{{old('pack_size')}}"
                                                               placeholder="Enter Pack Size">
                                                        @error('pack_size')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('pack_size')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="unit_id">Select Unit</label>
                                                        <select id="unit_id" name="unit_id" class="form-control select2"
                                                                data-placeholder="Select Select Unit">
                                                            <option value="">Select</option>
                                                            @foreach($units as $unit)
                                                                <option
                                                                    value="{{$unit->id}}" {{old('unit_id') == $unit->id?'selected':''}}>{{$unit->name}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('unit_id')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('unit_id')}}</span>
                                                        @enderror
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="purchase_rate">Purchase Price*</label>
                                                        <input type="number" id="purchase_rate" name="purchase_rate" class="form-control"
                                                               value="{{old('purchase_rate')}}"
                                                               placeholder="Enter Purchase Rate" step="0.01">
                                                        @error('purchase_rate')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('purchase_rate')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="sale_rate">Sale Price*</label>
                                                        <input type="number" id="sale_rate" name="sale_rate" class="form-control"
                                                               value="{{old('sale_rate')}}"
                                                               placeholder="Enter Sale Rate" step="0.01">
                                                        @error('sale_rate')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('sale_rate')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="purchase_unit_rate">Purchase Unit Rate</label>
                                                        <input type="number" id="purchase_unit_rate" name="purchase_unit_rate" class="form-control"
                                                               value="{{old('purchase_unit_rate')}}"
                                                               placeholder="Enter Unit Rate" readonly step="0.01">
                                                        @error('purchase_unit_rate')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('purchase_unit_rate')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="sale_unit_rate">Sale Unit Rate</label>
                                                        <input type="number" id="sale_unit_rate" name="sale_unit_rate" class="form-control"
                                                               value="{{old('sale_unit_rate')}}"
                                                               placeholder="Enter Sale Unit Rate" readonly step="0.01">
                                                        @error('sale_unit_rate')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('sale_unit_rate')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="location">Location</label>
                                                        <input type="text" id="location" name="location" class="form-control"
                                                               value="{{old('location')}}"
                                                               placeholder="Enter Location">
                                                        @error('location')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('location')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="opening_pack">Opening Pack</label>
                                                        <input type="number" id="opening_pack" name="opening_pack" class="form-control"
                                                               value="{{old('opening_pack')}}"
                                                               placeholder="Enter Opening Pack" step="0.01">
                                                        @error('opening_pack')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('opening_pack')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="opening_unit">Opening Unit</label>
                                                        <input type="number" id="opening_unit" name="opening_unit" class="form-control"
                                                               value="{{old('opening_unit')}}"
                                                               placeholder="Enter Opening Unit" step="0.01">
                                                        @error('opening_unit')
                                                        <span class="text-danger text-sm pull-right">{{$errors->first('opening_unit')}}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary btn-sm  float-right">
                                        <i class="fa fa-save"></i> Save record
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let packSize = document.getElementById('pack_size');
        let purchaseRate = document.getElementById('purchase_rate');
        let saleRate = document.getElementById('sale_rate');

        let purchaseUnitRate = document.getElementById('purchase_unit_rate');
        let saleUnitRate = document.getElementById('sale_unit_rate');

        function calculateRates() {

            let size = parseFloat(packSize.value) || 0;
            let pRate = parseFloat(purchaseRate.value) || 0;
            let sRate = parseFloat(saleRate.value) || 0;

            if (size > 0) {

                // Purchase Unit Rate
                let purchaseUnit = pRate / size;
                purchaseUnitRate.value = purchaseUnit.toFixed(2);

                // Sale Unit Rate
                let saleUnit = sRate / size;
                saleUnitRate.value = saleUnit.toFixed(2);
            }
        }

        packSize.addEventListener('input', calculateRates);
        purchaseRate.addEventListener('input', calculateRates);
        saleRate.addEventListener('input', calculateRates);

    });
</script>
@endpush