@extends('layouts.master')
@section('title', $title)
@section('content')
<style>
	tr {
    height: 45px;
}
hr {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}
p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}



</style>
<link href="{{ asset('css/Dashboard.css') }}" rel="stylesheet">
<input type="hidden" value="{{ url('/') }}" id="siteUrl">
    <div class="setting_admin">
        <div class="heading">
            <img src="{{ asset('images/dashicon.png') }}" alt="" />
            <h1 style="font-size: 30px; font-weight: 700; padding-top: 6px;">Dashboard</h1>
        </div>
        <div class="block_two">
            <div class="maine_one_left">
                <h3 class="contect_event">My Recent Calls</h3>
                <div class="maine_one_left_innerContainer">
                    @foreach($recent_calls as $rc)
                    <div class="innerContainer_checkboxs">
                        <div class="myRecentCall_user">
                            <img src="{{ asset('images/Sanju.png') }}" />
                            <p><b>{{isset($rc->candidate->first_name)?$rc->candidate->first_name:''}}  {{isset($rc->candidate->last_name)?$rc->candidate->last_name:''}} </b></p>
                        </div>
                        <div class="myRecentCall_date">
                            <img class="calender_image" src="{{ asset('images/AnnATS.png') }}" />
                            <p>{{\Carbon\Carbon::parse($rc->created_at)->format('d-m-y h:i A')}}</p>
                        </div>
                    </div>
                    <hr />
                    @endforeach
                </div>
            </div>
            <div class="maine_one_upper">
                <h3 class="contect_event">My Upcoming Calls</h3>
                <div class="maine_one_right_innerContainer">
                @foreach($upcomingCalls as $uc)
                    <div class="innerContainer_checkbox">
                        <div class="myRecentCall_user">
                            <p><b>{{$uc->title}}</b></p>
                        </div>
                        <div class="myRecentCall_date">
                            <img class="calender_image" src="{{ asset('images/AnnATS.png') }}" />
                            <p>{{$uc->date}} {{$uc->time}}</p>
                        </div>
                    </div>
                @endforeach    
                </div>
            </div>
            <div class="maine_one_right">
                <h3 class="contect_event">My Upcoming Events</h3>
                <div class="maine_one_right_innerContainer">
                    @foreach($upcomingEvents as $ue)
                        <div class="innerContainer_checkbox">
                            <div class="myRecentCall_user">
                                <p><b>{{$ue->title}}</b></p>
                            </div>
                            <div class="myRecentCall_date">
                                <img class="calender_image" src="{{ asset('images/AnnATS.png') }}" />
                                <p>{{$ue->date}} {{$ue->time}}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="block_two">
            <div class="maine_one_left">
                <h3 class="contect_event">Hiring Overview</h3>
                <div class="maine_one_left_innerContainer">
                    <div class="hiring-header">
                        <button class="chart-button" onclick="getData('week')">W</button>
                        <button class="chart-button" onclick="getData('month')">M</button>
                        <button class="chart-button" onclick="getData('year')">Y</button>
                    </div>
                    <div class="innerContainer_checkboxs">
                    <canvas id="hiringColumnChart" width="800" height="400"></canvas>
                    </div>

                    <div id="indicatorContainer"><div><div class="color-indicator" style="background-color: rgba(0, 0, 255, 0.4);"></div><span>Interview Completed</span></div><div><div class="color-indicator" style="background-color: rgba(255, 99, 132, 0.4);"></div><span>Placed</span></div><div><div class="color-indicator" style="background-color: rgba(255, 255, 0, 0.4);"></div><span>Submitted</span></div></div>
                </div>
            </div>
            <div class="maine_one_upper_table">
                <h3 class="contect_event">Recent Hires</h3>
                <div class="maine_one_right_innerContainer12">
                    <table class="recent_hire">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Company</th>
                                <th scope="col">Recruiter</th>
                                <th scope="col" style="padding-left: 46px;">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recent_hires as $rh)
                            <tr>
                                <td>{{$rh->Candidate->first_name}} {{$rh->Candidate->last_name}}</td>
                                <td>{{(!empty($rh->joborder->company->company_name))?$rh->joborder->company->company_name: ''}}</td>
                                <td>{{(!empty($rh->joborder->recruiterUser->name))?$rh->joborder->recruiterUser->name: ''}}</td>
                                <td>{{(!empty($rh->updated_at))?\Carbon\Carbon::parse($rh->updated_at)->format('d-m-y h:i A') : ''}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <img class="image_table_box" src="{{asset('images/table.png')}}" />
                </div>
            </div>
        </div>
        <div class="block_two">
            <div class="maine_four_upper_table">
                <h3 class="contect_event">
                Important Candidates (Submitted, Interviewing, Offered in Active Job
                Orders)
                </h3>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                                <th scope="col">Status</th>
                                <th scope="col">Position</th>
                                <th scope="col">Company</th>
                                <th scope="col">
                                Modified<img src="Image/tab.png" class="tab" />
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($important_candidates as $ic)
                                <tr>
                                    <td>{{(!empty($ic->Candidate))?$ic->Candidate->first_name: ''}}</td>
                                    <td>{{(!empty($ic->Candidate))?$ic->Candidate->last_name: ''}}</td>
                                    <td>{{(!empty($ic->candidateStatus))?$ic->candidateStatus->short_description: ''}}</td>
                                    <td class="">{{(!empty($ic->joborder))?$ic->joborder->designation: ''}}</td>
                                    <td>{{(!empty($ic->joborder))?$ic->joborder->company->company_name: ''}}</td>
                                    <td>{{(!empty($ic->updated_at))?\Carbon\Carbon::parse($ic->updated_at)->format('d-m-y h:i A'): ''}}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>    
@endsection
@push('scripts')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        var myChart;
        function getData(interval) {
            // Make an AJAX request to your Laravel route with the selected interval
            // Replace "YOUR_LARAVEL_URL" with your actual Laravel URL.
            if (myChart) {
            myChart.destroy();
            }
            var url = document.getElementById('siteUrl').value;
            fetch(url+`/hiring-data/${interval}`)
                .then(response => response.json())
                .then(data => {
                    // Call the function to render the chart using your charting library
                    renderChart(data);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }
        function renderChart(data) {
            // Use your charting library to render the column chart using the data
            // Example code using Chart.js:
            var ctx = document.getElementById('hiringColumnChart').getContext('2d');
            var labels = data.map(item => item.status);
            var counts = data.map(item => item.count);
           var colors = [
                'rgba(0, 0, 255, 0.4)',
                'rgba(255, 99, 132, 0.4)',
                'rgba(255, 255, 0, 0.4)'
            ];


            myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                labels: labels,
                datasets: [{
                    label: 'Data',
                    data: counts,
                    backgroundColor: colors,
                    borderColor: colors,
                    borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            ticks: {
                                // stepSize: 1,
                                beginAtZero: true,
                            },
                        },
                        x: {
                        ticks: {
                            display: false, // Hide the x-axis labels (labels below bars)
                            },
                        },
                    },
                    barPercentage: 0.4,
                    legend: {
                    display: false, // Hide the default legend
                    },
                }        
            });
        }
        getData('week');
    </script>
@endpush