@extends('admin.layout')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Officers / Leaders Management</h4>
        <button type="button" style="background:#1c1d46; color:white;border-radius: 8px;" data-bs-toggle="modal"
            data-bs-target="#addModal">
            <i class="fa-solid fa-plus"></i> Add Leader
        </button>
    </div>

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

    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width:70px;">Photo</th>
                    <th>Name</th>
                    <th>Post</th>
                    <th>Status</th>
                    <th class="text-center" style="width:150px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($leaders as $leader)
                    <tr>
                        <td>
                            <div class="leader-thumb">
                                @if($leader->photo)
                                    <img src="{{ asset($leader->photo) }}" alt="{{ $leader->name }}">
                                @else
                                    <span class="leader-initial">{{ $leader->initial }}</span>
                                @endif
                            </div>
                        </td>
                        <td class="fw-semibold">{{ $leader->name }}</td>
                        <td class="text-muted">{{ $leader->post }}</td>
                        <td>
                            <div class="form-check form-switch">
                                <input type="checkbox" class="form-check-input leader-status-toggle" role="switch"
                                    data-url="{{ route('admin.leaders.toggleStatus', $leader->id) }}" {{ $leader->is_active ? 'checked' : '' }}>
                            </div>
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                data-bs-target="#editModal{{ $leader->id }}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form method="POST" action="{{ route('admin.leaders.destroy', $leader) }}" class="d-inline"
                                onsubmit="return confirm('Delete this leader?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            No leaders added yet.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- ===== ADD MODAL ===== --}}
    <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.leaders.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title">Add Leader / Officer</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Post / Designation</label>
                            <input type="text" name="post" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Photo</label>
                            <input type="file" name="photo" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Order</label>
                            <input type="number" name="order" class="form-control" value="0">
                        </div>
                        <div class="form-check mb-3">
                            <input type="checkbox" name="is_active" value="1" class="form-check-input" checked>
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning text-white">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ===== EDIT MODALS ===== --}}
    @foreach($leaders as $leader)
        <div class="modal fade" id="editModal{{ $leader->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="POST" action="{{ route('admin.leaders.update', $leader) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h6 class="modal-title">Edit Leader / Officer</h6>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            @if($leader->photo)
                                <img src="{{ asset($leader->photo) }}" class="img-fluid mb-3 rounded" style="max-height:150px;">
                            @endif

                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" name="name" class="form-control" value="{{ $leader->name }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Post / Designation</label>
                                <input type="text" name="post" class="form-control" value="{{ $leader->post }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Replace Photo (optional)</label>
                                <input type="file" name="photo" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Order</label>
                                <input type="number" name="order" class="form-control" value="{{ $leader->order }}">
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" name="is_active" value="1" class="form-check-input" {{ $leader->is_active ? 'checked' : '' }}>
                                <label class="form-check-label">Active</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-warning text-white">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                document.querySelectorAll('.leader-status-toggle').forEach(function (checkbox) {
                    checkbox.addEventListener('change', function () {
                        const url = this.dataset.url;
                        const isChecked = this.checked;

                        fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ is_active: isChecked ? 1 : 0 })
                        })
                            .then(res => res.json())
                            .then(data => {
                                if (!data.success) {
                                    alert('Something went wrong!');
                                    checkbox.checked = !isChecked;
                                }
                            })
                            .catch(() => {
                                alert('Server error!');
                                checkbox.checked = !isChecked;
                            });
                    });
                });
            });
        </script>
    @endpush

@endsection