@extends('admin.layouts.app')

@section('title', 'Add fuel type')

@section('content')
    <h1>Add fuel type</h1>

    <div class="card">
        <form method="POST" action="{{ route('admin.fuel-types.store') }}">
            @csrf

            <label for="name">Name</label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" placeholder="e.g. Petrol 91" required>

            <label for="price_riel">Export price per liter (៛) &mdash; what customers pay</label>
            <input type="number" id="price_riel" name="price_riel" step="1" min="1" value="{{ old('price_riel') }}">

            <label for="price_usd">Export price per liter (USD)</label>
            <input type="number" id="price_usd" name="price_usd" step="0.0001" min="0" value="{{ old('price_usd') }}">

            <input type="hidden" name="entered_in" id="entered_in" value="{{ old('entered_in', 'khr') }}">

            <p style="font-size:12.5px; color:var(--text-muted); margin:-6px 0 20px;">
                Rate: $1 = ៛{{ number_format($rielRate) }}.
            </p>

            <label for="import_price_riel">Import price per liter (៛) &mdash; what you pay the supplier</label>
            <input type="number" id="import_price_riel" name="import_price_riel" step="1" min="0" value="{{ old('import_price_riel') }}">

            <label for="import_price_usd">Import price per liter (USD)</label>
            <input type="number" id="import_price_usd" name="import_price_usd" step="0.0001" min="0" value="{{ old('import_price_usd') }}">

            <input type="hidden" name="import_entered_in" id="import_entered_in" value="{{ old('import_entered_in', 'khr') }}">

            <button type="submit" class="btn" style="width:100%;">Save</button>
        </form>
    </div>

    <script>
        (function () {
            const rate = {{ $rielRate }};

            const exportRiel = document.getElementById('price_riel');
            const exportUsd = document.getElementById('price_usd');
            const exportEnteredIn = document.getElementById('entered_in');

            exportRiel.addEventListener('input', function () {
                exportEnteredIn.value = 'khr';
                const v = parseFloat(exportRiel.value);
                exportUsd.value = isNaN(v) ? '' : (v / rate).toFixed(4);
            });
            exportUsd.addEventListener('input', function () {
                exportEnteredIn.value = 'usd';
                const v = parseFloat(exportUsd.value);
                exportRiel.value = isNaN(v) ? '' : Math.round(v * rate);
            });

            const importRiel = document.getElementById('import_price_riel');
            const importUsd = document.getElementById('import_price_usd');
            const importEnteredIn = document.getElementById('import_entered_in');

            importRiel.addEventListener('input', function () {
                importEnteredIn.value = 'khr';
                const v = parseFloat(importRiel.value);
                importUsd.value = isNaN(v) ? '' : (v / rate).toFixed(4);
            });
            importUsd.addEventListener('input', function () {
                importEnteredIn.value = 'usd';
                const v = parseFloat(importUsd.value);
                importRiel.value = isNaN(v) ? '' : Math.round(v * rate);
            });
        })();
    </script>
@endsection