@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/calendars/fullcalendar.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/buttons.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/rowGroup.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/charts/chart-apex.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Dashboard</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Recruitment
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <button class="btn btn-primary-inner btn-sm mb-sm-0 mb-50" data-bs-target="#filter" data-bs-toggle="modal"><i
                    data-feather="filter"></i> Filter</button>
        </div>
    </div>
@endpush

@section('content')
    <section id="chartjs-chart">
        <div class="row">
            <div class="col-md-12 col-12">
                <div class="row rec-topheaddata">
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/tr.png">
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $applicantData['total_applicants'] }}</h3>
                                    <p>Total Applicants</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg ogbox">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/og.png">
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $applicantData['on_going_applicants'] }}</h3>
                                    <p>On-Going Recruitment</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg jmbox">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/jm.png">
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $applicantData['hired_applicants'] }}</h3>
                                    <p>Hired Candidates</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg thbox">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/th.png">
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $applicantData['conversion_rate'] }}%</h3>
                                    <p>Conversion Rate</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-md-12 mt-2">
                <div class="row match-height">
                    <div class="col-md-4">
                        <div class="card skill-card-section">
                            <div class="card-header">
                                Skills Status
                            </div>
                            <div class="card-body">
                                <div class="recskillprof">
                                    @foreach ($skillsData as $skill)
                                        <h3>{{ $skill->name ?: 'N/A' }} <span>{{ $skill->candidates }} Candidates</span>
                                        </h3>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card skill-card-section">
                            <div class="card-header">
                                Source Platform
                            </div>
                            <div class="card-body mt-3">
                                <div id="donut-soucecv"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card skill-card-section">
                            <div class="card-body">
                                <div class="intcalview">
                                    <div id="calendar"></div>
                                </div>

                                <div class="intschlist">
                                    <h3>Scheduled Interviews <a href="#" class="font-small-2 mb-0 float-end">View
                                            All</a></h3>
                                    <p id="interviewDetails"></p>
                                </div>
                            </div>
                        </div>

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


            <div class="col-md-12 col-12">
                <div class="card  new-cardbox">


                    <ul class="nav nav-tabs border-bottom" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#Current">Requests
                                &nbsp;<span>({{ count($jobRequisitions) }})</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#Upcoming">Created Job
                                &nbsp;<span>({{ count($jobOpenings) }})</span></a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="Current">
                            <div class="table-responsive candidates-tables border-0">
                                <table class="datatables-basic table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Job Opening Id</th>
                                            <th>Position Title</th>
                                            <th>Exp.</th>
                                            <th>Opening</th>
                                            <th>Request By</th>
                                            <th>Department</th>
                                            <th>Expected D.O.J</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($jobRequisitions as $key => $jobRequisition)
                                            @php
                                                $createdBy =
                                                    $jobRequisition->created_by_type == 'employee'
                                                        ? $jobRequisition->createdByEmployee
                                                        : $jobRequisition->createdByAdmin;
                                            @endphp
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td class="text-nowrap">
                                                    {{ date('d-m-Y', strtotime($jobRequisition->created_at)) }}</td>
                                                <td class="fw-bolder text-dark">-</td>
                                                <td>{{ $jobRequisition->position_title }}</td>
                                                <td>{{ @$jobRequisition->workExperience->name }}</td>
                                                <td>{{ $jobRequisition->number_of_position }}</td>
                                                <td class="">

                                                    <div class="d-flex flex-row">
                                                        <div class="avatar me-75">
                                                            <img src="{{ $createdBy->image }}"
                                                                onerror="this.src='/assets/img/default-profile-3.png'"
                                                                width="25" height="25" alt="Avatar">
                                                        </div>
                                                        <div class="my-auto">
                                                            <h6 class="mb-0 fw-bolder text-dark hr-dashemplname">
                                                                {{ $createdBy->name }}
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>-</td>
                                                <td>-</td>
                                                <td class="text-nowrap">
                                                    <a href="#">
                                                        <i data-feather="edit-3" class="me-50"></i>
                                                        <span>Create Job</span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="Upcoming">
                            <div class="table-responsive candidates-tables candidate-colunlast border-0 overflow-scroll">
                                <table class="datatables-basic table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Job Opening Id</th>
                                            <th>Position Title</th>
                                            <th>Exp.</th>
                                            <th>Opening</th>
                                            <th>Skills</th>
                                            <th>Request By</th>
                                            <th>Department</th>
                                            <th>Expected D.O.J</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($jobOpenings as $key => $jobOpening)
                                            @php
                                                $requestedBy =
                                                    @$jobOpening->jobRequisition->created_by_type == 'employee'
                                                        ? @$jobOpening->jobRequisition->createdByEmployee
                                                        : @$jobOpening->jobRequisition->createdByAdmin;
                                            @endphp
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td class="text-nowrap">
                                                    {{ date('d-m-Y', strtotime($jobOpening->created_at)) }}</td>
                                                <td class="fw-bolder text-dark">{{ $jobOpening->job_id }}</td>
                                                <td>{{ $jobOpening->posting_title }}</td>
                                                <td>{{ @$jobOpening->workExperience->name }}</td>
                                                <td>{{ $jobOpening->no_of_opening }}</td>
                                                <td>
                                                    @foreach ($jobOpening->jobSkill->slice(0, 2) as $skill)
                                                        <span
                                                            class="badge rounded-pill badge-light-secondary badgeborder-radius">{{ @$skill->skill->name }}</span>
                                                    @endforeach
                                                    @php
                                                        $remainingSkills = count($jobOpening->jobSkill) - 2;
                                                    @endphp
                                                    @if ($remainingSkills > 0)
                                                        <span class="skilnum">+{{ $remainingSkills }}</span>
                                                    @endif
                                                </td>
                                                <td class="">
                                                    @if ($requestedBy)
                                                        <div class="d-flex flex-row">
                                                            <div class="avatar me-75">
                                                                <img src="{{ $requestedBy->image }}"
                                                                    onerror="this.src='/assets/img/default-profile-3.png'"
                                                                    width="25" height="25" alt="Avatar">
                                                            </div>
                                                            <div class="my-auto">
                                                                <h6 class="mb-0 fw-bolder text-dark hr-dashemplname">
                                                                    {{ $requestedBy->name }}
                                                                </h6>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </td>
                                                <td>-</td>
                                                <td>-</td>
                                                <td><span
                                                        class="badge rounded-pill badge-light-success badgeborder-radius">{{ $jobOpening->status }}</span>
                                                </td>
                                                <td class="tableactionnew">
                                                    <div class="dropdown">
                                                        <button type="button"
                                                            class="btn btn-sm dropdown-toggle hide-arrow py-0"
                                                            data-bs-toggle="dropdown">
                                                            <i data-feather="more-vertical"></i>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a class="dropdown-item" href="#">
                                                                <i data-feather="users" class="me-50"></i>
                                                                <span>Add Candidate</span>
                                                            </a>
                                                            <a class="dropdown-item" href="#">
                                                                <i data-feather="trash-2" class="me-50"></i>
                                                                <span>Delete</span>
                                                            </a>
                                                            <a class="dropdown-item" href="#">
                                                                <i data-feather="edit-3" class="me-50"></i>
                                                                <span>Edit</span>
                                                            </a>
                                                            <a class="dropdown-item" href="#">
                                                                <i data-feather="eye" class="me-50"></i>
                                                                <span>View Detail</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
        <div class="modal-dialog sidebar-sm">
            <form class="add-new-record modal-content pt-0">
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">Apply Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body flex-grow-1">
                    <div class="mb-1">
                        <label class="form-label" for="fp-range">Select Date Range</label>
                        <input type="text" id="fp-range" class="form-control flatpickr-range"
                            placeholder="YYYY-MM-DD to YYYY-MM-DD" />
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Select Manager</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Select Department</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Select Designation</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer justify-content-start">
                    <button type="button" class="btn btn-primary data-submit mr-1">Apply</button>
                    <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/calendar/fullcalendar.min.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>

    <script src="/app-assets/vendors/js/charts/apexcharts.min.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-apex.js"></script>


    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        })


        $(function() {

            var dt_basic_table = $('.datatables-basic'),
                dt_date_table = $('.dt-date'),
                dt_complex_header_table = $('.dt-complex-header'),
                dt_row_grouping_table = $('.dt-row-grouping'),
                dt_multilingual_table = $('.dt-multilingual'),
                assetPath = '../../../app-assets/';

            if ($('body').attr('data-framework') === 'laravel') {
                assetPath = $('body').attr('data-asset-path');
            }

            // DataTable with buttons
            // --------------------------------------------------------------------

            if (dt_basic_table.length) {
                var dt_basic = dt_basic_table.DataTable({

                    order: [
                        [2, 'desc']
                    ],
                    dom: '<"d-flex justify-content-between align-items-center mx-2 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-3 withoutheadbuttin dt-action-buttons text-end"B><"col-sm-12 col-md-3"f>>t<"d-flex justify-content-between mx-2 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                    displayLength: 7,
                    lengthMenu: [7, 10, 25, 50, 75, 100],
                    buttons: [{
                            extend: 'collection',
                            className: 'btn btn-outline-secondary dropdown-toggle',
                            text: feather.icons['share'].toSvg({
                                class: 'font-small-4 mr-50'
                            }) + 'Export',
                            buttons: [{
                                    extend: 'print',
                                    text: feather.icons['printer'].toSvg({
                                        class: 'font-small-4 mr-50'
                                    }) + 'Print',
                                    className: 'dropdown-item',
                                    exportOptions: {
                                        columns: [3, 4, 5, 6, 7]
                                    }
                                },
                                {
                                    extend: 'csv',
                                    text: feather.icons['file-text'].toSvg({
                                        class: 'font-small-4 mr-50'
                                    }) + 'Csv',
                                    className: 'dropdown-item',
                                    exportOptions: {
                                        columns: [3, 4, 5, 6, 7]
                                    }
                                },
                                {
                                    extend: 'excel',
                                    text: feather.icons['file'].toSvg({
                                        class: 'font-small-4 mr-50'
                                    }) + 'Excel',
                                    className: 'dropdown-item',
                                    exportOptions: {
                                        columns: [3, 4, 5, 6, 7]
                                    }
                                },
                                {
                                    extend: 'pdf',
                                    text: feather.icons['clipboard'].toSvg({
                                        class: 'font-small-4 mr-50'
                                    }) + 'Pdf',
                                    className: 'dropdown-item',
                                    exportOptions: {
                                        columns: [3, 4, 5, 6, 7]
                                    }
                                },
                                {
                                    extend: 'copy',
                                    text: feather.icons['copy'].toSvg({
                                        class: 'font-small-4 mr-50'
                                    }) + 'Copy',
                                    className: 'dropdown-item',
                                    exportOptions: {
                                        columns: [3, 4, 5, 6, 7]
                                    }
                                }
                            ],
                            init: function(api, node, config) {
                                $(node).removeClass('btn-secondary');
                                $(node).parent().removeClass('btn-group');
                                setTimeout(function() {
                                    $(node).closest('.dt-buttons').removeClass('btn-group')
                                        .addClass('d-inline-flex');
                                }, 50);
                            }
                        },

                    ],

                    language: {
                        paginate: {
                            // remove previous & next text from pagination
                            previous: '&nbsp;',
                            next: '&nbsp;'
                        }
                    }
                });
                $('div.head-label').html('<h6 class="mb-0">Event List</h6>');
            }

            // Flat Date picker
            if (dt_date_table.length) {
                dt_date_table.flatpickr({
                    monthSelectorType: 'static',
                    dateFormat: 'm/d/Y'
                });
            }

            // Add New record
            // ? Remove/Update this code as per your requirements ?
            var count = 101;
            $('.data-submit').on('click', function() {
                var $new_name = $('.add-new-record .dt-full-name').val(),
                    $new_post = $('.add-new-record .dt-post').val(),
                    $new_email = $('.add-new-record .dt-email').val(),
                    $new_date = $('.add-new-record .dt-date').val(),
                    $new_salary = $('.add-new-record .dt-salary').val();

                if ($new_name != '') {
                    dt_basic.row
                        .add({
                            responsive_id: null,
                            id: count,
                            full_name: $new_name,
                            post: $new_post,
                            email: $new_email,
                            start_date: $new_date,
                            salary: '$' + $new_salary,
                            status: 5
                        })
                        .draw();
                    count++;
                    $('.modal').modal('hide');
                }
            });

            // Delete Record
            $('.datatables-basic tbody').on('click', '.delete-record', function() {
                dt_basic.row($(this).parents('tr')).remove().draw();
            });



        });

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var interviewData = @json($jobInterviews);

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'title',
                    center: '',
                    right: 'prev,next'
                },
                contentHeight: 200,
                editable: true,
                e: true, // allow "more" link when too many events

                // Event click handler
                eventClick: function(event) {
                    $('#interviewDetails').html(event.event.extendedProps.description);
                },

                // Date click handler
                dateClick: function(info) {
                    let html = 'No interview scheduled';
                    const clickedDate = info.dateStr;

                    // Filter events to check if any matches the clicked date
                    let eventsOnDate = calendar.getEvents().filter(event => event.startStr ===
                        clickedDate);

                    // Display the first event's description if present
                    if (eventsOnDate.length > 0) {
                        html = eventsOnDate[0].extendedProps.description;
                    }

                    $('#interviewDetails').html(html);
                },

                // Custom event content rendering
                eventContent: function(info) {
                    return {
                        html: info.event.title
                    };
                },

                // Load events from the provided interview data
                events: interviewData.map((interview => {
                    return {
                        title: '<div class="dotcirclatt present"></div>',
                        description: interview.description,
                        start: interview.interview_date
                    };
                }))
            });

            calendar.render();

            // Automatically click on today's date after calendar is rendered
            const todayDate = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format

            // Trigger the dateClick event for today's date
            calendar.trigger('dateClick', {
                date: new Date(todayDate), // The date object
                dateStr: todayDate, // The date in YYYY-MM-DD format
                allDay: true
            });
        });


        var donutChartsourcecv = document.querySelector('#donut-soucecv'),
            donutChartConfigrolesoucv = {
                chart: {
                    height: 400,
                    type: 'donut'
                },
                legend: {
                    show: true,
                    position: 'bottom'
                },
                labels: @json($sourceData->pluck('source')),
                series: @json($sourceData->pluck('candidates')),
                colors: ['#BB205E', '#D9693D', '#6B12B7', '#B822DD', '#31A75C', '#00BBEA'],
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return parseInt(val) + '%';
                    }
                },

                plotOptions: {

                    pie: {
                        donut: {

                            labels: {
                                show: true,
                                name: {
                                    fontSize: '2rem',
                                    fontFamily: 'Montserrat'
                                },
                                value: {
                                    fontSize: '1rem',
                                    fontFamily: 'Montserrat',
                                    formatter: function(val) {
                                        return parseInt(val);
                                    }
                                },
                                total: {
                                    show: true,
                                    fontSize: '1.5rem',
                                    label: 'Total CV',

                                }
                            }
                        }
                    }
                },
                stroke: {
                    width: 0,

                },
                responsive: [{
                        breakpoint: 992,
                        options: {
                            chart: {
                                height: 380
                            }
                        }
                    },
                    {
                        breakpoint: 576,
                        options: {
                            chart: {
                                height: 320
                            },
                            plotOptions: {
                                pie: {
                                    donut: {
                                        labels: {
                                            show: true,
                                            name: {
                                                fontSize: '1.5rem'
                                            },
                                            value: {
                                                fontSize: '1rem'
                                            },
                                            total: {
                                                fontSize: '1.5rem'
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                ]
            };


        if (typeof donutChartsourcecv !== undefined && donutChartsourcecv !== null) {
            var donutChartroletaskcv = new ApexCharts(donutChartsourcecv, donutChartConfigrolesoucv);
            donutChartroletaskcv.render();
        }
    </script>
@endpush