@extends('backend.layouts_backend.master2')

@section('title')
    Project Details
@endsection

@section('extra_styles')
    <style>
        .chart-container {
            width: 100%;
            max-width: 600px;
            margin: 40px auto;
        }
    </style>
@endsection

@section('content')
    {{-- header --}}
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0"> Project Details</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">
            @if (Auth::user()->can('project-list'))
                <a href="{{ route('projects.create') }}">
                    <button type="button" class="btn btn-primary btn-icon-text me-2 mb-2 mb-md-0">
                        <i class="btn-icon-prepend" data-feather="eye"></i>
                        Add Project
                    </button>
                </a>
            @endif

            @if (Auth::user()->can('project-list'))
                <a href="{{ route('projects.index') }}">
                    <button type="button" class="btn btn-success btn-icon-text me-2 mb-2 mb-md-0">
                        <i class="btn-icon-prepend" data-feather="eye"></i>
                        All Projects
                    </button>
                </a>
            @endif

        </div>
    </div>
    <hr>

    {{-- end header --}}

    <div class="card">
        <div class="card-body" style="padding-top:30px;padding-bottom:30px;">
            {{-- alert add item --}}
            @if (session('messagesave'))
                {{-- <div class="alert alert-success" > {{ session('message')}} </div> --}}
                <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show mb-3"
                    role="alert">
                    <i class="mdi mdi-check-all label-icon"></i>
                    {{ session('messagesave') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- alert delete item --}}
            @if (session('messagedelete'))
                <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-3"
                    role="alert">
                    <i class="mdi mdi-block-helper label-icon"></i>
                    {{ session('messagedelete') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {{-- <div class="alert alert-danger" > {{ session('messagedelete')}} </div> --}}
            @endif

            {{-- alert update item --}}
            @if (session('messageupdate'))
                <div class="alert alert-info alert-dismissible alert-label-icon label-arrow fade show mb-3" role="alert">
                    <i class="mdi mdi-check-all label-icon"></i>
                    {{ session('messageupdate') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </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

            {{-- project details --}}
            @include('backend.pages_backend.projects.sections.project_details')
            {{-- end of project details --}}

            {{-- project expenses --}}
            @include('backend.pages_backend.projects.sections.project_expenses')
            {{-- end of project expenses --}}

            {{-- project payment deposits --}}
            @include('backend.pages_backend.projects.sections.project_payment_deposits')
            {{-- end of project payment deposits --}}

            {{-- proeject staff payment budgets/allocations --}}
            @include('backend.pages_backend.projects.sections.project_staff_payment_budget_allocations')
            {{-- end of project staff payment budgets/allocations --}}

            {{-- project staff payment --}}
            @include('backend.pages_backend.projects.sections.project_staff_payment')
            {{-- end of project staff payment --}}

            {{-- project tasks/activities --}}
            @include('backend.pages_backend.projects.sections.project_tasks_activities')
            {{-- end of project tasks/activities --}}

        </div>
    </div>
@endsection

@section('extra_scripts')
    {{-- handline select2  --}}
    <script>
        // all select2 ids
        $('.searchable,.add_more_select_ids').select2({
            width: '100%',
        });

        // make select2 better display in input fields //avoid overlap
        $('.select2-selection.select2-selection--single').css('height', 'calc(2.85rem)');
        $('.select2-selection.select2-selection--single').css('padding-top', '3px');
        $('.select2-selection__arrow').css('top', '10px');
    </script>


    <script>
        //update progress completion range
        function updateProgressValue(value) {
            document.getElementById('progressValue').textContent = value + '%';
        }

        //update existing progress completion range
        function updateExistingProgressValue(rangeInput) {
            // Find the closest .input-group parent, then the .progress-value span inside it
            const progressSpan = rangeInput.closest('.input-group').querySelector('.progress-value');
            if (progressSpan) {
                progressSpan.textContent = rangeInput.value + '%';
            }
        }
    </script>


    {{-- main project completion progress chart --}}
    <script>
        const ctx = document.getElementById('project_completion_progress').getContext('2d');

        const data = {
            labels: ['Progress'],
            datasets: [{
                label: 'Completion',
                data: [{{ $project['completion_progress'] }}],
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderRadius: 10,
                barThickness: 30,
                maxBarThickness: 40
            }]
        };

        const options = {
            indexAxis: 'y',
            scales: {
                x: {
                    max: 100,
                    beginAtZero: true,
                    grid: {
                        display: true
                    },
                    ticks: {
                        callback: value => `${value}%`
                    }
                },
                y: {
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `Progress: ${context.raw}%`;
                        }
                    }
                }
            }
        };

        new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    </script>

    {{-- task project completion progress chart --}}
    <script>
        // Get all task progress canvas elements
        const taskProgressCanvases = document.querySelectorAll('#task_project_completion_progress');

        taskProgressCanvases.forEach((canvas, index) => {
            const ctx = canvas.getContext('2d');

            // Get the progress value from the parent list item
            const listItem = canvas.closest('.list-group-item');
            const progressText = listItem.textContent.match(/Progress\s*:\s*(\d+)/);
            const progressValue = progressText ? parseInt(progressText[1]) : 0;

            const data2 = {
                labels: ['Progress'],
                datasets: [{
                    label: 'Completion',
                    data: [progressValue],
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                    borderRadius: 10,
                    barThickness: 30,
                    maxBarThickness: 40
                }]
            };

            const options = {
                indexAxis: 'y',
                scales: {
                    x: {
                        max: 100,
                        beginAtZero: true,
                        grid: {
                            display: true
                        },
                        ticks: {
                            callback: value => `${value}%`
                        }
                    },
                    y: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `Progress: ${context.raw}%`;
                            }
                        }
                    }
                }
            };

            new Chart(ctx, {
                type: 'bar',
                data: data2,
                options: options
            });
        });
    </script>



    <script>
        //update progress completion range
        function updateProgressValue(value) {
            document.getElementById('progressValue').textContent = value + '%';
        }
    </script>
@endsection