@extends('layouts.app')

@section('content')
<div class="container py-4">
    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">{{ $diocese->name }}</h2>
        <div>
            <button
                class="btn btn-primary me-2"
                data-bs-toggle="modal"
                data-bs-target="#editDetailsModal"
            >Edit / Add Details</button>

            <button class="btn btn-success">Sort Staff</button>
        </div>
    </div>

    {{-- Details Sections --}}
    <div class="mb-4">
        <h5>Brief History</h5>
        <div class="border p-3 bg-light">
            {!! $diocese->history ?? '<em>No history provided.</em>' !!}
        </div>
    </div>

    <div class="mb-4">
        <h5>Vision</h5>
        <div class="border p-3 bg-light">
            {!! $diocese->vision ?? '<em>No vision provided.</em>' !!}
        </div>
    </div>

    <div class="mb-4">
        <h5>Mission</h5>
        <div class="border p-3 bg-light">
            {!! $diocese->mission ?? '<em>No mission provided.</em>' !!}
        </div>
    </div>

    <div class="mb-4">
        <h5>Objectives</h5>
        <div class="border p-3 bg-light">
            {!! $diocese->objectives ?? '<em>No objectives provided.</em>' !!}
        </div>
    </div>

    <div class="mb-4">
        <h5>Departments</h5>
        @if($diocese->departments->isEmpty())
            <p class="text-muted"><em>No departments assigned.</em></p>
        @else
            <ul class="list-group">
                @foreach($diocese->departments as $dept)
                    <li class="list-group-item">{{ $dept->name }}</li>
                @endforeach
            </ul>
        @endif
    </div>

    <div class="mb-4">
        <h5>Sponsors & Partners</h5>
        <div class="border p-3 bg-light">
            {!! $diocese->sponsors ?? '<em>No sponsors/partners listed.</em>' !!}
        </div>
    </div>

    <div class="mb-4">
        <h5>Contact & Location</h5>
        <div class="border p-3 bg-light">
            {!! $diocese->contacts ?? '<em>No contact/location provided.</em>' !!}
        </div>
    </div>

    <a href="{{ route('dioceses.index') }}" class="btn btn-link mt-3">← Back to Dioceses</a>
</div>

{{-- Edit/Add Details Modal --}}
<div
    class="modal fade"
    id="editDetailsModal"
    tabindex="-1"
    aria-labelledby="editDetailsModalLabel"
    aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <form
        action="{{ route('dioceses.updateDetails', $diocese->id) }}"
        method="POST"
    >
      @csrf
      @method('PUT')

      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editDetailsModalLabel">
            Add / Edit {{ $diocese->name }} Details
          </h5>
          <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
          ></button>
        </div>

        <div class="modal-body">
          @php
            // shorthand for existing or empty
            $H = old('history',     $diocese->history);
            $V = old('vision',      $diocese->vision);
            $M = old('mission',     $diocese->mission);
            $O = old('objectives',  $diocese->objectives);
            $S = old('sponsors',    $diocese->sponsors);
            $C = old('contacts',    $diocese->contacts);
          @endphp

          <div class="mb-3">
            <label class="form-label">Brief History</label>
            <textarea
                name="history"
                id="history-editor"
                class="form-control"
                rows="4"
            >{{ $H }}</textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Vision</label>
            <textarea
                name="vision"
                id="vision-editor"
                class="form-control"
                rows="3"
            >{{ $V }}</textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Mission</label>
            <textarea
                name="mission"
                id="mission-editor"
                class="form-control"
                rows="3"
            >{{ $M }}</textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Objectives</label>
            <textarea
                name="objectives"
                id="objectives-editor"
                class="form-control"
                rows="3"
            >{{ $O }}</textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Departments (comma‑separated)</label>
            <input
              type="text"
              name="departments"
              class="form-control"
              value="{{ old('departments', $diocese->departments->pluck('name')->join(', ')) }}"
              placeholder="e.g. Finance, Outreach, Youth"
            >
            <small class="text-muted">
              List existing departments. New ones will be created automatically.
            </small>
          </div>

          <div class="mb-3">
            <label class="form-label">Sponsors & Partners</label>
            <textarea
                name="sponsors"
                id="sponsors-editor"
                class="form-control"
                rows="3"
            >{{ $S }}</textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Contacts & Location</label>
            <textarea
                name="contacts"
                id="contacts-editor"
                class="form-control"
                rows="3"
            >{{ $C }}</textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-success">
            Save Changes
          </button>
          <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
          >Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- CKEditor --}}
<script src="https://cdn.ckeditor.com/4.25.1-lts/standard/ckeditor.js"></script>
<script>
  CKEDITOR.replace('history-editor');
  CKEDITOR.replace('vision-editor');
  CKEDITOR.replace('mission-editor');
  CKEDITOR.replace('objectives-editor');
  CKEDITOR.replace('sponsors-editor');
  CKEDITOR.replace('contacts-editor');
</script>
@endsection