@extends('adminlte::page')

@section('title', 'Add Tolly Tatler')

@section('content_header')
    <h1>Add Tolly Tatler</h1>
@stop

@section('content')
<div class="container-fluid">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h3 class="card-title mb-0">Create</h3>
      <a href="{{ route('admin.showTollyTatler') }}" class="btn btn-secondary btn-sm">
        <i class="fas fa-arrow-left"></i> Back to List
      </a>
    </div>

    <div class="card-body">
      @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
      @endif
      @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
      @endif

      @if ($errors->any())
        <div class="alert alert-danger">
          <strong>There were some problems with your input:</strong>
          <ul class="mb-0">
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <form action="{{ route('admin.saveTollyTatler') }}" method="POST" enctype="multipart/form-data" novalidate>
        @csrf

        <div class="row g-3">
          <div class="col-md-6">
            <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
            <input
              type="text"
              id="title"
              name="title"
              value="{{ old('title') }}"
              maxlength="255"
              placeholder="e.g., Tolly Tatler Annual Issue"
              class="form-control @error('title') is-invalid @enderror"
              required>
            @error('title')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          <div class="col-md-6">
            <label for="year" class="form-label">Year <span class="text-danger">*</span></label>
            <select
              id="year"
              name="year"
              class="form-control @error('year') is-invalid @enderror"
              required>
              <option value="" disabled {{ old('year') ? '' : 'selected' }}>Select year</option>
            </select>
            <small class="text-muted">Publication / issue year shown on the website.</small>
            @error('year')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          <div class="col-md-6">
            <label for="image" class="form-label">Cover Image <span class="text-danger">*</span></label>
            <input
              type="file"
              id="image"
              name="image"
              accept="image/*"
              class="form-control @error('image') is-invalid @enderror"
              required>
            <small class="text-muted">JPEG, PNG, JPG or GIF. Max 2 MB.</small>
            @error('image')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <div class="mt-2 d-none" id="imagePreviewWrap">
              <img id="imagePreview" src="" alt="Preview" class="img-thumbnail" style="max-width: 180px; max-height: 220px; object-fit: cover;">
            </div>
          </div>

          <div class="col-md-6">
            <label for="file" class="form-label">PDF File <span class="text-danger">*</span></label>
            <input
              type="file"
              id="file"
              name="file"
              accept="application/pdf"
              class="form-control @error('file') is-invalid @enderror"
              required>
            <small class="text-muted">Only PDF, max 20 MB.</small>
            @error('file')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          <div class="col-md-4">
            <label class="form-label d-block">Status</label>
            <div class="form-check form-switch mt-2">
              <input type="hidden" name="status" value="0">
              <input
                class="form-check-input"
                type="checkbox"
                id="status"
                name="status"
                value="1"
                {{ old('status', 1) ? 'checked' : '' }}>
              <label class="form-check-label" for="status">Active</label>
            </div>
            @error('status')
              <div class="text-danger small">{{ $message }}</div>
            @enderror
          </div>

          <div class="col-md-4">
            <label class="form-label" for="start_date_time">Start Date &amp; Time</label>
            <input
              type="datetime-local"
              id="start_date_time"
              name="start_date_time"
              value="{{ old('start_date_time') }}"
              class="form-control @error('start_date_time') is-invalid @enderror">
            <small class="text-muted">When members can start seeing this. Leave blank for immediately (if Active).</small>
            @error('start_date_time')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          <div class="col-md-4">
            <label class="form-label" for="end_date_time">End Date &amp; Time</label>
            <input
              type="datetime-local"
              id="end_date_time"
              name="end_date_time"
              value="{{ old('end_date_time') }}"
              class="form-control @error('end_date_time') is-invalid @enderror">
            <small class="text-muted">When it is removed from the website. Leave blank for no end date. After this time it shows as Expired.</small>
            @error('end_date_time')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>
        </div>

        <div class="mt-4 d-flex gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Save
          </button>
          <a href="{{ route('admin.showTollyTatler') }}" class="btn btn-outline-secondary">
            Cancel
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
@stop

@section('js')
<script>
  (function () {
    const startYear = 1900;
    const endYear = new Date().getFullYear();
    const yearSelect = document.getElementById('year');

    for (let y = endYear; y >= startYear; y--) {
      const opt = document.createElement('option');
      opt.value = String(y);
      opt.textContent = String(y);
      yearSelect.appendChild(opt);
    }

    const oldYear = @json(old('year'));
    if (oldYear) {
      yearSelect.value = String(oldYear);
    }

    const imageInput = document.getElementById('image');
    const previewWrap = document.getElementById('imagePreviewWrap');
    const preview = document.getElementById('imagePreview');

    imageInput.addEventListener('change', function () {
      const file = this.files && this.files[0];
      if (!file) {
        previewWrap.classList.add('d-none');
        preview.src = '';
        return;
      }
      preview.src = URL.createObjectURL(file);
      previewWrap.classList.remove('d-none');
    });
  })();
</script>
@stop