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

@section('backend_content')

    <div class="row">
        <div class="col-lg-7 col-lg-offset-5">
            <div class="card">
                <div class="card-body">
                    <div>
                        <h5 class="font-weight-bolder">Damage Show</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', $damage->invoice_id) }}" 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', $damage->damage_date) }}" />
                                @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="{{ old('product_id', $damage->damage_items[0]->product_id) }}" {{ $item->id == $damage->damage_items[0]->product_id ? 'selected' : '' }}>{{ $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', $damage->damage_items[0]?->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', $damage->damage_items[0]?->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', $damage->damage_items[0]?->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', $damage->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" {{ $damage->status == '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" {{ $damage->status == 'inactive' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="status0">Inactive</label>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="px-2">
                        <a class="btn btn-primary" href="{{ Route('damages') }}">Ok</a>
                        <a class="btn btn-info" href="{{ Route('damages') }}">Return List</a>
                    </div>
                </div>
            </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