@extends('backend.layouts.app')
@section('backend_title', 'Admin Damage Create')

@section('backend_content')

    <div class="row">
        <div class="col-lg-7 col-lg-offset-5">
            <div class="card">
                <div class="card-body">
                    <form action="{{ Route('damages.store') }}" method="POST">
                        @csrf
                        <h5 class="font-weight-bolder">Damage Add</h5>
                        <div class="row">
                            <div class="col-sm-6 col-12 mb-2">
                                <label>Invoice Code</label>
                                <input class="form-control" type="text" name="invoice_id" placeholder="" value="{{ old('invoice_id', $newcode) }}" readonly />
                                @error('invoice_id')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-12 mb-2">
                                <label>Damage Date</label>
                                <input class="form-control" type="date" name="damage_date" placeholder="" value="{{ old('damage_date', \Carbon\Carbon::now()->format('Y-m-d')) }}" />
                                @error('damage_date')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-2">
                                <label>Product</label>
                                <select class="form-control" name="product_id" id="product_id">
                                    <option value="" selected>Select Product</option>
                                    @foreach ($products as $item)
                                        <option value="{{ $item->id }}">{{ $item->bn_name != null ? $item->bn_name : $item->en_name }}</option>
                                    @endforeach
                                </select>
                                @error('product_id')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-12 mb-2">
                                <label>Quantity</label>
                                <input class="form-control" type="number" name="quantity" id="quantity" placeholder="" value="{{ old('quantity') }}" />
                                @error('quantity')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-12 mb-2">
                                <label>Damage Price</label>
                                <input class="form-control" type="number" name="damage_price" id="damage_price" placeholder="" value="{{ old('damage_price') }}" />
                                @error('damage_price')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-2">
                                <label>Damage Amount</label>
                                <input class="form-control" type="text" name="damage_amount" id="damage_amount" placeholder="" value="{{ old('damage_amount') }}" readonly />
                                @error('damage_amount')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-2">
                                <label>Description</label>
                                <textarea name="description" class="form-control" rows="4">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="form-text text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <label>Status</label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status1" value="active" checked>
                                    <label class="form-check-label" for="status1">Active</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="status" id="status0" value="inactive">
                                    <label class="form-check-label" for="status0">Inactive</label>
                                </div>
                            </div>
                        </div>

                </div>
                <div class="px-2">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <a class="btn btn-info" href="{{ Route('brands') }}">Return List</a>
                </div>
                </form>
            </div>
        </div>
    </div>
    </div>


@endsection

@section('beackend_scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Function to calculate damage amount
            function calculateDamageAmount() {
                // Get the values of quantity and damage price
                var quantity = parseFloat(document.getElementById('quantity').value) || 0;
                var damagePrice = parseFloat(document.getElementById('damage_price').value) || 0;

                // Calculate the damage amount
                var damageAmount = quantity * damagePrice;

                // Set the damage amount value to the input field
                document.getElementById('damage_amount').value = damageAmount.toFixed(2); // Format to 2 decimal places
            }

            // Attach the function to the input fields' change events
            document.getElementById('quantity').addEventListener('input', calculateDamageAmount);
            document.getElementById('damage_price').addEventListener('input', calculateDamageAmount);

            // Initial calculation if values are already present
            calculateDamageAmount();
        });
    </script>
@endsection