@extends('layouts.app')

@section('page-pretitle', __('Management'))
@section('page-title', __('Projects'))

@section('content')
    {{-- Flash Messages --}}
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Responsive Alert Styles --}}
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important;
                left: 5% !important;
            }
        }

        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important;
                left: 2.5% !important;
            }
        }
        .btn-hover-blue:hover, .btn-hover-grey:focus {
            background-color: #0d6efd !important;
            color: #fff !important;
        }
        .btn-hover-red:hover, .btn-hover-grey:focus {
            background-color: #dc3545 !important;
            color: #fff !important;
        }
        .project-row {
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .project-row:hover {
            background-color: #f1f3f5;
        }
    </style>

    <div class="col-12">
        <div class="card shadow-sm">
            {{-- Search Filter --}}
            <div class="card-header d-flex flex-column align-items-start">
                <div class="d-flex align-items-center mb-2">
                    <ul class="nav nav-tabs border-0" role="tablist">
                        <li class="nav-item" role="presentation">
                            {{-- <a class="nav-link {{ request('is_registration') === null ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except('is_registration', 'page'), ['is_registration' => null])) }}"
                            role="tab">
                            {{ __('All') }}
                            </a> --}}
                            <a class="nav-link {{ request('is_registration') === null && !request('bookmarked') ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except(['is_registration', 'bookmarked', 'page']), ['is_registration' => null])) }}"
                            role="tab">
                            {{ __('All') }}
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            {{-- <a class="nav-link {{ request('is_registration') == '1' ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except('page'), ['is_registration' => 1])) }}"
                            role="tab">
                            {{ __('Registered') }}
                            </a> --}}
                            <a class="nav-link {{ request('is_registration') == '1' && !request('bookmarked') ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except(['bookmarked', 'page']), ['is_registration' => 1])) }}"
                            role="tab">
                            {{ __('Registered') }}
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            {{-- <a class="nav-link {{ request('is_registration') == '0' ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except('page'), ['is_registration' => 0])) }}"
                            role="tab">
                            {{ __('Unregistered') }}
                            </a> --}}
                            <a class="nav-link {{ request('is_registration') == '0' && !request('bookmarked') ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except(['bookmarked', 'page']), ['is_registration' => 0])) }}"
                            role="tab">
                            {{ __('Unregistered') }}
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{ request('bookmarked') == '1' ? 'active' : '' }}"
                            href="{{ route('project_list.index', array_merge(request()->except(['is_registration', 'page']), ['bookmarked' => 1])) }}"
                            role="tab">
                            {{ __('Bookmarked') }}
                            </a>
                        </li>
                    </ul>
                </div>
                

                <div class="d-flex justify-content-between w-100" data-bs-toggle="collapse" data-bs-target="#search-col">
                    <h3 class="card-title">{{ __('Search Filter') }}</h3>
                    <div class="card-actions">
                        <button type="button" class="btn-action" data-bs-toggle="collapse" data-bs-target="#search-col">
                            <i class="ti ti-search"></i>
                        </button>
                    </div>
                </div>
                <div id="search-col" class="row mt-3 collapse @if(request('q')) show @endif">
                    <form id="form-search" method="GET" action="{{ route('project_list.index') }}">
                        <input type="hidden" id="h-entries" name="entries" value="{{ request('entries') }}">
                        <div class="row">
                            {{-- Form Fields --}}
                            @foreach([
                                ['description', __('Description')],
                                ['ref_no', __('Reference No.')],
                                ['client', __('Client')]
                            ] as [$name, $label])
                                <div class="col-md-2">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="{{ $name }}" name="{{ $name }}" value="{{ request($name) }}" autocomplete="off">
                                        <label for="{{ $name }}">{{ $label }}</label>
                                    </div>
                                </div>
                            @endforeach

                            <div class="col-md-2">
                                <div class="form-floating">
                                    <select class="form-select" name="scope_id" id="scope_id">
                                        <option value="">{{ __('Select Scope') }}</option>
                                        @foreach ($scopes as $scope)
                                            <option value="{{ $scope->id }}" @selected(request('scope_id') == $scope->id)>{{ $scope->name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="scope_id">{{ __('Scope') }}</label>
                                </div>
                            </div>
                            
                            <div class="col-md-2">
                                <div class="form-floating">
                                    <select class="form-select" name="project_type_id" id="project_type_id">
                                        <option value="">{{ __('Select Project Type') }}</option>
                                        @foreach ($projectTypes as $type)
                                            <option value="{{ $type->id }}" @selected(request('project_type_id') == $type->id)>{{ $type->name }}</option>
                                        @endforeach
                                        <option value="none" {{ request('project_type_id') === 'none' ? 'selected' : '' }}>{{ __('No Project Type') }}</option>                                    </select>
                                    <label for="project_type_id">{{ __('Project Type') }}</label>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-floating">
                                    <select class="form-select" name="project_phase_id" id="project_phase_id">
                                        <option value="">{{ __('Select Project Phase') }}</option>
                                        @foreach ($projectPhases as $phase)
                                            <option value="{{ $phase->id }}" @selected(request('project_phase_id') == $phase->id)>{{ $phase->name }}</option>
                                        @endforeach
                                        <option value="none" {{ request('project_phase_id') === 'none' ? 'selected' : '' }}>{{ __('No Project Phase') }}</option>                                    </select>
                                    <label for="project_phase_id">{{ __('Project Phase') }}</label>
                                </div>
                            </div>


                            <div class="col-md-2">
                                <div class="form-floating">
                                    <select class="form-select" id="no_assignees" name="no_assignees">
                                        <option value="">{{ __('All Projects') }}</option>
                                        <option value="1" {{ request('no_assignees') == '1' ? 'selected' : '' }}>{{ __('No Assignees') }}</option>
                                        <option value="0" {{ request('no_assignees') === '0' ? 'selected' : '' }}>{{ __('Has Assignees') }}</option>
                                    </select>
                                    <label for="no_assignees">{{ __('Assignee') }}</label>
                                </div>
                            </div>

                            {{-- is_finished filter
                            <div class="col-md-2">
                                <div class="form-floating">
                                    <select class="form-select" id="is_finished" name="is_finished">
                                        <option value="">{{ __('All Projects') }}</option>
                                        <option value="1" {{ request('is_finished') == '1' ? 'selected' : '' }}>{{ __('Finished') }}</option>
                                        <option value="0" {{ request('is_finished') === '0' ? 'selected' : '' }}>{{ __('Unfinished') }}</option>
                                    </select>
                                    <label for="is_finished">{{ __('Finished Status') }}</label>
                                </div>
                            </div> --}}
                            {{-- Buttons --}}
                            
                            <div class="col-md-2 mt-2">
                                <div class="form-floating">
                                    <input type="number" class="form-control" id="received_year" name="received_year" value="{{ request('received_year') }}" placeholder="{{ __('Received Year') }}" autocomplete="off" min="2000" max="9999" maxlength="4" oninput="if(this.value.length > 4) this.value = this.value.slice(0,4);">
                                    <label for="received_year">{{ __('Received Year') }}</label>
                                </div>
                            </div>

                            <div class="col-md-2 mt-2">
                                <div class="form-floating">
                                    <input type="date" class="form-control" id="start_date" name="start_date"
                                        value="{{ request('start_date') }}" placeholder="{{ __('Start Date') }}" autocomplete="off">
                                    <label for="start_date">{{ __('Start Date') }}</label>
                                </div>
                            </div>
                            <div class="col-md-2 mt-2">
                                <div class="form-floating">
                                    <input type="date" class="form-control" id="end_date" name="end_date"
                                        value="{{ request('end_date') }}" placeholder="{{ __('End Date') }}" autocomplete="off">
                                    <label for="end_date">{{ __('End Date') }}</label>
                                </div>
                            </div>

                            <div class="col-md-2 mt-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="assignee_name" name="assignee_name"
                                        value="{{ request('assignee_name') }}" placeholder="{{ __('Assignee Name') }}" autocomplete="off">
                                    <label for="assignee_name">{{ __('Assignee Name') }}</label>
                                </div>
                            </div>

                            <div class="col-md-2 mt-2">
                                <div class="form-floating">
                                <select class="form-select" id="sort" name="sort">
                                    <option value="latest" {{ request('sort', $sort ?? 'latest') == 'latest' ? 'selected' : '' }}>
                                        {{ __('Latest to Oldest (by End Date)') }}
                                    </option>
                                    <option value="oldest" {{ request('sort', $sort ?? '') == 'oldest' ? 'selected' : '' }}>
                                        {{ __('Oldest to Latest (by End Date)') }}
                                    </option>
                                    <option value="newest_data" {{ request('sort', $sort ?? '') == 'newest_data' ? 'selected' : '' }}>
                                        {{ __('Newest Updated Data') }}
                                    </option>
                                    <option value="year_asc" {{ request('sort', $sort ?? '') == 'year_asc' ? 'selected' : '' }}>
                                        {{ __('Received Year (Ascending)') }}
                                    </option>
                                    <option value="year_desc" {{ request('sort', $sort ?? '') == 'year_desc' ? 'selected' : '' }}>
                                        {{ __('Received Year (Descending)') }}
                                    </option>
                                </select>
                                    <label for="sort">{{ __('Sort By') }}</label>
                                </div>
                            </div>

                            {{-- Preserve tab filter --}}
                            @if(request()->has('is_registration'))
                                <input type="hidden" name="is_registration" value="{{ request('is_registration') }}">
                            @endif

                            @if(request()->has('bookmarked'))
                                <input type="hidden" name="bookmarked" value="{{ request('bookmarked') }}">
                            @endif

                            {{-- Search and Reset Buttons --}}

                            <div class="col-auto d-flex align-items-center">
                                <button type="submit" name="q" value="1" class="btn btn-ghost-info me-1" title="{{ __('Search') }}">
                                    <i class="ti ti-search"></i>
                                </button>
                                <a href="{{ route('project_list.index', request()->only(['is_registration', 'bookmarked'])) }}"
                                class="btn btn-ghost-yellow"
                                title="{{ __('Reset') }}">
                                    <i class="ti ti-refresh"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Add Button --}}
            <div class="card-body border-bottom py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    {{-- Entries Selector --}}
                    @include('asset.entries')

                    <div class="d-flex gap-2 flex-wrap ms-auto">
                        {{-- Upload CSV --}}
                        {{-- <a href="{{ route('project_list.import.form') }}" class="btn">
                            <i class="ti ti-upload me-1"></i> {{ __('Upload CSV') }}
                        </a> --}}

                        {{-- Download All as PDF --}}
                        <a href="{{ route('projects.download.pdf.all', request()->query()) }}" class="btn btn-icon shadow-sm btn-hover-red btn-outline-danger bg-red-lt" title="{{ __('Download PDF') }}">
                            <i class="ti ti-file-type-pdf" style="font-size: 1.4em;"></i>
                        </a>

                        {{-- Download All as Word --}}
                        <a href="{{ route('projects.download.word.all', request()->query()) }}" class="btn btn-icon shadow-sm btn-hover-blue btn-outline-primary bg-blue-lt" title="{{ __('Download Word') }}">
                            <i class="ti ti-file-type-docx" style="font-size: 1.4em;"></i>
                        </a>

                        {{-- Add New Project --}}
                        @if (auth()->user()->role == 'admin')
                            <a href="{{ route('project_list.create') }}" class="btn btn-success">
                                <i class="ti ti-plus me-1"></i> {{ __('Add Project') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>


            {{-- Project Table --}}
            <div class="table-responsive">
                <table class="table card-table table-vcenter text-nowrap">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Description</th>
                            <th>Client</th>
                            <th class="text-center">Received Year</th>
                            <th class="text-center">Start Date</th>
                            <th class="text-center">End Date</th>
                            <th class="text-center">Scope</th>
                            <th class="text-center">Assignees</th>
                            <th class="text-center">Project Progress</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($projects as $key => $project)
                            {{-- <tr onclick="window.location='{{ route('project.tasks', $project->id) }}';" style="cursor: pointer;"> --}}
                            <tr class="project-row" onclick="window.location='{{ route('project.tasks', $project->id) }}';" title="Click to view project's task page">
                                <td>{{ $key + $projects->firstItem() }}</td>
                                <td style="white-space: normal;">
                                    <div class="d-flex flex-column">
                                        <div class="text-primary fw-bold mb-1">
                                            <i class="ti ti-info-circle me-1"></i> {{ strtoupper($project->ref_no ?? '-') }}
                                            @if ($project->is_registration)
                                                <span class="badge badge-outline text-teal mx-2">Registered</span>
                                            @endif
                                        </div> 
                                        <div style="text-transform:uppercase;text-align:justify;">{{ $project->description }}</div>
                                    </div>
                                </td>
                                <td style="white-space: normal; text-align: justify;"> {{ strtoupper($project->client ? $project->client : '-') }}</td>
                                <td class="text-center">
                                    {{-- <span class="badge badge-outline text-blue ms-3"> --}}
                                    {{ $project->received_year ? $project->received_year : '-' }}
                                    {{-- </span> --}}
                                </td>
                                <td class="text-center">
                                    {{-- <span class="badge badge-outline text-blue ms-3"> --}}
                                        {{ $project->start_date ? \Carbon\Carbon::parse($project->start_date)->format('d M Y') : '-' }}
                                    {{-- </span> --}}
                                </td>
                                <td class="text-center">
                                    {{-- <span class="badge badge-outline text-blue ms-3"> --}}
                                        {{ $project->end_date ? \Carbon\Carbon::parse($project->end_date)->format('d M Y') : '-' }}
                                    {{-- </span>  --}}
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-outline text-blue ms-3">
                                        {{ $project->scope->name ?? 'N/A' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-pill bg-{{ $project->assignees->count() ? 'blue' : 'red' }}-lt"
                                          role="button"
                                          style="cursor: pointer; min-width:40px;font-size: 14px;"
                                          data-bs-toggle="modal"
                                          data-bs-target="#assigneesModal-{{ $project->id }}"
                                          onclick="event.stopPropagation();">
                                        {{ $project->assignees->count() }}
                                    </span>
                                </td>
                                <td>
                                    @if ($project->project_type && str_contains(strtolower($project->project_type->name), 'cancel'))
                                        <div class="text-danger fw-bold">Cancelled Project</div>
                                        <small class="text-muted">{{ $project->project_type->name }}</small>
                                    @else
                                        <div class="d-flex align-items-center">
                                            <div style="flex: 1;">
                                                <div class="me-2 mb-2">{{ $project->weighted_progress }}%</div>
                                                <div class="progress mb-1" style="height: 8px;">
                                                    <div class="progress-bar
                                                        @if($project->weighted_progress < 60) bg-danger
                                                        @elseif($project->weighted_progress < 80) bg-warning
                                                        @else bg-success @endif"
                                                        role="progressbar"
                                                        style="width: {{ $project->weighted_progress }}%;"></div>
                                                </div>
                                                <small class="text-muted">{{ $project->project_type->name ?? 'No Type' }}</small>
                                            </div>
                                        </div>
                                    @endif

                                    {{-- Show remarks box only if remarks exist --}}
                                    @if ($project->remarks)
                                        <div class="mt-2 p-2 border rounded bg-light text-dark">
                                            <strong style="font-size: 13px;">Remarks:</strong>

                                            @php
                                                $words = explode(' ', $project->remarks); # Split remarks into words
                                            @endphp

                                            <div style="text-align: justify;">
                                                @foreach ($words as $index => $word)
                                                    {{ $word }}
                                                    @if (($index + 1) % 2 == 0) {{-- Add line break after every 2 words --}}
                                                        <br>
                                                    @endif
                                                @endforeach
                                            </div>

                                        </div>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <div class="d-inline-flex align-items-center gap-1">

                                        {{-- Dropdown --}}
                                        <div class="dropdown">
                                            <button class="btn btn-icon btn-light" type="button"
                                                id="dropdownMenuButton{{ $project->id }}"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false"
                                                onclick="event.stopPropagation();">
                                                <i class="ti ti-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a href="{{ route('project_list.show', ['id' => $project->id] + request()->query()) }}"
                                                        class="dropdown-item text-primary">
                                                        <i class="ti ti-eye me-2"></i> {{ __('View') }}
                                                    </a>
                                                </li>
                                                @if (auth()->user()->role == 'admin')
                                                    <li>
                                                        <a href="{{ route('project_list.edit', ['project_list' => $project->id] + request()->query()) }}"
                                                            class="dropdown-item text-warning">
                                                            <i class="ti ti-edit me-2"></i> {{ __('Edit') }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <form action="{{ route('project_list.destroy', $project->id) }}" method="POST"
                                                            class="delete-form" data-project="{{ $project->id }}">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="button" class="dropdown-item text-danger btn-delete-project">
                                                                <i class="ti ti-trash me-2"></i> {{ __('Delete') }}
                                                            </button>
                                                        </form>
                                                    </li>
                                                @endif
                                            </ul>
                                        </div>

                                        {{-- Bookmark --}}
                                        <form method="POST" action="{{ route('bookmark.toggle') }}" class="bookmark-form mb-0">
                                            @csrf
                                            <input type="hidden" name="type" value="project">
                                            <input type="hidden" name="id" value="{{ $project->id }}">
                                            <button type="submit"
                                                class="btn btn-icon {{ auth()->user()->bookmarkedProjects->contains('project_id', $project->id) ? 'btn-warning' : 'btn-outline-secondary' }}"
                                                onclick="event.stopPropagation();">
                                                <i class="ti ti-star"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            {{-- Assignees Modal --}}
                            <div class="modal fade" id="assigneesModal-{{ $project->id }}" tabindex="-1" aria-labelledby="assigneesModalLabel-{{ $project->id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header bg-dark text-white">
                                            <h5 class="modal-title">Assigned Assignees</h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            @if($project->assignees->isEmpty())
                                                <p>No assignees assigned.</p>
                                            @else
                                                <ul class="list-group">
                                                    @foreach($project->assignees as $assignee)
                                                        <li class="list-group-item">{{ $assignee->name }}</li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted">No Records</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if ($projects->hasPages())
                <div class="card-footer bg-transparent border-top-0">
                    {{ $projects->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
                </div>
            @endif
             
            <div class="card-footer">
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
document.addEventListener("DOMContentLoaded", () => {
    let formToSubmit = null;

    // When delete button is clicked, show modal
    document.querySelectorAll('.btn-delete-project').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            formToSubmit = this.closest('form');
            const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
            modal.show();
        });
    });

    // When modal delete button is clicked, submit the form
    document.getElementById('modalDeleteBtn').addEventListener('click', function() {
        if (formToSubmit) {
            formToSubmit.submit();
        }
    });


    // Auto-submit search on entries change
    $('#entries').on('change', function () {
        $('#h-entries').val($(this).val());
        $('#form-search').submit();
    });

    document.getElementById('sort').addEventListener('change', function () {
        document.getElementById('form-search').submit();
    });

    // Auto-hide alerts
    ['error-alert', 'success-alert', 'validation-alert'].forEach(id => {
        const alert = document.getElementById(id);
        if (alert) {
            setTimeout(() => {
                alert.classList.remove('show');
                alert.classList.add('hide');
                setTimeout(() => alert.remove(), 500);
            }, 3000);
        }
    });
});
</script>
@endsection