{{-- __petrol_egy_calculator.blade.php --}}
<div class="mb-5 rounded p-3" id="calculator">
    <div class="fs-4 py-4 d-flex justify-content-between align-items-center rounded text-light">
        <div class="text-start">
            {{-- <img src="{{ asset('/assets/img/gas--icon.svg') }}" alt="" class="rounded-circle bg-light" width="25"
                height="25"> --}}
            {{ __('main.petrol_calculator') }}
        </div>
        <div class="font-1 text-end font-lg-5 spinner-grow text-light calculator-spinner bg-secondary bg-gradient"></div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="font-1 text-light">
                {{ __('main.selectType') }}
            </div>
            <div class="pt-1">
                <input type="hidden" id="taxAmount" class="text-start form-control"
                    value="0">
                <select id="itemType" class="form-select form-select-md mb-3" required name="">
                    {{-- <option value="" disabled selected>أختر نوعاً</option> --}}
                    @php
                        if(isset($allGasPrices))
                        $petroleumPrice = $allGasPrices;
                    @endphp
                    @foreach ($petroleumPrice as $petrol)
                        <option value="{{ number_format($petrol->price, 2) }}">{{ $petrol->types->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="font-1 text-light">
                {{ __('main.litr_count') }}
            </div>
            <div class="pt-1">
                <input type="number" min="1" max="100000" id="unitsCount"
                    class="form-control text-start" value="1">
            </div>
        </div>
    </div>
    <div class="px-1">
        <div class="text-break text-white mt-3 fs-1 text-center p-4" id="currency-result"></div>
    </div>
</div>