{{-- resources/views/frontend/show-diocese.blade.php --}}
@extends('layouts.apps')
@section('title', 'Diocese - Africa Inland Church Tanzania(AICT)')
@section('content')

<style>
/* Scoped styles for diocese page only */
.diocese-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.diocese-main {
    width: 70%;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
}

.diocese-sidebar {
    width: 30%;
    float: right;
    padding-left: 20px;
    box-sizing: border-box;
}

.diocese-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .diocese-main, .diocese-sidebar {
        width: 100% !important;
        float: none !important;
        padding: 0 15px;
    }
}

/* Panel styles for accordion */
.diocese-panel {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

.diocese-panel-heading {
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.diocese-panel-body {
    padding: 15px;
    display: none;
}

.diocese-panel-body.active {
    display: block;
}

.diocese-well {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 19px;
    margin-bottom: 20px;
}
</style>

<div class="diocese-container diocese-clearfix">
    {{-- Main (70%) --}}
    <div class="diocese-main">
      <h2 class="mb-4">{{ $diocese->name }}</h2>

      {{-- Slider --}}
      @if(isset($sliders) && $sliders->isNotEmpty())
        <div id="dioceseSlider" class="carousel slide mb-4" data-ride="carousel">
          <div class="carousel-inner" style="height:300px; overflow:hidden;">
            @foreach($sliders as $i => $slide)
              <div class="item {{ $i===0?'active':'' }}">
                <img
                  src="{{ asset('storage/'.$slide->image_path) }}"
                  alt="{{ $slide->caption ?? '' }}"
                  class="img-responsive"
                  style="width:100%; height:300px; object-fit:cover;"
                >
                @if($slide->caption)
                  <div class="carousel-caption">{{ $slide->caption }}</div>
                @endif
              </div>
            @endforeach
          </div>
          <a class="left carousel-control" href="#dioceseSlider" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#dioceseSlider" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      @endif

      {{-- Accordion --}}
      <div class="diocese-accordion" id="dioceseAccordion">
        @php
          $sections = [
            'Brief History'       => $history,
            'Vision'              => $vision,
            'Mission'             => $mission,
            'Objectives'          => $objectives,
            'Departments'         => $departments,
            'Sponsors & Partners' => $sponsorsPartners,
            'Our Staff'           => $diocese->staff,
            'Announcements'       => $posts,
            'Location & Contacts' => $diocese
          ];
        @endphp

        @foreach($sections as $title => $content)
          @php $id = Str::slug($title); @endphp
          <div class="diocese-panel">
            <div class="diocese-panel-heading" onclick="togglePanel('panel-{{ $id }}')">
              <h4>{{ $title }}</h4>
            </div>
            <div id="panel-{{ $id }}" class="diocese-panel-body {{ $loop->first ? 'active' : '' }}">
              @switch($title)
                @case('Brief History')
                  {!! nl2br(e($content)) !!}
                  @break

                @case('Departments')
                  <ul>
                    @forelse($content as $d)
                      <li>{{ $d->name }}</li>
                    @empty
                      <li class="text-muted">None</li>
                    @endforelse
                  </ul>
                  @break

                @case('Our Staff')
                  @if(isset($content) && $content->isNotEmpty())
                    <ul>
                      @foreach($content as $s)
                        <li>{{ $s->fullname }} — {{ $s->position }}</li>
                      @endforeach
                    </ul>
                  @else
                    <p class="text-muted">No staff listed.</p>
                  @endif
                  @break

                @case('Announcements')
                  @if(isset($content) && $content->isNotEmpty())
                    <table class="table table-striped">
                      <thead><tr><th>Title</th><th>Date</th></tr></thead>
                      <tbody>
                        @foreach($content as $post)
                          <tr>
                            <td><a href="#">{{ $post->title }}</a></td>
                            <td>{{ $post->created_at->format('d M Y') }}</td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  @else
                    <p class="text-muted">No announcements.</p>
                  @endif
                  @break

                @case('Location & Contacts')
                  <address>
                    {!! nl2br(e($diocese->address)) !!}<br>
                    <strong>Phone:</strong> {{ $diocese->phone }}<br>
                    <strong>Email:</strong> <a href="mailto:{{ $diocese->email }}">{{ $diocese->email }}</a>
                  </address>
                  @break

                @default
                  {!! nl2br(e($content)) !!}
              @endswitch
            </div>
          </div>
        @endforeach
      </div>
    </div>

    {{-- Sidebar (30%) --}}
    <div class="diocese-sidebar">
      <div class="diocese-well">
        <h4>Pastors</h4>
        @if(isset($pastors) && $pastors->isNotEmpty())
          <ul class="list-unstyled">
            @foreach($pastors as $p)
              <li><strong>{{ $p->full_name }}</strong><br><small>{{ $p->position }}</small></li>
            @endforeach
          </ul>
        @else
          <p class="text-muted">No pastors.</p>
        @endif
      </div>
      <div class="diocese-well">
        <h4>Other Dioceses</h4>
        <ul class="list-unstyled">
          @foreach($otherDioceses as $o)
            <li><a href="{{ route('frontend.show-diocese',$o->id) }}">{{ $o->name }}</a></li>
          @endforeach
        </ul>
      </div>
    </div>
</div>

<script>
function togglePanel(panelId) {
    const panel = document.getElementById(panelId);
    const allPanels = document.querySelectorAll('.diocese-panel-body');
    
    // Close all panels
    allPanels.forEach(p => p.classList.remove('active'));
    
    // Open clicked panel
    panel.classList.add('active');
}
</script>


@endsection