@extends('admin.layouts.app')

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

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

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

            <label for="name">Name</label>
            <input type="text" id="name" name="name" value="{{ old('name', $fuelType->name) }}" 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', (int) $fuelType->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', number_format($fuelType->price_per_liter, 2, '.', '')) }}">

            <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) }}. ៛ is the real price — USD is calculated from it.
            </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', (int) $fuelType->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', number_format($fuelType->import_price_riel / $rielRate, 2, '.', '')) }}">

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

            <p id="margin-hint" style="font-size:12.5px; color:var(--text-muted); margin:-6px 0 16px;">
                Margin: ៛{{ number_format($fuelType->price_riel - $fuelType->import_price_riel, 0) }}/L
            </p>

            <button type="submit" class="btn" style="width:100%;">Update</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);
                updateMargin();
            });
            exportUsd.addEventListener('input', function () {
                exportEnteredIn.value = 'usd';
                const v = parseFloat(exportUsd.value);
                exportRiel.value = isNaN(v) ? '' : Math.round(v * rate);
                updateMargin();
            });

            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);
                updateMargin();
            });
            importUsd.addEventListener('input', function () {
                importEnteredIn.value = 'usd';
                const v = parseFloat(importUsd.value);
                importRiel.value = isNaN(v) ? '' : Math.round(v * rate);
                updateMargin();
            });

            function updateMargin() {
                const exp = parseFloat(exportRiel.value) || 0;
                const imp = parseFloat(importRiel.value) || 0;
                document.getElementById('margin-hint').textContent = 'Margin: ៛' + Math.round(exp - imp).toLocaleString() + '/L';
            }
        })();
    </script>
@endsection