@extends('layouts.main')

@section('title', 'Agenda')

@section('container')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-12 mb-2 mt-1">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb p-0 mb-0">
                                <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                                <li class="breadcrumb-item"><a href="{{ route('user.agenda') }}">Agenda</a></li>
                                <li class="breadcrumb-item"><a href="#">Tambah Agenda</a></li>     
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">           
            <!-- Basic Vertical form layout section start -->
            <section id="basic-vertical-layouts">
                <div class="row match-height">                    
                    <div class="col-md-12 col-12">
                        <div class="card">                            
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-vertical" method="POST" action="{{ route('user.simpan-agenda') }}" enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="nama">Judul</label>
                                                        <div class="position-relative has-icon-left">
                                                            <input type="text" id="nama" class="form-control" name="nama" placeholder="Judul Acara">
                                                            <div class="form-control-position">
                                                                <i class="bx bx-user"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <label for="idkategori">Kategori</label>
                                                        <div class="position-relative has-icon-left">
                                                            <select class='form-control' id="idkategori" name="idkategori">
                                                                <option value="">- Pilih Kategori Acara-</option>
                                                                @foreach($data as $item)
                                                                    <option value="{{ $item->id }}">{{ $item->nama }}</option>
                                                                @endforeach
                                                            </select>  
                                                            <div class="form-control-position">
                                                                <i class="bx bx-user"></i>
                                                            </div>                                                     
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-6">
                                                                <label for="tanggal">Tanggal</label>
                                                                <div class="position-relative has-icon-left">
                                                                    <input type="date" id="tanggal" class="form-control" name="tanggal" placeholder="Tanggal">
                                                                    <div class="form-control-position">
                                                                        <i class="bx bx-user"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-6">
                                                                <label for="waktu">Waktu</label>
                                                                <div class="position-relative has-icon-left">
                                                                    <input type="time" id="waktu" class="form-control" name="waktu" placeholder="Waktu">
                                                                    <div class="form-control-position">
                                                                        <i class="bx bx-user"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>                                                        
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="lokasi">Tempat</label>
                                                        <div class="position-relative has-icon-left">
                                                            <input type="text" id="lokasi" class="form-control" name="lokasi" placeholder="Tempat Acara">
                                                            <div class="form-control-position">
                                                                <i class="bx bx-user"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                                                
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="linkzoom">Link Zoom</label>
                                                        <div class="position-relative has-icon-left">
                                                            <input type="text" id="linkzoom" class="form-control" name="linkzoom" placeholder="Link Zoom">
                                                            <div class="form-control-position">
                                                                <i class="bx bx-user"></i>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-6">
                                                                <label for="idzoom">ID Zoom</label>
                                                                <div class="position-relative has-icon-left">
                                                                    <input type="text" id="idzoom" class="form-control" name="idzoom" placeholder="ID Zoom">
                                                                    <div class="form-control-position">
                                                                        <i class="bx bx-user"></i>
                                                                    </div>
                                                                 </div>
                                                            </div>
                                                            <div class="col-6">
                                                                <label for="passcode">Passcode Zoom</label>
                                                                <div class="position-relative has-icon-left">
                                                                    <input type="text" id="passcode" class="form-control" name="passcode" placeholder="Passcode Zoom">
                                                                    <div class="form-control-position">
                                                                        <i class="bx bx-user"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>                                                                                                                
                                                    </div>
                                                </div>                                                
                                                <div class="col-12 mt-2 d-flex justify-content-end">
                                                    <button type="submit" class="btn btn-primary mr-1 mb-1">Submit</button>
                                                    <button type="reset" class="btn btn-light-secondary mr-1 mb-1">Reset</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- // Basic Vertical form layout section end -->           
        </div>
    </div>
</div>
@endsection