@extends('layouts.app')

@section('content')
    <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"> Panel Interview </li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Interview Panel </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">
                            <div class="dt-responsive table-responsive">
                                @include('common.error')
                                @php
                                    $i = 0;
                                    // print_r($roles); die;
                                @endphp
                                <table id="simpletable" class="table table-striped table-bordered nowrap">
                                    <thead>
                                        <tr>
                                            <th width="8%">Sr. No.</th>
                                            <th width="15%">Name</th>
                                            <th width="10%">Mobile No.</th>
                                            <th width="10%">Bootcamp Name</th>
                                            <th width="10%">Bootcamp Location</th>
                                            <th width="15%">Start Date/Time</th>
                                            <th width="15%">End Date/Time</th>
                                            <th width="15%">Bootcamp Status</th>
                                            {{-- <th width="10%">Panel Status</th> --}}
                                            <th width="15%">Submission by</th>
                                            <th width="15%">Submission On</th>
                                            <th width="20%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </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">Panel 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_panel_remark.store') }}"
                                    id="needs-validation">
                                    @csrf
                                    <div class="modal-body">
                                        <div class="row">

                                            @foreach ($bootcamps as $key => $item)
                                                <div class="col-sm-3 col-md-3 col-lg-3 mb-3">
                                                    <label for="">{{ $item->sub_category }}<span class="required"
                                                            style="color: red;">*</span></label>
                                                    <select name="score{{ $key + 1 }}" class="form-control"
                                                        id="score{{ $key + 1 }}" required>
                                                        <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>
                                            @endforeach


                                            <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>

                                            @php
                                                $users = DB::table('users')
                                                    ->whereIn('role_id', [1, 2])
                                                    ->get();

                                            @endphp

                                            <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                                <label for="">Interviewer<span class="required"
                                                        style="color: red;">*</span></label>
                                                <select name="interviewer" class="form-control" id="" required>
                                                    <option value="">Select Interviewer</option>
                                                    @foreach ($users as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </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" required>
                                                    <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" required></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_panel.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");
            });
        })


        $(document).ready(function() {
            // Function to calculate average score
            function calculateAverage() {
                var scores = [];
                for (var i = 1; i <= 5; 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 -->