@extends('app')

@section('content')
    <div class="container">
        <div class="card shadow">
            <div class="card-header">
                <h4>Form Penyewaan Sepeda</h4>
            </div>

            <div class="card-body">

                <form action="{{ route('penyewa.penyewaan.store') }}" method="POST">
                    @csrf

                    <input type="hidden" name="sepeda_id" value="{{ $sepeda->id }}">

                    <div class="mb-3">
                        <label class="form-label">Nama Sepeda</label>
                        <input type="text" class="form-control" value="{{ $sepeda->nama_sepeda }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Merek</label>
                        <input type="text" class="form-control" value="{{ $sepeda->merek }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Tipe</label>
                        <input type="text" class="form-control" value="{{ $sepeda->tipe }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Harga Sewa / Hari</label>
                        <input type="text" class="form-control" id="harga_perhari"
                            value="{{ $sepeda->harga_sewa_perhari }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Tanggal Sewa</label>
                        <input type="date" name="tanggal_sewa" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Durasi Sewa (Hari)</label>
                        <input type="number" name="durasi_sewa" id="durasi_sewa" min="1" class="form-control"
                            required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Total Harga</label>
                        <input type="text" id="total_harga" class="form-control" readonly>
                    </div>

                    <input type="hidden" name="total_harga" id="total_harga_hidden">

                    <button type="submit" class="btn btn-success">
                        Simpan Penyewaan
                    </button>

                    <a href="{{ url()->previous() }}" class="btn btn-secondary">
                        Kembali
                    </a>

                </form>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const hargaPerHari = parseFloat(
                document.getElementById('harga_perhari').value
            );

            const durasiInput = document.getElementById('durasi_sewa');
            const totalHarga = document.getElementById('total_harga');
            const totalHargaHidden = document.getElementById('total_harga_hidden');

            durasiInput.addEventListener('input', function() {

                let durasi = parseInt(this.value) || 0;

                let total = hargaPerHari * durasi;

                totalHarga.value = new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR'
                }).format(total);

                totalHargaHidden.value = total;
            });

        });
    </script>
@endsection