@extends('dashboard.base')

@section('content')
<div class="container mt-5">
    <h2 class="mb-4">Manage Home Page</h2>

    {{-- Flash messages --}}
    @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">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card p-4 shadow-sm rounded">
        <label for="sectionSelect" class="form-label fw-bold">Select a Section:</label>
        <select id="sectionSelect" class="form-select mb-4">
            <option value="" selected disabled>-- Choose Section --</option>
            <option value="carousel">Home Page Carousel</option>
            <option value="media_publications">Media Publications </option>
            <option value="projects">Current Projects</option>
            <option value="what_we_do">What We Do</option>
            <option value="certification-marks">Certification Marks</option>
        </select>

        <div id="actionButtons" class="mb-3" style="display: none;">
            <button id="showFormBtn" class="btn btn-success me-2">Create New</button>
            <button id="showListBtn" class="btn btn-secondary">View Existing</button>
        </div>

        {{-- Form --}}
        <div id="formContainer" style="display: none;">
            <form action="{{ route('home_page.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="section" id="sectionInput">

                <div class="mb-3">
                    <label class="form-label">Heading:</label>
                    <input type="text" name="heading" class="form-control" placeholder="Enter heading" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Content:</label>
                    <textarea name="content" class="form-control" rows="4" placeholder="Enter content" required></textarea>
                </div>

                {{-- IMAGE FIELD - hidden for "what_we_do" --}}
                <div class="mb-3" id="imageField">
                    <label class="form-label">Image:</label>
                    <input
    type="file"
    name="image"
    class="form-control"
    accept="image/*,.pdf"
>

<small class="text-muted">
    Optional: JPG, JPEG, PNG or PDF (max 20MB)
</small>
                    <!--<input type="file" name="image" class="form-control" accept="image/*">-->
                    <!--<small class="text-muted">Optional: jpg, jpeg, png (max 20MB)</small>-->
                </div>

                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" id="cancelFormBtn" class="btn btn-outline-secondary ms-2">Cancel</button>
            </form>
        </div>

        {{-- List --}}
        <div id="listContainer" style="display: none;">
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Heading</th>
                        <th>Content</th>
                        <th>Image</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="sectionItems">
                    <tr><td colspan="5" class="text-center text-muted">Select a section to view items.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
const sectionSelect = document.getElementById('sectionSelect');
const actionButtons = document.getElementById('actionButtons');
const sectionInput = document.getElementById('sectionInput');
const imageField = document.getElementById('imageField');

sectionSelect.addEventListener('change', function() {
    const selected = this.value;
    if (selected) {
        actionButtons.style.display = 'block';
        sectionInput.value = selected;
        document.querySelector('h2').innerText = 'Manage ' + this.options[this.selectedIndex].text;

        // Hide image upload for "what_we_do"
        if (selected === 'what_we_do') {
            imageField.style.display = 'none';
        } else {
            imageField.style.display = 'block';
        }
    } else {
        actionButtons.style.display = 'none';
        sectionInput.value = '';
    }
});

// Show form
document.getElementById('showFormBtn').addEventListener('click', () => {
    document.getElementById('formContainer').style.display = 'block';
    document.getElementById('listContainer').style.display = 'none';
});

// Cancel form
document.getElementById('cancelFormBtn').addEventListener('click', () => {
    document.getElementById('formContainer').style.display = 'none';
});

// Show list
document.getElementById('showListBtn').addEventListener('click', () => {
    const selected = sectionSelect.value;
    if (!selected) return;

    document.getElementById('listContainer').style.display = 'block';
    document.getElementById('formContainer').style.display = 'none';

    fetch(`/home_page/list/${selected}`)
        .then(res => res.json())
        .then(data => {
            const tbody = document.getElementById('sectionItems');
            tbody.innerHTML = '';

            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No records found.</td></tr>';
                return;
            }

            data.forEach((item, index) => {
                const imageColumn = item.image ? `<img src="${item.image}" width="80">` : '-';
                tbody.innerHTML += `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.heading}</td>
                        <td>${item.content}</td>
                        <td>${imageColumn}</td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="/home_page/${item.id}/move-up" class="btn btn-sm btn-light border" title="Move Up">Up</a>
                                <a href="/home_page/${item.id}/move-down" class="btn btn-sm btn-light border" title="Move Down">Down</a>
                                <a href="/home_page/${item.id}/edit" class="btn btn-sm btn-warning">Edit</a>
                                <form action="/home_page/${item.id}" method="POST" style="display:inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this item?')">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                `;
            });
        });
});
</script>
@endsection