@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h4 class="mb-3">{{ $department->name }}</h4>

    <div class="mb-3">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editDetailsModal">
            Edit/Add Details
        </button>
        <button class="btn btn-success">Sort Leaders</button>
    </div>

    <hr>

    <ul class="list-unstyled mb-4">
        <li><strong>About Us</strong>
            <div class="text-muted">{!! $department->about ?? '<em>Not provided</em>' !!}</div>
        </li>
        <li><strong>What We Do</strong>
            <div class="text-muted">{!! $department->what_we_do ?? '<em>Not provided</em>' !!}</div>
        </li>
        <li><strong>Programs</strong>
            <div class="text-muted">{!! $department->programs ?? '<em>Not provided</em>' !!}</div>
        </li>
        <li><strong>Sponsors</strong>
            <div class="text-muted">{!! $department->sponsors ?? '<em>Not provided</em>' !!}</div>
        </li>
        <li><strong>Staff Members</strong></li>
    </ul>

    {{-- Leaders Section --}}
    @if($department->staff && count($department->staff))
        <div class="table-responsive mb-4">
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Fullname</th>
                        <th>Gender</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($department->staff as $staff)
                        <tr>
                            <td>{{ $staff->fullname }}</td>
                            <td>{{ $staff->gender }}</td>
                            <td>{{ $staff->position }}</td>
                            <td>
                                <button class="btn btn-sm btn-info">Edit</button>
                                <button class="btn btn-sm btn-danger">Remove</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-muted">Oops! No leaders added yet.</p>
    @endif

    {{-- Press Releases Section --}}
    <h5>Press Release</h5>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="table-light">
                <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Posted On</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {{-- @foreach ($department->pressReleases as $press) --}}
                {{-- <tr>
                    <td><img src="{{ asset('storage/' . $press->image) }}" alt="image" width="60"></td>
                    <td>{{ $press->title }}</td>
                    <td>{{ $press->created_at->format('d M Y') }}</td>
                    <td>
                        <a href="#" class="btn btn-sm btn-info">Edit</a>
                        <a href="#" class="btn btn-sm btn-danger">Delete</a>
                    </td>
                </tr> --}}
                {{-- @endforeach --}}
                <tr>
                    <td colspan="4" class="text-muted text-center">No press releases available yet.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Edit 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('departments.updateDetails', $department->id) }}" method="POST">
            @csrf
            @method('PUT')

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

                <div class="modal-body">
                    <div class="mb-3">
                        <label>About Us</label>
                        <textarea name="about" class="form-control" id="about-editor">{{ old('about', $department->about) }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label>What We Do</label>
                        <textarea name="what_we_do" class="form-control" id="do-editor">{{ old('what_we_do', $department->what_we_do) }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label>Programs</label>
                        <textarea name="programs" class="form-control" id="programs-editor">{{ old('programs', $department->programs) }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label>Sponsors</label>
                        <textarea name="sponsors" class="form-control" id="sponsors-editor">{{ old('sponsors', $department->sponsors) }}</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.22.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('about-editor');
    CKEDITOR.replace('do-editor');
    CKEDITOR.replace('programs-editor');
    CKEDITOR.replace('sponsors-editor');
</script>
@endsection