@extends('layouts.app')
@section('title', 'My weddings · '.config('app.name'))
@section('css')
  .head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
  .wcard h2{margin:0 0 2px;font-size:20px}
  .wcard .meta{color:var(--muted);font-size:14px;margin-bottom:14px}
  .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
  .nums div{background:var(--bg);border-radius:10px;padding:9px 6px;text-align:center}
  .nums b{display:block;font-size:20px;color:var(--purple);line-height:1.1}
  .nums span{font-size:11px;color:var(--muted)}
  .acts{display:flex;gap:8px;align-items:center}
  .acts form{margin:0;margin-left:auto}
  details.new{margin-bottom:22px}
  details.new summary{list-style:none;cursor:pointer;display:inline-block}
  details.new summary::-webkit-details-marker{display:none}
  details.new .card{margin-top:14px}
  .themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:6px}
  .themes label{margin:0;display:block;text-transform:none;font-size:13px;color:var(--ink);cursor:pointer}
  .themes input{position:absolute;opacity:0;width:0}
  .themes span{display:block;border:2px solid var(--line);border-radius:10px;padding:8px;font-weight:600;background:#fff}
  .themes input:checked + span{border-color:var(--purple);background:var(--soft)}
  .sw{display:flex;height:18px;border-radius:5px;overflow:hidden;margin-bottom:6px;border:1px solid #0001}
  .sw i{flex:1}
@endsection
@section('content')
<div class="head">
  <div>
    <h1>My weddings</h1>
    <p class="muted" style="margin:0">{{ $weddings->count() }} of {{ $max }} weddings · up to {{ $guestLimit }} guests each</p>
  </div>
  <details class="new" @if($weddings->isEmpty() || $errors->any()) open @endif>
    <summary class="btn">+ New wedding</summary>
    <div class="card" style="min-width:min(560px,86vw);position:relative">
      <form method="POST" action="{{ route('weddings.store') }}">
        @csrf
        <div class="row">
          <div><label for="first">First name</label><input id="first" name="first" value="{{ old('first') }}" required maxlength="40" placeholder="e.g. Shahin"></div>
          <div><label for="second">Second name</label><input id="second" name="second" value="{{ old('second') }}" required maxlength="40" placeholder="e.g. Nusrat"></div>
        </div>
        <label for="date">Wedding date (you can change it later)</label>
        <input id="date" type="date" name="date" value="{{ old('date') }}">
        <label>Template</label>
        <div class="themes">
          @foreach($themes as $i => $t)
            <label><input type="radio" name="theme" value="{{ $t['id'] }}" @checked(old('theme', 'lavender') === $t['id'])>
              <span><div class="sw">@foreach($t['swatch'] as $c)<i style="background:{{ $c }}"></i>@endforeach</div>{{ $t['label'] }}</span></label>
          @endforeach
        </div>
        <button class="btn" style="margin-top:18px">Create wedding</button>
      </form>
    </div>
  </details>
</div>

@if($weddings->isEmpty())
  <div class="card" style="text-align:center;padding:40px 20px">
    <h2>No weddings yet</h2>
    <p class="muted" style="margin:0">Click <b>+ New wedding</b> to create your first invitation.</p>
  </div>
@else
  <div class="grid">
    @foreach($weddings as $w)
      <div class="card wcard">
        <h2>{{ $w['model']->title }}</h2>
        <div class="meta">{{ $w['date'] }} · {{ $w['theme'] }}</div>
        <div class="nums">
          <div><b>{{ $w['guests'] }}</b><span>Guests</span></div>
          <div><b>{{ $w['sent'] }}</b><span>Sent</span></div>
          <div><b>{{ $w['replied'] }}</b><span>Replies</span></div>
          <div><b>{{ $w['coming'] }}</b><span>Coming</span></div>
        </div>
        <div class="acts">
          <a class="btn" href="{{ route('workspace', $w['model']) }}">Open</a>
          <form method="POST" action="{{ route('weddings.destroy', $w['model']) }}" onsubmit="return confirm('Delete this wedding, its guests and replies? This cannot be undone.')">
            @csrf @method('DELETE')
            <button class="btn danger sm">Delete</button>
          </form>
        </div>
      </div>
    @endforeach
  </div>
@endif
@endsection