@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>All Projects</h3>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Flash Messages ───────────────────────── --}}
            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            @endif
            @if(session('info'))
                <div class="container-fluid">
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        {{ session('info') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            @endif
            @if(session('error'))
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            @endif

            {{-- ── Missing Images Panel (super_admin only) ── --}}
            @if($role === 'super_admin')
                @php
                    $missing = $ProjectsDisplay->filter(fn($p) => empty($p->logo_file) || empty($p->project_image_file));
                @endphp
                @if($missing->count())
                    <div class="container-fluid mb-4">
                        <div class="card border-warning">
                            <div class="card-header bg-transparent border-bottom border-warning">
                                <h5 class="mb-0">
                                    <i class="fas fa-images mr-2 text-warning"></i>
                                    {{ $missing->count() }} project(s) missing images — upload below
                                </h5>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('project.bulk-image-upload') }}" method="POST"
                                    enctype="multipart/form-data" id="bulk_image_form">
                                    @csrf
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th class="align-middle">Project</th>
                                                    <th class="align-middle">Location</th>
                                                    <th class="text-center align-middle">Logo <small class="text-muted d-block">260×100px</small></th>
                                                    <th class="text-center align-middle">Project Image <small class="text-muted d-block">1600×800px</small></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($missing as $i => $project)
                                                    <tr>
                                                        <td class="align-middle">
                                                            {{ $project->project_name }}
                                                            <input type="hidden" name="images[{{ $i }}][project_id]" value="{{ $project->id }}">
                                                        </td>
                                                        <td class="align-middle">{{ $project->location ?? '—' }}</td>
                                                        <td class="text-center align-middle">
                                                            @if(!empty($project->logo_file))
                                                                <img src="{{ asset('storage/projects/' . $project->logo_file) }}" alt="Logo" height="40" class="rounded d-block mx-auto mb-1">
                                                                <small class="text-success"><i class="fas fa-check-circle"></i> Uploaded</small>
                                                            @else
                                                                <div id="logo_preview_{{ $i }}" class="mx-auto mb-2" style="width:100px;height:45px;">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="45" viewBox="0 0 100 45">
                                                                        <rect width="100" height="45" rx="6" fill="#f8f9fa" stroke="#dee2e6" stroke-width="1.5"/>
                                                                        <rect x="10" y="8" width="30" height="20" rx="3" fill="#e9ecef" stroke="#ced4da" stroke-width="1"/>
                                                                        <circle cx="18" cy="15" r="4" fill="#adb5bd"/>
                                                                        <polygon points="10,28 22,16 32,24 38,19 40,28" fill="#dee2e6"/>
                                                                        <text x="58" y="20" text-anchor="middle" font-size="7" fill="#6c757d" font-family="Arial" font-weight="bold">LOGO</text>
                                                                        <text x="58" y="30" text-anchor="middle" font-size="6" fill="#adb5bd" font-family="Arial">SVG/PNG/JPG</text>
                                                                    </svg>
                                                                </div>
                                                                <label for="logo_{{ $i }}" class="custom-file-upload mx-auto">
                                                                    <i class="fas fa-cloud-upload-alt"></i> Choose Logo
                                                                </label>
                                                                <input type="file" id="logo_{{ $i }}" name="images[{{ $i }}][logo_file]"
                                                                    class="file_input" accept=".png,.jpg,.jpeg,.webp,.svg"
                                                                    onchange="previewImage(this, 'logo_preview_{{ $i }}', 100, 45, 'logo_status_{{ $i }}')">
                                                                <br>
                                                                <small class="text-danger" id="logo_status_{{ $i }}">
                                                                    <i class="fas fa-exclamation-circle"></i> Missing
                                                                </small>
                                                            @endif
                                                        </td>
                                                        <td class="text-center align-middle">
                                                            @if(!empty($project->project_image_file))
                                                                <img src="{{ asset('storage/projects/' . $project->project_image_file) }}" alt="Project Image" height="40" class="rounded d-block mx-auto mb-1">
                                                                <small class="text-success"><i class="fas fa-check-circle"></i> Uploaded</small>
                                                            @else
                                                                <div id="image_preview_{{ $i }}" class="mx-auto mb-2" style="width:120px;height:60px;">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="60" viewBox="0 0 120 60">
                                                                        <rect width="120" height="60" rx="6" fill="#f8f9fa" stroke="#dee2e6" stroke-width="1.5"/>
                                                                        <rect x="5" y="5" width="110" height="40" rx="4" fill="#e9ecef" stroke="#ced4da" stroke-width="1"/>
                                                                        <circle cx="25" cy="20" r="7" fill="#adb5bd"/>
                                                                        <polygon points="5,45 30,20 55,38 80,25 115,45" fill="#dee2e6" stroke="#ced4da" stroke-width="1"/>
                                                                        <text x="60" y="55" text-anchor="middle" font-size="6" fill="#adb5bd" font-family="Arial">1600 × 800px</text>
                                                                    </svg>
                                                                </div>
                                                                <label for="image_{{ $i }}" class="custom-file-upload mx-auto">
                                                                    <i class="fas fa-cloud-upload-alt"></i> Choose Image
                                                                </label>
                                                                <input type="file" id="image_{{ $i }}" name="images[{{ $i }}][project_image]"
                                                                    class="file_input" accept=".png,.jpg,.jpeg,.webp"
                                                                    onchange="previewImage(this, 'image_preview_{{ $i }}', 120, 60, 'image_status_{{ $i }}')">
                                                                <br>
                                                                <small class="text-danger" id="image_status_{{ $i }}">
                                                                    <i class="fas fa-exclamation-circle"></i> Missing
                                                                </small>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-upload mr-1"></i> Upload All Images
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif
            @endif

            <div class="container-fluid">

                {{-- ── Add / Import cards (super_admin only) ── --}}
                @if($role === 'super_admin')
                <div class="container-fluid mb-4">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card h-100" style="border-left:4px solid #c9a96e;">
                                <div class="card-body d-flex align-items-center" style="gap:16px;">
                                    <div style="width:48px;height:48px;border-radius:10px;background:#fff8ee;
                                        display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                        <i class="fas fa-building" style="font-size:22px;color:#c9a96e;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700;font-size:15px;">Add Single Project</div>
                                        <div style="font-size:13px;color:#6c757d;">Fill in the form manually</div>
                                    </div>
                                    <a href="/project/create" class="btn btn-sm btn-primary ml-auto">
                                        <i class="fas fa-plus mr-1"></i> Add
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 mb-3">
                            <div class="card h-100" style="border-left:4px solid #28a745;">
                                <div class="card-body">
                                    <div class="d-flex align-items-center mb-3" style="gap:12px;">
                                        <div style="width:48px;height:48px;border-radius:10px;background:#f0fff4;
                                            display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <i class="fas fa-file-csv" style="font-size:22px;color:#28a745;"></i>
                                        </div>
                                        <div>
                                            <div style="font-weight:700;font-size:15px;">Bulk Import Projects</div>
                                            <div style="font-size:13px;color:#6c757d;">
                                                Columns: <code>project_name, place_name, latitude, longitude</code> &nbsp;
                                                <a href="{{ route('project.csv-template') }}" style="color:#28a745;">
                                                    <i class="fas fa-download mr-1"></i>Download template
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="{{ route('project.bulk-import') }}" method="POST"
                                        enctype="multipart/form-data" class="d-flex align-items-center" style="gap:10px;">
                                        @csrf
                                        <label style="flex:1;margin:0;cursor:pointer;">
                                            <div id="csv-label-projects" style="border:2px dashed #ced4da;border-radius:6px;
                                                padding:8px 14px;font-size:13px;color:#6c757d;white-space:nowrap;
                                                overflow:hidden;text-overflow:ellipsis;">
                                                <i class="fas fa-paperclip mr-1"></i> Choose CSV file...
                                            </div>
                                            <input type="file" name="csv_file" accept=".csv,.txt" required
                                                style="display:none;"
                                                onchange="document.getElementById('csv-label-projects').innerHTML=
                                                    '<i class=\'fas fa-file-csv mr-1\' style=\'color:#28a745\'></i> '+this.files[0].name">
                                        </label>
                                        <button type="submit" class="btn btn-success btn-sm" style="white-space:nowrap;">
                                            <i class="fas fa-upload mr-1"></i> Import
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header pb-0 card-no-border d-flex justify-content-between align-items-center">
                                <div>
                                    <h3>All Projects</h3>
                                    <span>Manage and view all registered projects below.</span>
                                </div>
                            </div>
                            <div class="card-body">

                                {{-- Controls --}}
                                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                                    <div class="dataTables_length">
                                        <label class="mb-0">Show
                                            <select id="rowsPerPageSelect" class="form-select">
                                                <option value="5">5</option>
                                                <option value="10" selected>10</option>
                                                <option value="25">25</option>
                                                <option value="50">50</option>
                                            </select>
                                            entries
                                        </label>
                                    </div>
                                    <div class="dataTables_filter">
                                        <label class="mb-0">Search:
                                            <input type="search" id="searchInput"
                                                class="form-control form-control-sm d-inline w-auto"
                                                placeholder="Search projects...">
                                        </label>
                                    </div>
                                </div>

                                {{-- Table --}}
                                <div class="table-responsive">
                                    <table class="display dataTable no-footer w-100" id="data-table" role="grid">
                                        <thead>
                                            <tr class="table-header">
                                                <th>#</th>
                                                <th>Project Name</th>
                                                <th>Location</th>
                                                <th>Logo</th>
                                                <th>Project Image</th>
                                                @if($role === 'super_admin')
                                                <th>Actions</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody id="table-body"></tbody>
                                    </table>
                                </div>

                                {{-- Pagination --}}
                                <div class="pagination mt-3" id="pagination-controls"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const projects       = @json($ProjectsDisplay);
    const storageBase    = "{{ asset('storage/projects') }}";
    const csrfToken      = "{{ csrf_token() }}";
    const isSuperAdmin   = {{ $role === 'super_admin' ? 'true' : 'false' }};
    const colSpan        = isSuperAdmin ? 6 : 5;

    const rowsPerPageSelect = document.getElementById('rowsPerPageSelect');
    const searchInput       = document.getElementById('searchInput');

    let rowsPerPage = parseInt(rowsPerPageSelect.value);
    let currentPage = 1;

    function imgTag(file, type) {
        return file
            ? `<img src="${storageBase}/${file}" class="img-fluid rounded" style="max-height:50px;" alt="${type}">`
            : `<span class="badge badge-warning text-dark"><i class="fas fa-exclamation-triangle mr-1"></i>Missing</span>`;
    }

    function actionButtons(p) {
        if (!isSuperAdmin) return '';
        return `
            <td class="align-middle text-center">
                <a href="/project/${p.id}/edit" class="btn btn-sm btn-warning mr-1" title="Edit">
                    <i class="fas fa-edit"></i>
                </a>
                <form action="/project/${p.id}/delete" method="POST" style="display:inline"
                      onsubmit="return confirm('Delete this project?')">
                    <input type="hidden" name="_token"  value="${csrfToken}">
                    <input type="hidden" name="_method" value="DELETE">
                    <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </form>
            </td>`;
    }

    function filterData(query) {
        return projects.filter(p =>
            p.project_name.toLowerCase().includes(query.toLowerCase()) ||
            (p.location || '').toLowerCase().includes(query.toLowerCase())
        );
    }

    function displayTable(data, page, perPage) {
        const tbody = document.getElementById('table-body');
        const start = (page - 1) * perPage;
        const sliced = data.slice(start, start + perPage);

        tbody.innerHTML = sliced.length === 0
            ? `<tr><td colspan="${colSpan}" class="text-center text-muted py-3">No projects found.</td></tr>`
            : sliced.map((p, i) => `
                <tr class="${i % 2 === 0 ? 'odd' : 'even'}">
                    <td>${start + i + 1}</td>
                    <td>${p.project_name}</td>
                    <td>${p.location ?? '—'}</td>
                    <td>${imgTag(p.logo_file, 'logo')}</td>
                    <td>${imgTag(p.project_image_file, 'project image')}</td>
                    ${actionButtons(p)}
                </tr>`).join('');
    }

    function setupPagination(data, perPage) {
        const container = document.getElementById('pagination-controls');
        const pageCount = Math.ceil(data.length / perPage);
        container.innerHTML = '';
        if (pageCount <= 1) return;

        const btn = (label, page, disabled, active) => {
            const a = document.createElement('a');
            a.innerText = label;
            a.classList.add('paginate_button');
            if (disabled) a.classList.add('disabled');
            if (active)   a.classList.add('active');
            if (!disabled) a.addEventListener('click', () => { currentPage = page; refresh(); });
            return a;
        };

        container.appendChild(btn('Previous', currentPage - 1, currentPage === 1, false));
        for (let i = 1; i <= pageCount; i++) {
            container.appendChild(btn(i, i, false, i === currentPage));
        }
        container.appendChild(btn('Next', currentPage + 1, currentPage === pageCount, false));
    }

    function refresh() {
        const filtered = filterData(searchInput.value);
        displayTable(filtered, currentPage, rowsPerPage);
        setupPagination(filtered, rowsPerPage);
    }

    rowsPerPageSelect.addEventListener('change', function () {
        rowsPerPage = parseInt(this.value);
        currentPage = 1;
        refresh();
    });

    searchInput.addEventListener('input', function () {
        currentPage = 1;
        refresh();
    });

    refresh();
});

function previewImage(input, previewId, maxWidth, maxHeight, statusId) {
    const previewContainer = document.getElementById(previewId);
    const statusEl         = document.getElementById(statusId);
    if (!input.files || !input.files[0]) return;

    const file   = input.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
        const isSvg = file.type === 'image/svg+xml' || file.name.toLowerCase().endsWith('.svg');
        previewContainer.innerHTML = isSvg
            ? `<div style="width:${maxWidth}px;height:${maxHeight}px;display:flex;align-items:center;
                           justify-content:center;border:1px dashed #ced4da;border-radius:6px;
                           background:#fafafa;margin:0 auto;">
                   <img src="${e.target.result}" style="max-width:${maxWidth-10}px;max-height:${maxHeight-10}px;object-fit:contain;">
               </div>`
            : `<img src="${e.target.result}" style="max-width:${maxWidth}px;max-height:${maxHeight}px;object-fit:contain;"
                    class="rounded d-block mx-auto">`;

        if (statusEl) {
            statusEl.className = 'text-success';
            statusEl.innerHTML = '<i class="fas fa-check-circle"></i> Selected: ' + file.name;
        }
    };

    reader.readAsDataURL(file);
}
</script>

@include('Partials.footer')