@extends('layouts.app')

@section('content')
<style type="text/css">
.apic {
    background-color: #93C47D;
    font-size: 14px;
    font-weight: bold;
}

.bpic {
    background-color: #FFD966;
    font-size: 14px;
    font-weight: bold;
}

.cpic {
    background-color: #F6B26B;
    font-size: 14px;
    font-weight: bold;
}

.dpic {
    background-color: #6D9EEB;
    font-size: 14px;
    font-weight: bold;
}

.epic {
    background-color: #8E7CC3;
    font-size: 14px;
    font-weight: bold;
}

.fpic {
    background-color: #46BDC6;
    font-size: 14px;
    font-weight: bold;
}

.gpic {
    background-color: #C27BA0;
    font-size: 14px;
    font-weight: bold;
}

.hpic {
    background-color: #FFE599;
    font-size: 14px;
    font-weight: bold;
}

.ipic {
    background-color: #EA4335;
    font-size: 14px;
    font-weight: bold;
}
.jpic {
    background-color: green;
    font-size: 14px;
    font-weight: bold;
}
</style>
<div class="page-wrapper">
    <!-- Page-header start -->
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">
                <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="{{ url('') }}"> <i class="feather icon-home"></i> </a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{ url('interview_panel') }}">{{ __('Panel Interview') }}</a></li>
                        <li class="breadcrumb-item">{{ __('Bootcamp Score') }}</li>
                    </ul>
                </div>
                <div style="clear: both"></div>
                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>Interview Bootcamp </h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->

    <!-- Page-body start -->
    <div class="page-body">
        <div class="row">
        </div>
        <div class="row">
            <div class="col-sm-12">

                <!-- Zero config.table start -->
                <div class="card">

                    <div class="card-block">
                      
                            @include('common.error')
                            @php
                            $i = 0;
                            // print_r($roles); die;
                            @endphp
                            
                                <div class="table-responsive">
                                <input type="hidden" id="lead_id" name="lead_id" value="{{ $list_user[0]->id }}">
                            <table id="simpletableAA" class="table table-bordered"
                                style="overflow:auto; overflow-x: scroll; width:100%;">
                                <tr>
                                    <td colspan="3" class="apic">
                                        <div align="center">Primary Keys</div>
                                    </td>
                                    <td colspan="2" class="bpic">
                                        <div align="center">Campaign Aptitude Test (CAT)</div>
                                    </td>
                                    <td colspan="5" class="cpic">
                                        <div align="center">Parliamentary Debate</div>
                                    </td>
                                    <td rowspan="2" class="dpic" style="width: 200px; min-width:200px; max-width:200px;">Red and Blue Activity Remarks</td>
                                    <td colspan="4" class="epic">
                                        <div align="center">Psychometric Test</div>
                                    </td>
                                    <td colspan="4" class="fpic">
                                        <div align="center">Research Aptitude Test</div>
                                    </td>
                                    <td colspan="6" class="gpic">
                                        <div align="center">Social Media and Design Test</div>
                                    </td>
                                    <td rowspan="2" class="hpic" style="width: 200px; min-width:200px; max-width:200px;">Data Aptitude Test (Score/10)</td>
                                    <td rowspan="2" class="epic" style="width: 200px; min-width:200px; max-width:200px;">Political Aptitude Test: MCQ (Score/10)</td>
                                    <td rowspan="2" class="ipic" style="width: 200px; min-width:200px; max-width:200px;">Final Score</td> 
                                </tr>
                                <tr>
                                    <td class="apic" style="width: 200px; min-width:200px; max-width:200px;">Name of Candidate</td>
                                    <td class="apic" style="width: 200px; min-width:200px; max-width:200px;">Email</td>
                                    <td class="apic" style="width: 200px; min-width:200px; max-width:200px;">Phone</td>
                                    <td class="bpic" style="width: 300px; min-width:300px; max-width:300px;">Campaign Aptitude Test (CAT) (Score/10)</td>
                                    <td class="bpic" style="width: 200px; min-width:200px; max-width:200px;">Remarks</td>
                                    <td class="cpic" style="width: 100px; min-width:150px; max-width:150px;">Content (Score/4)</td>
                                    <td class="cpic" style="width: 150px; min-width:150px; max-width:150px;">Style (Score/2)</td>
                                    <td class="cpic" style="width: 150px; min-width:150px; max-width:150px;">Strategy (Score/3)</td>
                                    <td class="cpic" style="width: 200px; min-width:200px; max-width:200px;">Overall Impact (Score/1)</td>
                                    <td class="cpic" style="width: 200px; min-width:200px; max-width:200px;">Final Score (Total Score/10)</td>
                                    <td class="epic" style="width: 100px; min-width:100px; max-width:100px;">Integrity</td>
                                    <td class="epic" style="width: 100px; min-width:100px; max-width:100px;">Sensitivity</td>
                                    <td class="epic" style="width: 150px; min-width:150px; max-width:150px;">Emotional Stability</td>
                                    <td class="epic" style="width: 200px; min-width:200px; max-width:200px;">Overall Results (100)</td>
                                    <td class="fpic" style="width: 250px; min-width:250px; max-width:250px;">Issues Identified (Score/2.5) </td>
                                    <td class="fpic" style="width: 250px; min-width:250px; max-width:250px;">Social Groups Identified (Score/2.5) </td>
                                    <td class="fpic" style="width: 250px; min-width:250px; max-width:250px;">10 Point Manifesto (Score/5) </td>
                                    <td class="fpic" style="width: 350px; min-width:350px; max-width:350px;">Manifesto Final Score (Total Score/10)</td>
                                    <td class="gpic" style="width: 300px; min-width:300px; max-width:300px;">Choice of Medium (Score/5)</td>
                                    <td class="gpic" style="width: 350px; min-width:350px; max-width:350px;">Visual Alignment with Party Colors (Score/5)</td>
                                    <td class="gpic" style="width: 350px; min-width:350px; max-width:350px;">Conciseness and Avoidance of Verbosity (Score/5)</td>
                                    <td class="gpic" style="width: 250px; min-width:250px; max-width:250px;">Clarity of Message (Score/5)</td>
                                    <td class="gpic" style="width: 200px; min-width:200px; max-width:200px;">Aesthetic Sense (Score/5)</td>
                                    <td class="gpic" style="width: 200px; min-width:200px; max-width:200px;">Final Score/10</td>
                                </tr>
                               
                                <tr>
                                    <td><strong>{{ $list_user[0]->name }}</strong></td>
                                    <td><strong>{{ $list_user[0]->email }}</strong></td>
                                    <td><strong>{{ $list_user[0]->mobileno }}</strong></td>
                                    <td>{{ $list_bootcampcrore[0]->score1 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->remark }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score2 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score3 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score4 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score5 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score6 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->activity_remarks }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score7 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score8 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score9 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score10 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score11 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score12 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score13 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score14 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score15 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score16 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score17 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score18 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score19 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score20 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score21 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score22 }}</td>
                                    <td>{{ $list_bootcampcrore[0]->score23 }}</td> 
                                </tr> 
                            </table>
                            </div>
                            <div class="modal-footer"> 
                                    
                                </div>
                             
                       
                    </div>
                </div>

                <!-- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Bootcamp Interview</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form class=" " method="POST" action="{{ route('add_interview_bootcamp_remark.store') }}"
                                id="needs-validation">
                                @csrf
                                <div class="modal-body">
                                    <div class="row">

                                        <div class="col-sm-3 col-md-3 col-lg-3 mb-3">
                                            <label for=""> Score 1<span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="score1" class="form-control" id="score1">
                                                <option value="">Select Score</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option> 
                                            </select>
                                        </div>

                                        <div class="col-sm-3 col-md-3 col-lg-3 mb-3">
                                            <label for=""> Score 2<span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="score2" class="form-control" id="score2">
                                                <option value="">Select Score</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>

                                            </select>
                                        </div>

                                        <div class="col-sm-3 col-md-3 col-lg-3 mb-3">
                                            <label for=""> Score 3<span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="score3" class="form-control" id="score3">
                                                <option value="">Select Score</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>

                                            </select>
                                        </div>

                                        <div class="col-sm-3 col-md-3 col-lg-3 mb-3">
                                            <label for=""> Score 4<span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="score4" class="form-control" id="score4">
                                                <option value="">Select Score</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>

                                            </select>
                                        </div>
                                        <div class="col-sm-6 col-md-6 col-lg-6 mb-3">
                                            <label for=""> Score 5<span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="score5" class="form-control" id="score5">
                                                <option value="">Select Score</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>

                                            </select>
                                        </div>

                                        <div class="col-sm-6 col-md-6 col-lg-6 mb-3">
                                            <label for=""> Weightage average<span class="required"
                                                    style="color: red;">*</span></label>
                                            <input type="number" class="form-control" name="average_score" readonly
                                                id="average_score">
                                        </div>

                                        <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                            <label for="">Interview Status<span class="required"
                                                    style="color: red;">*</span></label>
                                            <select name="panel_status" class="form-control" id="status">
                                                <option value="">Select Status</option>
                                                <option value="1">Yes</option>
                                                <option value="2">Hold</option>
                                                <option value="3">No</option>
                                            </select>
                                        </div>

                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group">
                                                <label for="">Comment<span class="required"
                                                        style="color: red;">*</span></label>
                                                <textarea type="text" class="form-control" name="comment" rows="5"
                                                    cols="6" placeholder="" autocomplete="off"></textarea>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <input type="hidden" id="lead_id" name="lead_id">
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="submit" name="submit" class="btn btn-primary"
                                        id="interview_panel">Save
                                        changes</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div> -->

            </div>
        </div>
    </div>
    <!-- Page-body end -->
