@extends('layouts.app')
@section('content')
    <style>
        .required {
            color: #f00
        }

        .home_capital_direct-add span.invalid-feedback {
            position: absolute;
            bottom: 0px;
            font-size: 10px;
            font-weight: 400;
            white-space: initial;
            width: 250px;
            overflow: inherit;
            text-overflow: ellipsis;
            line-height: 12px;
        }

        .required_element {
            border: 1px solid red !important;
        }
    </style>

    <div class="page-container">
        <div class="main-content">
            <div class="home_capital_direct-add p-5 ml-5 mr-4">
                <h3 class="text-center">Shortages Form</h3>
                <div class="bg-white p-5 mt-5 rounded shadow-sm">
                    <form method="POST" action="{{ route('createpayroll') }}" id="payroll_form" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="row">

                            <div class="col-sm-3">
                                <label>Reporting Person<span class="required"> * </span></label>
                                <input name="reporting_person" id="reporting_person"
                                    class="form-control @error('reporting_person') is-invalid @enderror" type="text"
                                    value="{{ Auth::user()->fname }} {{ Auth::user()->lname }}" placeholder="Write a Name"
                                    required />
                                @error('reporting_person')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-sm-3">
                                <label>Reported Date <span class="required"> * </span></label>
                                <input name="reported_date" id="reported_date"
                                    class="form-control @error('reported_date') is-invalid @enderror" type="date"
                                    value="{{ old('reported_date') }}" max="2025-07-10" required />
                            </div>
                            @if (Auth::user()->roll_id == 1 || Auth::user()->roll_id == 0 || Auth::user()->roll_id == 3)
                                <div class="col-sm-3">
                                    <label>Transport Hub<span class="required"> * </span></label>
                                    <select name="reporting_depot" id="reporting_depot"
                                        class="form-control @error('reporting_depot') is-invalid @enderror" required>
                                        <option value="Melksham"
                                            @if (old('Melksham') == 'Melksham') {{ 'selected' }} @endif>Melksham</option>
                                        <option value="Fradley Park"
                                            @if (old('Fradley Park') == 'Fradley Park') {{ 'selected' }} @endif>Fradley Park
                                        </option>
                                        <option value="Leeds" @if (old('Leeds') == 'Leeds') {{ 'selected' }} @endif>
                                            Leeds</option>
                                    </select>
                                    @error('reporting_depot')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            @else
                                <div class="col-sm-3">
                                    <label>Transport Hub<span class="required"> * </span></label>
                                    <select name="reporting_depot" id="reporting_depot"
                                        class="form-control @error('reporting_depot') is-invalid @enderror" required>
                                        <option value="{{ Auth::user()->reporting_depot }}">
                                            {{ Auth::user()->reporting_depot }}</option>
                                    </select>
                                    @error('reporting_depot')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            @endif
                            @if (Auth::user()->roll_id == 1 || Auth::user()->roll_id == 2 || Auth::user()->roll_id == 3)
                                <div class="col-sm-3 system_tier solar_field">
                                    <label>Customer Site<span class="required"> * </span></label>
                                    <select name="customer_site" id="customer_site"
                                        class="form-control @error('customer_site') is-invalid @enderror" required>
                                        <option value="RR">RR</option>
                                        <option value="CR">CR</option>
                                        <option value="TD">TD</option>
                                        <option value="WT">WT</option>
                                        <option value="SH">SH</option>
                                        <option value="BG">BG</option>
                                        <option value="DS">DS</option>
                                        <option value="VT">VT</option>
                                        <option value="FP">FP</option>
                                        <option value="MM">MM</option>
                                        <option value="DT">DT</option>
                                        <option value="EL">EL</option>
                                        <option value="HT">HT</option>
                                        <option value="KD">KD</option>
                                        <option value="LT">LT</option>
                                        <option value="AW">AW</option>
                                    </select>
                                    @error('customer_site')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            @else
                                <div class="col-sm-3 system_tier solar_field">
                                    <label>Customer Site<span class="required"> * </span></label>
                                    <select name="customer_site" id="customer_site"
                                        class="form-control @error('customer_site') is-invalid @enderror" required>
                                        <option value="{{ Auth::user()->sites }}">{{ Auth::user()->sites }}</option>
                                    </select>
                                    @error('customer_site')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            @endif


                            <div class="col-sm-3">
                                <label>Customer Name:<span class="required"> * </span></label>
                                <input name="customer_name" id="customer_name"
                                    class="form-control @error('customer_name') is-invalid @enderror" type="text"
                                    value="{{ old('customer_name') }}" placeholder="Write customer name" required />
                                @error('customer_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-sm-3 hide_real_estate solar_field">
                                <label>UID<span class="required"> * </span></label>
                                <input name="uid" id="uid"
                                    class="form-control @error('uid') is-invalid @enderror" type="number"
                                    value="{{ old('customer_site') }}" placeholder="UID" min="0" required />
                                @error('uid')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-sm-3 s">
                                <label>Doc Ref<span class="required"> * </span></label>
                                <input name="doc_ref" id="doc_ref" class="form-control" value="{{ old('doc_ref') }}"
                                    type="text" placeholder="" required />
                            </div>
                            <div class="col-sm-3 s">
                                <label>Delivery Date<span class="required"> * </span></label>
                                <input name="delivery_date" id="delivery_date" class="form-control"
                                    value="{{ old('delivery_date') }}" type="date" placeholder="" required />
                            </div>

                            <div class="col-sm-3" id="wcl_participation_block">
                                <label>Reasons<span class="required"> * </span></label>
                                <select name="reason" id="reason"
                                    class="form-control @error('reason') is-invalid @enderror" required onchange="toggleCodeField()">
                                    <option value="" disabled="" selected="">Please Select</option>
                                    <option value="BIT" @if (old('reason') == 'BIT') {{ 'selected' }} @endif>
                                        BIT</option>
                                    <option value="BIW" @if (old('reason') == 'BIW') {{ 'selected' }} @endif>
                                        BIW</option>
                                    <option value="DAMAGED" @if (old('reason') == 'DAMAGED') {{ 'selected' }} @endif>
                                        DAMAGED</option>
                                    <option value="LIT" @if (old('reason') == 'LIT') {{ 'selected' }} @endif>
                                        LIT</option>
                                    <option value="LIW" @if (old('reason') == 'LIW') {{ 'selected' }} @endif>
                                        LIW</option>
                                    <option value="MISPICK"
                                        @if (old('reason') == 'MISPICK') {{ 'selected' }} @endif>MISPICK</option>
                                    <option value="NLW" @if (old('reason') == 'NLW') {{ 'selected' }} @endif>
                                        NLW</option>
                                    <option value="NON ARRIVAL"
                                        @if (old('reason') == 'NON ARRIVAL') {{ 'selected' }} @endif>NON ARRIVAL</option>
                                    <option value="OVERS" @if (old('reason') == 'OVERS') {{ 'selected' }} @endif>
                                        OVERS</option>
                                    <option value="SHORT" @if (old('reason') == 'SHORT') {{ 'selected' }} @endif>
                                        SHORT</option>
                                    <option value="STOCK" @if (old('reason') == 'STOCK') {{ 'selected' }} @endif>
                                        Stock take Adjustment</option>
                                    <option value="Other" @if (old('reason') == 'Other') {{ 'selected' }} @endif>
                                        Other</option>
                                </select>
                            </div>
                            <div class="col-sm-3 s" id="generate_codes"style="display: none">
                                <label>Generate Claim<span class="required"> * </span></label>
                                <a onclick="generateCode()" class="btn btn-primary" style="margin-top: 6px;border-radius: 5px !important;padding: 6px !important;color: #fff !important;background-color: #243487 !important;border-color: #243487 !important;">
                                    Generate Claim</a>

                            </div>
                            <div class="col-sm-3 s" id="generate_code"style="display: none">
                                <label>Claim Ref<span class="required"> * </span></label>
                                <input type="text" id="codeField" name="generate_code" value="" style="
    height: 50px !important;
">
                            </div>

                            <div class="col-sm-3 s" id="other_reason_box"style="display: none">
                                <label>Other Reason<span class="required"> * </span></label>
                                <input name="other_reason" id="other_reason" class="form-control"
                                    value="{{ old('other_reason') }}" type="text" placeholder="" />
                            </div>
                            <div class="col-sm-3">
                                <label>Company/Haulier Liability<span class="required"> * </span></label>
                                <select name="company_liability" id="company_liability"
                                    class="form-control @error('company_liability') is-invalid @enderror" required>
                                    <option value="" disabled="" selected="">Please Select</option>
									 @foreach($company as $comp)
										<option value="{{ $comp->id }}" {{ old('company_liability') == $comp->id ? 'selected' : '' }}>
											{{ $comp->name }}
										</option>
									@endforeach
                                    
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <label>Transport Item Code<span class="required"> * </span></label>
                                <select name="transport_item_code" id="transport_item_code"
                                    class="form-control @error('transport_item_code') is-invalid @enderror" required>

                                    <option value="" disabled="" selected="">Select Driver From Below
                                    </option>
                                     @foreach($transport as $transports)
										<option value="{{ $transports->id }}" {{ old('transport_item_code') == $transports->id ? 'selected' : '' }}>
											{{ $transports->name }}
										</option>
									@endforeach
                                </select>
                            </div>
                            @if (Auth::user()->roll_id == 3 || Auth::user()->roll_id == 1)
                                <div class="col-sm-3 s">
                                    <label>Customer Invoice Reference<span class="required"> </span></label>
                                    <input name="customer_invoice_reference" id="customer_invoice_reference"
                                        class="form-control" value="{{ old('customer_invoice_reference') }}"
                                        type="text" placeholder="" />
                                </div>
                                <div class="col-sm-3 s">
                                    <label>Customer Invoice Date<span class="required"> </span></label>
                                    <input name="customer_invoice_date" id="customer_invoice_date" class="form-control"
                                        value="{{ old('customer_invoice_date') }}" type="date" placeholder="" />
                                </div>
                                <div class="col-sm-3 s">
                                    <label>Customer Invoice Value<span class="required"> </span></label>
                                    <input name="invoice_value" id="invoice_value" class="form-control"
                                        value="{{ old('invoice_value') }}" type="text" placeholder="" />
                                </div>
                                <div class="col-sm-3 s">
                                    <label>Recoverable Amount<span class="required"> </span></label>
                                    <input name="recoverable_amount" id="recoverable_amount" class="form-control"
                                        value="{{ old('recoverable_amount') }}" type="number" min="0"
                                        placeholder="" />
                                </div>
                                <div class="col-sm-3 s">
                                    <label>LCB Liability<span class="required"> </span></label>
                                    <input name="LCB_liability" id="LCB_liability" class="form-control"
                                        value="{{ old('LCB_liability') }}" type="number" step="0.01" min="0"
                                        placeholder="0.00" />
                                </div>
                                <div class="col-sm-3">
                                    <label>Sage Nominal Code<span class="required"> * </span></label>
                                    <select name="sage_nominal_code" id="sage_nominal_code"
                                        class="form-control @error('sage_nominal_code') is-invalid @enderror" required>
                                        <option value="" disabled="" selected="">Please Select</option>
                                        <option value="6090111000"
                                            @if (old('sage_nominal_code') == '6090111000') {{ 'selected' }} @endif>6090111000
                                        </option>
                                        <option value="6090112000"
                                            @if (old('sage_nominal_code') == '6090112000') {{ 'selected' }} @endif>6090112000
                                        </option>
                                        <option value="6090200000"
                                            @if (old('sage_nominal_code') == '6090200000') {{ 'selected' }} @endif>6090200000
                                        </option>
                                        <option value="6090201000"
                                            @if (old('sage_nominal_code') == '6090201000') {{ 'selected' }} @endif>6090201000
                                        </option>
                                        <option value="6090202000"
                                            @if (old('sage_nominal_code') == '6090202000') {{ 'selected' }} @endif>6090202000
                                        </option>
                                        <option value="6090203000"
                                            @if (old('sage_nominal_code') == '6090203000') {{ 'selected' }} @endif>6090203000
                                        </option>
                                        <option value="6090206000"
                                            @if (old('sage_nominal_code') == '6090206000') {{ 'selected' }} @endif>6090206000
                                        </option>
                                        <option value="6090207000"
                                            @if (old('sage_nominal_code') == '6090207000') {{ 'selected' }} @endif>6090207000
                                        </option>
                                        <option value="6090208000"
                                            @if (old('sage_nominal_code') == '6090208000') {{ 'selected' }} @endif>6090208000
                                        </option>
                                        <option value="6090210000"
                                            @if (old('sage_nominal_code') == '6090210000') {{ 'selected' }} @endif>6090210000
                                        </option>
                                        <option value="6090211000"
                                            @if (old('sage_nominal_code') == '6090211000') {{ 'selected' }} @endif>6090211000
                                        </option>
                                        <option value="7420100000"
                                            @if (old('sage_nominal_code') == '7420100000') {{ 'selected' }} @endif>7420100000
                                        </option>
                                        <option value="7420101000"
                                            @if (old('sage_nominal_code') == '7420101000') {{ 'selected' }} @endif>7420101000
                                        </option>
                                        <option value="7420102000"
                                            @if (old('sage_nominal_code') == '7420102000') {{ 'selected' }} @endif>7420102000
                                        </option>
                                        <option value="7420103000"
                                            @if (old('sage_nominal_code') == '7420103000') {{ 'selected' }} @endif>7420103000
                                        </option>
                                        <option value="7420104000"
                                            @if (old('sage_nominal_code') == '7420104000') {{ 'selected' }} @endif>7420104000
                                        </option>
                                        <option value="7420105000"
                                            @if (old('sage_nominal_code') == '7420105000') {{ 'selected' }} @endif>7420105000
                                        </option>
                                        <option value="7420106000"
                                            @if (old('sage_nominal_code') == '7420106000') {{ 'selected' }} @endif>7420106000
                                        </option>
                                        <option value="7420107000"
                                            @if (old('sage_nominal_code') == '7420107000') {{ 'selected' }} @endif>7420107000
                                        </option>
                                        <option value="7420108000"
                                            @if (old('sage_nominal_code') == '7420108000') {{ 'selected' }} @endif>7420108000
                                        </option>
                                        <option value="7420109000"
                                            @if (old('sage_nominal_code') == '7420109000') {{ 'selected' }} @endif>7420109000
                                        </option>
                                        <option value="7420110000"
                                            @if (old('sage_nominal_code') == '7420110000') {{ 'selected' }} @endif>7420110000
                                        </option>
                                        <option value="7420111000"
                                            @if (old('sage_nominal_code') == '7420111000') {{ 'selected' }} @endif>7420111000
                                        </option>
                                        <option value="7420112000"
                                            @if (old('sage_nominal_code') == '7420112000') {{ 'selected' }} @endif>7420112000
                                        </option>
                                        <option value="7420113000"
                                            @if (old('sage_nominal_code') == '7420113000') {{ 'selected' }} @endif>7420113000
                                        </option>
                                        <option value="7420114000"
                                            @if (old('sage_nominal_code') == '7420114000') {{ 'selected' }} @endif>7420114000
                                        </option>
                                        <option value="7420115000"
                                            @if (old('sage_nominal_code') == '7420115000') {{ 'selected' }} @endif>7420115000
                                        </option>
                                        <option value="7420202000"
                                            @if (old('sage_nominal_code') == '7420202000') {{ 'selected' }} @endif>7420202000
                                        </option>
                                        <option value="7420203000"
                                            @if (old('sage_nominal_code') == '7420203000') {{ 'selected' }} @endif>7420203000
                                        </option>
                                        <option value="7420206000"
                                            @if (old('sage_nominal_code') == '7420206000') {{ 'selected' }} @endif>7420206000
                                        </option>
                                        <option value="7420207000"
                                            @if (old('sage_nominal_code') == '7420207000') {{ 'selected' }} @endif>7420207000
                                        </option>
                                        <option value="7420208000"
                                            @if (old('sage_nominal_code') == '7420208000') {{ 'selected' }} @endif>7420208000
                                        </option>
                                        <option value="7420210000"
                                            @if (old('sage_nominal_code') == '7420210000') {{ 'selected' }} @endif>7420210000
                                        </option>
                                        <option value="7420211000"
                                            @if (old('sage_nominal_code') == '7420211000') {{ 'selected' }} @endif>7420211000
                                        </option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <label>Claim Status<span class="required"> * </span></label>
                                    <select name="claim_status" id="claim_status"
                                        class="form-control @error('claim_status') is-invalid @enderror" required>

                                        <option value="Entered"
                                            @if (old('claim_status') == 'Entered') {{ 'selected' }} @endif>Entered</option>
                                        <option value="Awaiting Warehouse Confirmation"
                                            @if (old('claim_status') == 'Awaiting Warehouse Confirmation') {{ 'selected' }} @endif>Awaiting
                                            Warehouse Confirmation</option>
                                        <option value="Under Query with Customer"
                                            @if (old('claim_status') == 'Under Query with Customer') {{ 'selected' }} @endif>Under Query with
                                            Customer</option>
                                        <option value="Passed"
                                            @if (old('claim_status') == 'Passed') {{ 'selected' }} @endif>Passed</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <label>Claim Period Passed(Month)<span class="required"> * </span></label>
                                    <select name="claim_period_passed" id="claim_period_passed"
                                        class="form-control @error('claim_period_passed') is-invalid @enderror" required>

                                        <option value="January"
                                            @if (old('claim_period_passed') == 'January') {{ 'selected' }} @endif>January</option>
                                        <option value="February"
                                            @if (old('claim_period_passed') == 'February') {{ 'selected' }} @endif>February
                                        </option>
                                        <option value="March"
                                            @if (old('claim_period_passed') == 'March') {{ 'selected' }} @endif>March</option>
                                        <option value="April"
                                            @if (old('claim_period_passed') == 'April') {{ 'selected' }} @endif>April</option>
                                        <option value="May"
                                            @if (old('claim_period_passed') == 'May') {{ 'selected' }} @endif>May</option>
                                        <option value="June"
                                            @if (old('claim_period_passed') == 'June') {{ 'selected' }} @endif>June</option>
                                        <option value="July"
                                            @if (old('claim_period_passed') == 'July') {{ 'selected' }} @endif>July</option>
                                        <option value="August"
                                            @if (old('claim_period_passed') == 'August') {{ 'selected' }} @endif>August</option>
                                        <option value="September"
                                            @if (old('claim_period_passed') == 'September') {{ 'selected' }} @endif>September
                                        </option>
                                        <option value="October"
                                            @if (old('claim_period_passed') == 'October') {{ 'selected' }} @endif>October
                                        </option>
                                        <option value="November"
                                            @if (old('claim_period_passed') == 'November') {{ 'selected' }} @endif>November
                                        </option>
                                        <option value="December"
                                            @if (old('claim_period_passed') == 'December') {{ 'selected' }} @endif>December
                                        </option>
                                    </select>
                                </div>
                                <div class="col-sm-3 s">
                                    <label>Credit Date<span class="required"> </span></label>
                                    <input name="credit_date" id="credit_date" class="form-control"
                                        value="{{ old('credit_date') }}" type="date" placeholder="" />
                                </div>
                                <div class="col-sm-3 s">
                                    <label>Customer Credit Reference<span class="required"> </span></label>
                                    <input name="customer_credit_reference" id="customer_credit_reference"
                                        class="form-control" value="{{ old('customer_credit_reference') }}"
                                        type="text" placeholder="" />
                                </div>
                                <div class="col-sm-3 s">
                                    <label>Credit Value<span class="required"> </span></label>
                                    <input name="credit_value" id="credit_value" class="form-control"
                                        value="{{ old('credit_value') }}" type="text" placeholder="" />
                                </div>
                            @endif
                            <div class="col-sm-3">
                                <label>Image 1</label>
                                <input id="image" type="file" name="image" class="input-file"accept="image/*">
                            </div>
                            <div class="col-sm-3">
                                <label>Image 2</label>
                                <input id="image" type="file" name="image2" class="input-file"accept="image/*">
                            </div>
                            <div class="col-sm-3">
                                <label>Image 3</label>
                                <input id="image" type="file" name="image3" class="input-file"accept="image/*">
                            </div>
                            <div class="row" id="customFields" style="margin-left: 2px;">
                                <div class="col-sm-2">
                                    <label>Product Code<span class="required custo1"> * </span></label>
                                    <input name="product_code[]" id="product_code"
                                        class="form-control @error('product_code') is-invalid @enderror"
                                        value="{{ old('product_code') }}" type="text" placeholder=""/ required>
                                    @error('product_code')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-2">
                                    <label>Product Description<span class="required custo1"> * </span></label>
                                    <input name="product_description[]" id="product_description"
                                        class="form-control @error('product_description') is-invalid @enderror"
                                        value="{{ old('product_description') }}" type="text" placeholder=""
                                        required />
                                    @error('product_description')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="col-sm-2">
                                    <label>Pack Size<span class="required custo1"> * </span></label>
                                    <input type="text" id="pack_size" name="pack_size[]"
                                        class="form-control @error('pack_size') is-invalid @enderror"
                                        value="{{ old('pack_size') }}" required />
                                    @error('pack_size')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-2">
                                    <label>Cases<span class="required custo1"> * </span></label>
                                    <input type="number" id="cases" name="cases[]"
                                        class="form-control @error('cases') is-invalid @enderror"
                                        value="{{ old('cases') }}" min="0" required />
                                    @error('cases')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-2">
                                    <label>Bottles<span class="required custo1"> * </span></label>
                                    <input id="bottles" name="bottles[]"
                                        class="form-control @error('bottles') is-invalid @enderror" type="number"
                                        value="{{ old('bottles') }}" placeholder="" min="0" required />
                                    @error('bottles')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-2">
                                    <a href="javascript:void(0);" class="addCF btn btn-primary"
                                        style="margin-top: 34px;border-radius: 5px !important;padding: 6px !important;color: #fff !important;background-color: #243487 !important;border-color: #243487 !important;">Add
                                        More</a>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <label>Comment<span class="required"> </span></label>
                                <textarea name="comment" id="comment" rows="5">{{ old('comment') }}</textarea>
                                @error('comment')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-sm-12">
                                <label>Additional Comment<span class="required"> </span></label>
                                <textarea name="additional_comment" id="additional_comment" rows="5">{{ old('additional_comment') }}</textarea>
                                @error('additional_comment')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>


                            <div class="col-lg-12">
                                <button type="submit" id="submitbtn"
                                    class="btn mb-3 btn-block btn-primary btn-lg border-0 mt-3"
                                    style=" background-color: #243487!important; background-image: none !important;">
                                    <!----> Submit
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            const option1 = document.getElementById('reason');
            const select1 = document.getElementById('other_reason_box');
            option1.addEventListener('change', function() {
                if (option1.value == 'Other') {
                    select1.style.display = 'block';
                    $('#other_reason').attr('required', 'required');
                } else {
                    select1.style.display = 'none';
                    $('#other_reason').removeAttr('required');
                }
            });
            $(".addCF").click(function() {
                var product_code = $('#product_code').val();
                var product_description = $('#product_description').val();
                var pack_size = $('#pack_size').val();
                var cases = $('#cases').val();
                var bottles = $('#bottles').val();
                if (!product_code || !product_description || !pack_size || !cases || !bottles) {
                    alert("Please Fill All Fields");
                    return
                }
                $("#customFields").append(
                    '<div class="row hehe" id="customFields" style="margin-left: 2px;"><div class="col-sm-2"><label>Product Code<span class="required">  </span></label><input name="product_code_' +
                    product_code + '" class="form-control" id="customFieldName"  value="' +
                    product_code +
                    '" type="text" placeholder="" required/><input type="hidden" name="product_code[]" value=' +
                    product_code +
                    '></div><div class="col-sm-2"><label>Product Description<span class="required">  </span></label><input name="product_description_' +
                    product_description + '" id="customFieldName" class="form-control" value="' +
                    product_description +
                    '" type="text" placeholder="" required/><input type="hidden" name="product_description[]" value=' +
                    product_description +
                    '></div><div class="col-sm-2"><label>Pack Size<span class="required">  </span></label><input type="text" id="customFieldName"  name="pack_size_' +
                    pack_size + '" class="form-control" value="' + pack_size +
                    '" required/><input type="hidden" name="pack_size[]" value=' + pack_size +
                    '></div><div class="col-sm-2"><label>Cases<span class="required">  </span></label><input type="number" id="customFieldName"  name="cases_' +
                    cases + '" class="form-control" value="' + cases +
                    '" min="0" required/><input type="hidden" name="cases[]" value=' + cases +
                    '></div><div class="col-sm-2"><label>Bottles<span class="required">  </span></label><input id="customFieldName" name="bottles_' +
                    bottles + '" class="form-control" type="number" value="' + bottles +
                    '" placeholder="" min="0" required/><input type="hidden" name="bottles[]" value=' +
                    bottles +
                    '></div><div class="col-sm-2"><a href="javascript:void(0);" class="remCF btn btn-danger" style="margin-top: 36px;">Remove</a></div></div>'
                    );
                $("#product_code").val('');
                $("#product_description").val('');
                $("#pack_size").val('');
                $("#cases").val('');
                $("#bottles").val('');
                //  $('#product_code').removeAttr('required');
                // $('#product_description').removeAttr('required');
                // $('#pack_size').removeAttr('required');
                // $('#cases').removeAttr('required');
                // $('#bottles').removeAttr('required');
                $('.custo1').css('display', 'none');
            });
            $("#customFields").on('click', '.remCF', function() {
                $(this).parent().parent().remove();
            });
            //         $("#customFields").on('click', '.remCF', function() {
            //             var rowCount = $('#customFields').find('.row').length;

            //   // Check if there are more than one rows present
            //   if (rowCount > 1) {
            //     $(this).parents('.hehe').remove();
            //   } else {
            //     alert('At least one record is required.');
            //   }
            //         });
        });
    </script>
    <script>
        function toggleCodeField() {
            var selectedOption = document.getElementById("reason").value;
            var codeField = document.getElementById("generate_code");
            var codeField2 = document.getElementById("generate_codes");
			//alert(selectedOption);
            // Show the input field if the selected option matches
            if (selectedOption === "BIT" || selectedOption === "BIW" || selectedOption === "LIT" || selectedOption ===
                "LIW" || selectedOption === "STOCK") {
                codeField.style.display = "block";
                codeField2.style.display = "block";
            } else {
                codeField.style.display = "none";
                codeField2.style.display = "none";
            }
        }
        function generateCode() {
      // Generate a random 5-digit code
      var code = Math.floor(Math.random() * 90000) + 10000;

      // Set the code value in the text field
      document.getElementById("codeField").value = code;
    }
    </script>
@endsection