@extends('layouts.app-tenant')

@section('content')
<div class="container my-5">

    <!-- Form Timeline -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header text-white">
            <h5 class="mb-0">Timeline</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('tenant.timeline.store') }}">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Nama Lokasi</label>
                        <input type="text" name="location_name" class="form-control" value="{{ $timeline['location_name'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Alamat</label>
                        <input type="text" name="address" class="form-control" value="{{ $timeline['address'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Foto Lokasi (URL)</label>
                        <input type="text" name="photo" class="form-control" value="{{ $timeline['photo'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Dresscode</label>
                        <input type="text" name="dresscode" class="form-control" value="{{ $timeline['dresscode'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Waktu Ceremony</label>
                        <input type="time" name="ceremony_time" class="form-control" value="{{ $timeline['ceremony_time'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Waktu Reception</label>
                        <input type="time" name="reception_time" class="form-control" value="{{ $timeline['reception_time'] ?? '' }}">
                    </div>
                </div>
                <div class="text-end mt-4">
                    <!-- Tombol dengan icon dari Iconify -->
                    <button type="submit" class="btn btn-primary px-4">
                        <iconify-icon icon="mdi:content-save"></iconify-icon>
                        
                    </button>

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

    <!-- Preview Timeline -->
    @if(!empty($timeline))
    <div class="card shadow-sm border-0">
        @if(!empty($timeline['photo']))
            <img src="{{ $timeline['photo'] }}" class="card-img-top" alt="Foto Lokasi" style="max-height:300px;object-fit:cover;">
        @endif
        <div class="card-body">
            <h4 class="card-title text-primary">{{ $timeline['location_name'] ?? '-' }}</h4>
            <p class="card-text text-muted">{{ $timeline['address'] ?? '-' }}</p>
            <div class="row">
                <div class="col-md-4">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="fw-bold">Ceremony</h6>
                        <p class="mb-0">{{ $timeline['ceremony_time'] ?? '-' }}</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="fw-bold">Reception</h6>
                        <p class="mb-0">{{ $timeline['reception_time'] ?? '-' }}</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border rounded bg-light">
                        <h6 class="fw-bold">Dresscode</h6>
                        <p class="mb-0">{{ $timeline['dresscode'] ?? '-' }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end gap-2">
            <form method="POST" action="{{ route('tenant.timeline.update') }}">
                @csrf
                @method('PUT')
                <button type="submit" class="btn btn-warning">✏️ Edit</button>
            </form>
            <form method="POST" action="{{ route('tenant.timeline.destroy') }}">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">🗑️ Hapus</button>
            </form>
        </div>
    </div>
    @endif
</div>
@endsection