</div>

<script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.min.js') }}"></script>


<!-- <script>
$(function() {
    $.fn.tableload = function(filterProgram = null, status = null) {
        let data = {
            'filterProgram': filterProgram,
            'status': status
        };
        var table = $('#simpletable').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bDestroy": true,
            "bLengthChange": false,
            "ordering": false,
            "iDisplayLength": 10,
            "responsive": true,
            "ajax": {
                "url": "{{ route('interview_bootcamp.index') }}",
                "type": "GET",
                "data": data,
                "dataType": "json",
                data: function(data) {
                    delete data
                        .columns; // <-- too long and not neccessary if you don't use 
                },
                "dataSrc": function(jsonData) {
                    return jsonData.data;
                }
            },
            "columnDefs": [{
                "targets": [0],
                "orderable": false,
            }],
        });
    }
    $.fn.tableload();
});

$(function() {
    $("body").on('click', ".event-update", function() {
        var lead_id = $(this).attr('data-id');
        $("#lead_id").val(lead_id);
        $("#exampleModal").modal("toggle");
    });
}) 
</script> -->
<script>
$(document).ready(function() {
    // Function to calculate average score
    function calculateAverage() {
        var scores = [];
        for (var i = 1; i <= 23; i++) {
            var score = parseInt($('#score' + i).val());
            if (!isNaN(score)) {
                scores.push(score);
            }
        }

        // Calculate the sum of scores
        var sum = scores.reduce(function(a, b) {
            return a + b;
        }, 0);

        var average = sum / scores.length;

        $('#average_score').val(average.toFixed(2)); // Round to 2 decimal places
    }
    $('[id^=score]').change(function() {
        calculateAverage();
    });
});
</script> 
@endsection
<!-- data-table js -->