@extends('layouts.app')

@section('content')
<!-- Background seluruh halaman -->
<div style="background-color: #e0e0e0; width: 100%; min-height: 100vh; border-radius: 15px; padding: 1rem;">

    <!-- Header -->
    <div style="background-color: #000; color: #fff; padding: 0.1rem; border-radius: 0.5rem;">
        <h1 class="m-0">Tambah Jadwal Harian</h1>
    </div>

    <!-- Konten utama -->
    <div class="container mt-4">
        <div class="card p-4 border border-secondary" style="border-radius: 15px; background-color: #fff;">
            <form action="{{ route('jadwalharian.store') }}" method="POST">
            @csrf

            <!-- Dropdown Waktu -->
            <div class="form-group">
                <label>Waktu</label>
                <select name="waktu" class="form-control" required>
                    <option value="Subuh">Subuh</option>
                    <option value="Dzuhur">Dzuhur</option>
                    <option value="Ashar">Ashar</option>
                    <option value="Maghrib">Maghrib</option>
                    <option value="Isya">Isya</option>
                </select>
            </div>

            <!-- Input untuk Imam -->
            <div class="form-group">
                <label>Imam</label>
                <input type="text" name="imam" class="form-control" required>
            </div>

            <!-- Input untuk Muadzin -->
            <div class="form-group">
                <label>Muadzin</label>
                <input type="text" name="muadzin" class="form-control" required>
            </div>

            <!-- Tombol Submit -->
            <button type="submit" class="btn btn-primary">Simpan</button>
            <a href="{{ route('jadwalharian.index') }}" class="btn btn-secondary">Kembali</a>
            </form>
        </div>
    </div>
</div>
@endsection