@extends('layouts.app-tenant')

@section('content')
<div class="container my-5">
    <h3 class="mb-4">Pasangan Setting</h3>

    <!-- Form tambah pasangan -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="POST" action="{{ route('tenant.pasangan.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Nama</label>
                        <input type="text" name="nama" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Pasangan</label>
                        <Select name="pasangan" class="form-control" required>
                            <option value="bride">Bride</option>
                            <option value="groom">Groom</option>
                        </Select>
                       
                    </div>
                   
                    <div class="col-md-12">
                        <label class="form-label">Deskripsi</label>
                        <textarea name="desc" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Foto</label>
                        <input type="file" name="image" class="form-control">
                    </div>
                    <div class="col-md-12 text-end">
                        <button class="btn btn-success"><i class="bi bi-save"></i> Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabel pasangan -->
    <table class="table table-bordered align-middle">
        <thead class="table-light">
            <tr>
                <th>Nama</th>
                <th>Deskripsi</th>
                 <th>Pasangan</th>
                <th>Foto</th>
                <th class="text-center">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($cinta as $id => $hero)
                <tr>
                    <td>{{ $hero['nama'] ?? '-' }}</td>
                    <td>{{ $hero['desc'] ?? '-' }}</td>
                    <td>{{ $hero['pasangan'] ?? '-' }}</td>
                    <td>
                        @if(!empty($hero['image']))
                            <img src="{{ $hero['image'] }}" width="50" class="rounded">
                        @endif
                    </td>
                    <td class="text-center">
                        <!-- Tombol Edit -->
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editModal{{ $id }}">
                            <i class="bi bi-pencil-square"></i> Edit
                        </button>
                        <!-- Delete -->
                        <form method="POST" action="{{ route('tenant.pasangan.destroy', $id) }}" class="d-inline" onsubmit="return confirm('Yakin hapus pasangan ini?');">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-sm">
                                <i class="bi bi-trash"></i> Hapus
                            </button>
                        </form>
                    </td>
                </tr>

                <!-- Modal Edit -->
<div class="modal fade" id="editModal{{ $id }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" action="{{ route('tenant.pasangan.update', $id) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Pasangan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Nama</label>
                    <input type="text" name="nama" class="form-control" value="{{ $hero['nama'] ?? '' }}">
                </div>
                <div class="mb-3">
                    <label>Pasangan</label>
                    <select name="pasangan" class="form-control">
                        <option value="bride" {{ ($hero['pasangan'] ?? '')=='bride' ? 'selected' : '' }}>Bride</option>
                        <option value="groom" {{ ($hero['pasangan'] ?? '')=='groom' ? 'selected' : '' }}>Groom</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label>Deskripsi</label>
                    <textarea name="desc" class="form-control">{{ $hero['desc'] ?? '' }}</textarea>
                </div>
                <div class="mb-3">
                    <label>Foto</label>
                    <input type="file" name="image" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
            </div>
        </div>
    </form>
  </div>
</div>

            @empty
                <tr><td colspan="5" class="text-center">Belum ada data pasangan</td></tr>
            @endforelse
        </tbody>
    </table>
</div>



@endsection