@extends('layouts.main')

@section('title', 'Tambah Kamar')

@section('content')
<div class="card shadow-sm">
    <div class="card-body">
        <h4 class="mb-3">Tambah Kamar</h4>

        <form action="{{ route('rooms.store') }}" method="POST">
            @csrf
            <div class="mb-3">
                <label>Nomor Kamar</label>
                <input type="text" name="nomor_kamar" class="form-control" required>
            </div>

            <div class="mb-3">
                <label>Lokasi / Posisi Kamar</label>
                <textarea name="deskripsi_kamar" class="form-control" placeholder="Contoh: Atas Tengah,Atas Kanan,Atas Kiri"></textarea>
            </div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const jenisPenyewaan = document.getElementById('jenis_penyewaan');
    const tanggalMasukWrapper = document.getElementById('tanggal_masuk_wrapper');
    const tanggalMasuk = document.getElementById('tanggal_masuk');
    const tanggalJatuhTempo = document.getElementById('tanggal_jatuh_tempo');

    jenisPenyewaan.addEventListener('change', function() {
        tanggalMasukWrapper.style.display = (this.value === 'bulanan' || this.value === 'tahunan') ? 'block' : 'none';
        if (!this.value) tanggalMasuk.value = tanggalJatuhTempo.value = '';
    });

    tanggalMasuk.addEventListener('change', function() {
        if (!this.value || !jenisPenyewaan.value) return;
        const masuk = new Date(this.value);
        const jatuh = new Date(masuk);
        if (jenisPenyewaan.value === 'bulanan') jatuh.setMonth(jatuh.getMonth() + 1);
        else jatuh.setFullYear(jatuh.getFullYear() + 1);
        tanggalJatuhTempo.value = jatuh.toISOString().split('T')[0];
    });
});
</script>
@endsection