@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">Selection / Selection Conference</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Selection 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%">Title</th>
                                            <th width="20%">Weightage average</th>
                                            <th width="10%">Status</th>
                                            <th width="10%">Panel Score</th>
                                            <th width="10%">Shortlised By</th>
                                            <th width="10%">Remark</th>
                                            <th width="10%">Offer Status</th>
                                            <th width="15%">Updated On</th>
                                            <th width="5%">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">Selection Panel Remark</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('selection_panel.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 score"
                                                        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=""> Weighted 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])
                                                    ->where('is_deleted', '=', 0)
                                                    ->orderBy('name', 'asc')
                                                    ->get();
                                            @endphp

                                        <div class="col-sm-6 col-md-6 col-lg-6 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=""> Status <span class="required"
                                                        style="color: red;">*</span></label>
                                                <select name="status" class="form-control" id="status" required>
                                                    <option value="">Select</option>
                                                    <option value="1">Yes</option>
                                                    <option value="2">Wait</option>
                                                    <option value="3">No</option>
                                                </select>
                                            </div>

                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="">Remark<span class="required"
                                                            style="color: red;">*</span></label>
                                                    <textarea type="text" class="form-control" name="remark" id="remark" 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">Save </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('selection_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', "#panel_interview", function() {
                var id = $(this).attr('data-lead_id');
                $("#lead_id").val(id);
                $("#exampleModal").modal("toggle");
            });
        })
    </script>
    <script>
        // Calculate weighted average when any score changes
        document.querySelectorAll('.score').forEach(function(element) {
            element.addEventListener('change', function() {
                calculateWeightedAverage();
            });
        });

        function calculateWeightedAverage() {
            let totalScore = 0;
            let totalWeight = 0;

            document.querySelectorAll('.score').forEach(function(element) {
                let score = parseInt(element.value);
                if (!isNaN(score)) {
                    totalScore += score;
                    totalWeight++;
                }
            });

            let weightedAverage = totalWeight > 0 ? totalScore / totalWeight : 0;

            document.getElementById('average_score').value = weightedAverage.toFixed(2);
        }
    </script>
@endsection
<!-- data-table js -->