@extends('admin.layouts.app')

@section('title', 'Portfolio')

@section('content')

<style>
    /* ============================================
       PORTFOLIO - CUSTOM STYLES
    ============================================ */

    .checkbox-custom {
        width: 16px;
        height: 16px;
        accent-color: #C1121F;
        cursor: pointer;
    }

    .portfolio-thumb {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #E8E8E8;
        background: #F8F9FA;
    }

    .portfolio-thumb-placeholder {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        border: 1px solid #E8E8E8;
        background: #F8F9FA;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        font-size: 11px;
        text-align: center;
    }

    .portfolio-title-cell {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .portfolio-title-cell strong {
        color: #1A1A2E;
        font-weight: 600;
    }

    .portfolio-title-cell .slug-text {
        font-size: 12px;
        color: #6B7280;
    }

    .portfolio-title-cell .client-text {
        font-size: 12px;
        color: #6B7280;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .portfolio-title-cell .client-text i {
        font-size: 11px;
    }

    .category-tag {
        display: inline-block;
        padding: 2px 12px;
        border-radius: 12px;
        background: rgba(59, 130, 246, 0.1);
        color: #3B82F6;
        font-size: 12px;
        font-weight: 500;
    }

    .featured-btn {
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Poppins', sans-serif;
    }

    .featured-btn.active {
        background: #F0FDF4;
        color: #16A34A;
        border: 1px solid #BBF7D0;
    }

    .featured-btn.active:hover {
        background: #DCFCE7;
    }

    .featured-btn.inactive {
        background: #F3F4F6;
        color: #6B7280;
        border: 1px solid #E8E8E8;
    }

    .featured-btn.inactive:hover {
        background: #E8E8E8;
    }

    /* Alert Custom */
    .alert-custom {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        animation: slideDown 0.4s ease;
    }

    .alert-custom .alert-close {
        margin-left: auto;
        background: none;
        border: none;
        color: inherit;
        opacity: 0.5;
        cursor: pointer;
        font-size: 18px;
        padding: 4px;
        transition: all 0.3s ease;
    }

    .alert-custom .alert-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    .alert-success-custom {
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        color: #16A34A;
    }

    .alert-error-custom {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        color: #DC2626;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
        .table-custom {
            min-width: 900px;
        }
    }

    @media (max-width: 576px) {
        .portfolio-thumb {
            width: 45px;
            height: 45px;
        }
        .portfolio-thumb-placeholder {
            width: 45px;
            height: 45px;
            font-size: 9px;
        }
    }
</style>

<!-- ============================================
   PORTFOLIO - REDSPIDER THEME
============================================ -->

<div class="pages-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="bi bi-folder-open"></i> Portfolio
                </a>
            </li>
            <li class="active">All Projects</li>
        </ol>
    </nav>

    <!-- ===== ALERTS ===== -->
    @if (session('success'))
    <div class="alert-custom alert-success-custom">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    @if (session('error'))
    <div class="alert-custom alert-error-custom">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ session('error') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Portfolio</h1>
            <p>
                <i class="bi bi-folder-open"></i> Manage all portfolio projects
            </p>
        </div>
        <a href="{{ route('admin.portfolios.create') }}" class="btn-primary-gradient">
            <i class="bi bi-plus-circle"></i> Add New Project
        </a>
    </div>

    <!-- ===== TABLE CARD ===== -->
    <div class="table-card-main">

        <!-- ===== FILTER SECTION ===== -->
        <div class="filter-card" style="margin-bottom: 20px; padding: 16px 20px;">
            <form method="GET" action="{{ route('admin.portfolios.index') }}" class="filter-form">
                <div class="row g-3 align-items-end">
                    <!-- Search -->
                    <div class="col-md-5">
                        <div class="form-group-custom" style="margin-bottom: 0;">
                            <label style="font-size: 12px; font-weight: 500; color: #6B7280; margin-bottom: 4px;">
                                <i class="bi bi-search"></i> Search
                            </label>
                            <div class="input-group-custom" style="display: flex; gap: 6px;">
                                <input type="text"
                                    name="search"
                                    class="form-control-custom"
                                    placeholder="Search by title, client..."
                                    value="{{ request('search') }}"
                                    style="flex: 1;">
                                <button type="submit" class="btn-filter" style="padding: 8px 16px; width: auto;">
                                    <i class="bi bi-search"></i>
                                </button>
                                @if(request('search') || request('category') || request('status') || request('is_featured') !== null)
                                <a href="{{ route('admin.portfolios.index') }}" class="btn-reset-custom" style="padding: 8px 16px; width: auto;">
                                    <i class="bi bi-x-circle"></i>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Category Filter -->
                    <div class="col-md-2">
                        <div class="form-group-custom" style="margin-bottom: 0;">
                            <label style="font-size: 12px; font-weight: 500; color: #6B7280; margin-bottom: 4px;">
                                <i class="bi bi-folder"></i> Category
                            </label>
                            <select name="category" class="form-control-custom" onchange="this.form.submit()">
                                <option value="">All Categories</option>
                                @foreach($categories as $cat)
                                <option value="{{ $cat }}" {{ request('category') == $cat ? 'selected' : '' }}>
                                    {{ $cat }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Status Filter -->
                    <div class="col-md-2">
                        <div class="form-group-custom" style="margin-bottom: 0;">
                            <label style="font-size: 12px; font-weight: 500; color: #6B7280; margin-bottom: 4px;">
                                <i class="bi bi-funnel"></i> Status
                            </label>
                            <select name="status" class="form-control-custom" onchange="this.form.submit()">
                                <option value="">All Status</option>
                                <option value="published" {{ request('status') == 'published' ? 'selected' : '' }}>Published</option>
                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                            </select>
                        </div>
                    </div>

                    <!-- Featured Filter -->
                    <div class="col-md-2">
                        <div class="form-group-custom" style="margin-bottom: 0;">
                            <label style="font-size: 12px; font-weight: 500; color: #6B7280; margin-bottom: 4px;">
                                <i class="bi bi-star"></i> Featured
                            </label>
                            <select name="is_featured" class="form-control-custom" onchange="this.form.submit()">
                                <option value="">All</option>
                                <option value="1" {{ request('is_featured') == '1' ? 'selected' : '' }}>Featured</option>
                                <option value="0" {{ request('is_featured') == '0' ? 'selected' : '' }}>Not Featured</option>
                            </select>
                        </div>
                    </div>

                    <!-- Total Count -->
                    <div class="col-md-1">
                        <div style="font-size: 13px; color: #6B7280; padding-bottom: 8px;">
                            <i class="bi bi-database"></i>
                            <strong style="color: #1A1A2E;">{{ $portfolios->total() }}</strong>
                        </div>
                    </div>

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

        <!-- ===== TABLE ===== -->
        <div class="table-responsive-wrapper">
            <table class="table-custom" id="portfolioTable">
                <thead>
                    <tr>
                        
                        <th width="50">#</th>
                        <th width="80">Image</th>
                        <th>Title</th>
                        <th width="120">Category</th>
                        <th width="100">Featured</th>
                        <th width="100">Status</th>
                        <th width="80" class="text-center">Sort</th>
                        <th width="150">Created At</th>
                        <th width="130">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($portfolios as $portfolio)
                    <tr>
                        
                        <td>{{ $loop->iteration + ($portfolios->currentPage() - 1) * $portfolios->perPage() }}</td>
                        <td>
                            @if($portfolio->featured_image)
                            <img src="{{ asset('storage/' . $portfolio->featured_image) }}"
                                alt="{{ $portfolio->title }}"
                                class="portfolio-thumb">
                            @else
                            <div class="portfolio-thumb-placeholder">
                                <i class="bi bi-image"></i>
                            </div>
                            @endif
                        </td>
                        <td>
                            <div class="portfolio-title-cell">
                                <strong>{{ $portfolio->title }}</strong>
                                <span class="slug-text">{{ $portfolio->slug }}</span>
                                @if($portfolio->client)
                                <span class="client-text">
                                    <i class="bi bi-person"></i> {{ $portfolio->client }}
                                </span>
                                @endif
                            </div>
                        </td>
                        <td>
                            <span class="category-tag">{{ $portfolio->category ?? 'Uncategorized' }}</span>
                        </td>
                        <td>
                            <button type="button"
                                    class="featured-btn {{ $portfolio->is_featured ? 'active' : 'inactive' }}"
                                    onclick="toggleFeatured({{ $portfolio->id }})">
                                <i class="bi bi-{{ $portfolio->is_featured ? 'star-fill' : 'star' }}"></i>
                                {{ $portfolio->is_featured ? 'Featured' : 'Not Featured' }}
                            </button>
                        </td>
                        <td>
                            @if($portfolio->status == 'published')
                            <span class="status-badge active">
                                <i class="bi bi-check-circle-fill"></i> Published
                            </span>
                            @else
                            <span class="status-badge warning">
                                <i class="bi bi-pencil"></i> Draft
                            </span>
                            @endif
                        </td>
                        <td class="text-center">{{ $portfolio->sort_order ?? 0 }}</td>
                        <td>
                            <span class="date-cell">
                                <i class="bi bi-calendar3"></i>
                                {{ $portfolio->created_at->format('d M Y, h:i A') }}
                            </span>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <!-- Edit -->
                                <a href="{{ route('admin.portfolios.edit', $portfolio->id) }}"
                                   class="action-btn edit"
                                   title="Edit Project">
                                    <i class="bi bi-pencil-square"></i>
                                </a>

                                <!-- Toggle Status -->
                                <button type="button"
                                        class="action-btn {{ $portfolio->status == 'published' ? 'edit' : 'view' }}"
                                        title="{{ $portfolio->status == 'published' ? 'Move to Draft' : 'Publish' }}"
                                        onclick="toggleStatus({{ $portfolio->id }})">
                                    <i class="bi bi-{{ $portfolio->status == 'published' ? 'eye' : 'eye-slash' }}"></i>
                                </button>

                                <!-- Delete -->
                                <button type="button"
                                        class="action-btn delete"
                                        title="Delete Project"
                                        onclick="confirmDelete({{ $portfolio->id }})">
                                    <i class="bi bi-trash3"></i>
                                </button>
                            </div>

                            <!-- Delete Form -->
                            <form id="delete-form-{{ $portfolio->id }}"
                                  action="{{ route('admin.portfolios.destroy', $portfolio->id) }}"
                                  method="POST"
                                  style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr class="empty-state">
                        <td colspan="10">
                            <div class="empty-content">
                                <i class="bi bi-folder-open"></i>
                                <h5>No Projects Found</h5>
                                <p>Start by adding your first portfolio project</p>
                                <a href="{{ route('admin.portfolios.create') }}" class="btn-primary-gradient" style="padding: 8px 20px; font-size: 13px;">
                                    <i class="bi bi-plus-circle"></i> Add Project
                                </a>
                                @if(request('search') || request('category') || request('status') || request('is_featured') !== null)
                                <a href="{{ route('admin.portfolios.index') }}" class="btn-reset-custom" style="margin-top: 4px;">
                                    <i class="bi bi-x-circle"></i> Clear Filters
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- ===== TABLE FOOTER ===== -->
        <div class="table-footer-main">
            <div class="table-info">
                Showing <strong>{{ $portfolios->firstItem() ?? 0 }}</strong> to
                <strong>{{ $portfolios->lastItem() ?? 0 }}</strong> of
                <strong>{{ $portfolios->total() }}</strong> projects
            </div>
            <div class="pagination-wrapper">
                {{ $portfolios->links() }}
            </div>
        </div>

    </div>
</div>

<!-- ============================================
   SCRIPTS
============================================ -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // SELECT ALL CHECKBOX
        // ============================================
        window.toggleSelectAll = function() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.selectCheckbox');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = selectAll.checked;
            });
        };

        // ============================================
        // TOGGLE STATUS VIA AJAX
        // ============================================
        window.toggleStatus = function(id) {
            if (!confirm('Are you sure you want to change the status of this project?')) {
                return;
            }

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');

            const url = '/admin/portfolios/' + id + '/toggle-status';

            fetch(url, {
                    method: 'POST',
                    body: formData
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Failed to update status: ' + data.message);
                    }
                })
                .catch(function(error) {
                    alert('An error occurred while updating status.');
                    console.error('Error:', error);
                });
        };

        // ============================================
        // TOGGLE FEATURED VIA AJAX
        // ============================================
        window.toggleFeatured = function(id) {
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');

            const url = '/admin/portfolios/' + id + '/toggle-featured';

            fetch(url, {
                    method: 'POST',
                    body: formData
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Failed to update featured status: ' + data.message);
                    }
                })
                .catch(function(error) {
                    alert('An error occurred while updating featured status.');
                    console.error('Error:', error);
                });
        };

        // ============================================
        // CONFIRM SINGLE DELETE
        // ============================================
        window.confirmDelete = function(id) {
            if (confirm('Are you sure you want to delete this project? This action cannot be undone.')) {
                document.getElementById('delete-form-' + id).submit();
            }
        };

        // ============================================
        // CONFIRM BULK DELETE
        // ============================================
        window.confirmBulkDelete = function() {
            const selected = document.querySelectorAll('.selectCheckbox:checked');
            if (selected.length === 0) {
                alert('Please select at least one project to delete.');
                return;
            }

            if (confirm('Are you sure you want to delete ' + selected.length + ' selected projects? This action cannot be undone.')) {
                document.getElementById('bulkDeleteForm').submit();
            }
        };

        // ============================================
        // CHECKBOX COUNT UPDATE
        // ============================================
        document.querySelectorAll('.selectCheckbox').forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                const selected = document.querySelectorAll('.selectCheckbox:checked').length;
                const selectAll = document.getElementById('selectAll');
                const total = document.querySelectorAll('.selectCheckbox').length;

                if (selected === total) {
                    selectAll.checked = true;
                } else {
                    selectAll.checked = false;
                }
            });
        });

        console.log('✅ Portfolio loaded successfully!');
    });
</script>

@endsection