@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">Interview Feedback</li>
                    </ul>
                </div>
                <div style="clear: both"></div>
                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>Interview</h4>
                    </div>
                </div>
            </div>

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

    <!-- Page-body start -->
    <div class="page-body">
        <form class="" method="GET" action="{{ url('interview_schedule') }}" id="needs-validation">
            @csrf
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-3 col-md-3 col-lg-2">
                                    <select name="filter_data" class="form-control" id="filter_data">
                                        <option value="">--Select Program--</option>
                                        @foreach ($programs as $key => $value)
                                        <option value="{{ $value->program_id }}" {{ !empty(Session::get('interview_schedule_filter_session')['filter_data']) && Session::get('interview_schedule_filter_session')['filter_data'] == $value->program_id ? 'selected' : '' }}>
                                            {{ $value->program_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-3 col-md-3 col-lg-2">
                                    <select name="status" class="form-control" id="status">
                                        <option value="">-- Select Status --</option>
                                        <option value="1" {{ (Session::get('interview_schedule_filter_session')['status'] ?? null) == '1' ? 'selected' : '' }}>
                                            Shortlisted</option>
                                        <option value="2" {{ (Session::get('interview_schedule_filter_session')['status'] ?? null) == '2' ? 'selected' : '' }}>
                                            Hold</option>
                                        <option value="3" {{ (Session::get('interview_schedule_filter_session')['status'] ?? null) == '3' ? 'selected' : '' }}>
                                            Rejected</option>
                                        <option value="4" {{ (Session::get('interview_schedule_filter_session')['status'] ?? null) == '4' ? 'selected' : '' }}>
                                        Un-Processed</option>
                                    </select>
                                </div>

                                <div class="col-sm-3 col-md-3 col-lg-2">
                                    <select name="filter_genraluser" class="form-control" id="filter_genraluser">
                                        <option value="">--Select Guest--</option>
                                        @foreach ($generalUsers as $key => $value)
                                            <option value="{{ $value->email }}"
                                                {{ !empty(Session::get('interview_schedule_filter_session')['filter_genraluser']) && Session::get('interview_schedule_filter_session')['filter_genraluser'] == $value->email ? 'selected' : '' }}>
                                                {{ $value->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- <div class="col-sm-3 col-md-3 col-lg-3">
                                        <a href="javascript:void(0)" class="btn btn-primary" id="filter">Filter</a>
                                        <a href="javascript:void(0)" class="btn btn-danger" id="reset">Reset</a>
                                    </div> --}}
                                <div class="col-sm-3 col-md-3 col-lg-3">
                                    <button class="btn btn-primary btn_submit" name="filter" id="filter" value="Search" type="submit">Filter</button>
                                    <button type="submit" name="clearFilter" id="clearFilter" class="btn btn-danger" value="clear">Clear</button>
                                </div>

                                <div class="col-sm-3 text-right">
                                    <a href="{{ route('event.calendar_vew') }}" class="btn btn-warning" target="_blank"><i class="c-white-500 ti-calendar"></i> Calendar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <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="10%">Start Date / Time</th>
                                        <th width="15%">Meeting Link</th>
                                        <th width="10%">Interview Status</th>
                                        <th width="10%">Meeting Created By</th>
                                        <th width="15%">Submission 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">Event Schedule Update</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('event.event_update') }}" id="needs-validation">
                                @csrf
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="">Start Date<span class="required" style="color: red;">*</span></label>
                                                <input type="date" class="form-control" name="start_date" required id="start_date">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="">Start Time<span class="required" style="color: red;">*</span></label>
                                                <input type="time" class="form-control" name="start_time" required id="start_time">
                                            </div>
                                        </div>

                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="">End Time<span class="required" style="color: red;">*</span></label>
                                                <input type="time" class="form-control" name="end_time" id="end_time" required>
                                            </div>
                                        </div>


                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="">Guest <span class="required" style="color: red;">*</span></label>
                                                <div class="input-group">
                                                    <select name="guest_email[]" id="guest_email" class="form-control" required>
                                                        <option value="">Select Guest</option>
                                                        @foreach ($users as $item)
                                                        <option value="{{ $item->email }}" data-name="{{ $item->name }}">{{ $item->email }}</option>
                                                        @endforeach
                                                    </select>
                                                    &nbsp;
                                                    &nbsp;
                                                    <input type="text" class="form-control" name="guest_name[]" required placeholder="Guest Display Name" id="guest_display_names" readonly>
                                                    &nbsp;
                                                    &nbsp;
                                                    <div class="input-group-append">
                                                        <button class="btn btn-success add-email" type="button">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="">Title<span class="required" style="color: red;">*</span></label>
                                                <input type="text" class="form-control" name="event_name" required id="event_name">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="">Summary<span class="required" style="color: red;">*</span></label>
                                                <textarea type="text" class="form-control" name="summary" rows="5" cols="6" placeholder="" autocomplete="off" required id="summary"></textarea>
                                            </div>
                                        </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" rows="5" cols="6" placeholder="" autocomplete="off" required></textarea>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <input type="hidden" id="event_id" name="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
                                        changes</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


                <div class="modal fade" id="exampleModalBootcamp" 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 </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('store-interviewer-panel-comment.store') }}" id="needs-validation">
                                @csrf
                                <div class="modal-body">
                                    <div class="row">

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="">Bootcamps<span class="required" style="color: red;">*</span></label>
                                                <select class="form-control bootcamp_change" name="bootcamp">
                                                    <option value="">Select</option>
                                                    @foreach ($Bootcamps as $item)
                                                    <option value="{{ $item->id }}" data-start_date="{{ date('Y-m-d', strtotime($item->start_date)) }}" data-end_date="{{ date('Y-m-d', strtotime($item->end_date)) }}" data-location="{{ $item->location }}" data-description="{{ $item->bootcampdetails_description }}">
                                                        {{ $item->bootcampdetails_name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="">Start Date <span class="required" style="color: red;">*</span></label>
                                                <input type="date" class="form-control" name="start_date" required id="bootcamp_start_date" readonly>
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="">End Date <span class="required" style="color: red;">*</span></label>
                                                <input type="date" class="form-control" name="end_date" required id="bootcamp_end_date" readonly>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="">Address <span class="required" style="color: red;">*</span></label>
                                                <input type="text" class="form-control" name="location" required id="bootcamp_location" readonly>
                                            </div>
                                        </div>
                                        <!-- <div class="col-sm-6 col-md-6 col-lg-6 mb-3">
                                                        <label for=""> Status <span class="required"
                                                                style="color: red;">*</span></label>
                                                        <select name="panel_status" class="form-control" id="status">
                                                            <option value="">Select</option>
                                                            <option value="1">Shortlist</option>
                                                            <option value="2">Hold</option>
                                                            <option value="3">Rejected</option>
                                                        </select>
                                                    </div> -->

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="">Description<span class="required" style="color: red;">*</span></label>
                                                <textarea class="form-control" name="description" required id="bootcamp_description" readonly></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="user_id" name="user_id">
                                <input type="hidden" id="lead_id" name="lead_id">
                                <input type="hidden" id="program_id" name="program_id">
                                <input type="hidden" id="program_type" name="program_type" value="bootcamp">
                                <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
                                        changes</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


                {{-- Panel Interview  --}}
                <div class="modal fade" id="exampleModal1" 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">Interviewer Remarks</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('store-interviewer-panel-comment.store') }}" id="needs-validation">
                                @csrf
                                <div class="modal-body">
                                    <div class="row">

                                        @foreach ($bootcamps as $key => $item)
                                        <div class="col-sm-4 col-md-4 col-lg-4 mb-3">
                                            <label for="score{{ $key + 1 }}">{{ $item->sub_category }}
                                                <span class="required" style="color: red;">*</span></label>
                                            <select name="score{{ $key + 1 }}" class="form-control score" id="score{{ $key + 1 }}">
                                                <option value="">Select Score</option>
                                                @for ($i = 1; $i <= $item->value; $i++)
                                                    <option value="{{ $i }}">{{ $i }}
                                                    </option>
                                                    @endfor
                                            </select>
                                            <br>
                                            <input type="number" class="form-control all_average" name="weightage_average{{ $key + 1 }}" value="{{ $item->multiply }}" readonly>
                                        </div>
                                        @endforeach


                                        <div class="col-sm-4 col-md-4 col-lg-4 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">
                                            <br>
                                            {{-- <input type="number" class="form-control" name="total_average"
                                                    id="total_average" step="any" readonly> --}}
                                        </div>

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

                                        <div class="col-lg-12 mb-3">
                                            <div class="form-group">
                                                <label for="">Remarks <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="edit_lead_id" name="lead_id">
                                <input type="hidden" id="bootcamp_id" name="bootcamp_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>
     $(document).ready(function() {
            $('#guest_email').change(function() {
                var selectedName = $(this).find(':selected').data('name');
                $('#guest_display_names').val(selectedName);
            });

            $('.close').click(function() {
                $('#exampleModal').modal('hide');
            });
            $('#closeModalButton').click(function() {
                $('#exampleModal').modal('hide');
            });
        });
    $(function() {
        
        $.fn.tableload = function(filterProgram = null, status = null) {
            let data = {
                'filterProgram': filterProgram,
                'status': status
            };
            var table = $('#simpletable').DataTable({
                "processing": true,
                "serverSide": true,
                "bFilter": true,
                "bLengthChange": true,
                "ordering": true,
                "aaSorting": [],
                "iDisplayLength": 10,
                "responsive": true,
                "scrollX": true,
                "destroy": true,
                "searching": true,
                "ajax": {
                    "url": "{{ route('interview_schedule.index') }}",
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    data: function(data) {
                        delete data.columns;
                    },
                    "dataSrc": function(jsonData) {
                        return jsonData.data;
                    }
                },
                "columnDefs": [{
                    "targets": [0, -1, -2],
                    "orderable": false,
                }],
            });
        };

        $.fn.tableload(); // Initial load

        // $("#filter").on("click", function(e) {
        //     e.preventDefault();
        //     var status = $("#status").val();
        //     let value = $("#filter_data").val();
        //     $.fn.tableload(value, status);
        // });

        // $("#reset").on("click", function(e) {
        //     e.preventDefault();
        //     $("#status").val('');
        //     $("#filter_data").val('');
        //     $.fn.tableload();
        // });


    });




    $(function() {
        $("body").on('click', ".event-update", function() {
            var id = $(this).attr('data-id');
            var start_date = $(this).attr('data-start_date');
            var start_time = $(this).attr('data-start_time');

            var end_date = $(this).attr('data-end_date');
            var end_time = $(this).attr('data-end_time');
            var summary = $(this).attr('data-summary');
            var event_name = $(this).attr('data-event_name');

            $("#start_date").val(start_date);
            $("#start_time").val(start_time);
            $("#end_time").val(end_time);
            $("#summary").val(summary);
            $("#event_name").val(event_name);
            $("#event_id").val(id);
            $("#exampleModal").modal("toggle");
        });

        $("body").on('click', ".bootcamp-update", function() {
            var id = $(this).attr('data-id');
            var user_id = $(this).attr('data-user_id');
            var program_id = $(this).attr('data-program_id');

            $("#user_id").val(user_id);
            $("#program_id").val(program_id);
            $("#lead_id").val(id);
            $("#exampleModalBootcamp").modal("toggle");
        });



        // Panel Interview Modal
        $("body").on("click", ".panel_interview", function() {
            var lead_id = $(this).attr('data-lead_id');
            var bootcamp = $(this).attr('data-is_bootcamp');
            $("#edit_lead_id").val(lead_id);
            $("#bootcamp_id").val(bootcamp);
            $("#exampleModal1").modal("toggle");
        })
    })

    $(document).ready(function() {



        // On change get bootcamp
        $('.bootcamp_change').on('change', function() {

            var selectedOption = $(this).find(':selected');
            $('#bootcamp_start_date').val(selectedOption.data('start_date'));
            $('#bootcamp_end_date').val(selectedOption.data('end_date'));
            $('#bootcamp_location').val(selectedOption.data('location'));
            $('#bootcamp_description').val(selectedOption.data('description'));
        });
    });

    $(document).ready(function() {
        // Function to calculate average score
        function calculateAverage() {
            var totalScore1 = 0;
            var totalScore = 0;
            var totalItems = 0;
            $('.score').each(function() {
                var score = parseInt($(this).val());
                var multiplyValue = parseFloat($(this).closest('.col-sm-4').find(
                    '.all_average').val());
                if (!isNaN(score) && !isNaN(multiplyValue)) {
                    totalScore += score * multiplyValue;
                    totalScore1 += multiplyValue;
                    totalItems++;
                }
            });
            var averageScore = totalScore / totalScore1;
            var averageScore1 = totalScore1 / totalItems;
            // Display the average score
            $('#average_score').val(averageScore.toFixed(2));
            // $('#total_average').val(averageScore1.toFixed(2));
        }

        // Call the calculateAverage function initially
        calculateAverage();

        // Bind change event to score select boxes
        $('.score').change(function() {
            calculateAverage();
        });
    });
</script>
@endsection
<!-- data-table js -->