@extends('layouts.main')

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

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

        <form action="{{ route('rooms.update', $room->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label>Nomor Kamar</label>
                <input type="text" name="nomor_kamar" value="{{ $room->nomor_kamar }}" class="form-control" required>
            </div>

            <div class="mb-3">
                <label>Lokasi / Posisi Kamar</label>
                <input type="text" name="deskripsi_kamar" value="{{ $room->deskripsi_kamar }}" class="form-control" required>
            </div>

            <!-- <div class="mb-3">
                <label>Jenis Penyewaan</label>
                <select name="jenis_penyewaan" id="jenis_penyewaan" class="form-select" required>
                    <option value="">-- Pilih Jenis Penyewaan --</option>
                    <option value="bulanan" {{ $room->jenis_penyewaan == 'bulanan' ? 'selected' : '' }}>Bulanan</option>
                    <option value="tahunan" {{ $room->jenis_penyewaan == 'tahunan' ? 'selected' : '' }}>Tahunan</option>
                </select>
            </div>

            <div class="mb-3" id="tanggal_masuk_wrapper" style="display:none;">
                <label>Tanggal Masuk</label>
                <input type="date" id="tanggal_masuk" name="tanggal_masuk" value="{{ $room->tanggal_masuk }}" class="form-control">
            </div>

            <div class="mb-3">
                <label>Tanggal Jatuh Tempo</label>
                <input type="date" id="tanggal_jatuh_tempo" name="tanggal_jatuh_tempo" value="{{ $room->tanggal_jatuh_tempo }}" class="form-control" readonly required>
            </div> -->

            <button type="submit" class="btn btn-warning">Update</button>
            <a href="{{ route('rooms.index') }}" class="btn btn-secondary">Kembali</a>
        </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');

    // Tampilkan tanggal masuk jika jenis penyewaan sudah ada
    if (jenisPenyewaan.value === 'bulanan' || jenisPenyewaan.value === 'tahunan') {
        tanggalMasukWrapper.style.display = 'block';
    }

    // Saat jenis penyewaan berubah
    jenisPenyewaan.addEventListener('change', function() {
        if (this.value === 'bulanan' || this.value === 'tahunan') {
            tanggalMasukWrapper.style.display = 'block';
        } else {
            tanggalMasukWrapper.style.display = 'none';
            tanggalMasuk.value = '';
            tanggalJatuhTempo.value = '';
        }
    });

    // Hitung otomatis tanggal jatuh tempo saat tanggal masuk diubah
    tanggalMasuk.addEventListener('change', function() {
        if (!tanggalMasuk.value || !jenisPenyewaan.value) return;

        const masukDate = new Date(tanggalMasuk.value);
        const jatuhTempo = new Date(masukDate);

        if (jenisPenyewaan.value === 'bulanan') {
            jatuhTempo.setMonth(jatuhTempo.getMonth() + 1);
        } else if (jenisPenyewaan.value === 'tahunan') {
            jatuhTempo.setFullYear(jatuhTempo.getFullYear() + 1);
        }

        // Format ke yyyy-mm-dd
        const yyyy = jatuhTempo.getFullYear();
        const mm = String(jatuhTempo.getMonth() + 1).padStart(2, '0');
        const dd = String(jatuhTempo.getDate()).padStart(2, '0');
        tanggalJatuhTempo.value = `${yyyy}-${mm}-${dd}`;
    });
});
</script>
@endsection