@extends('layouts.app')
<link rel="stylesheet" type="text/css" href="{{ asset('assets\css\dashboard.css') }}">
@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">Shortlist Applications</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Shortlisting</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-right">
                    {{-- @if (can('rolecontroller', 'create')) --}}
                    <!-- <a href="{{ url('leads/create') }}" class="btn cur-p btn-sm btn-success" style="color: black;">Add Lead</a> -->
                    {{-- @endif --}}
                </div>
            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_1">
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/TOTAL-REGISTRATION.svg') }}" />
                        </div>
                        <h2>{{ $completed_application }}</h2>
                        <div class="txt-cd">COMPLETE APPLICATIONS</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_2">
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/COMPLETED-APPLICATIONS.svg') }}" />
                        </div>
                        <h2>{{ $incompleted_application }}</h2>
                        <div class="txt-cd">INCOMPLETE APPLICATIONS</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_3">
                        <h2>{{ $assign }} / {{$completed_application}}</h2>
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/PROGRESS.svg') }}" />
                        </div>
                        <div class="txt-cd">ASSIGN APPLICATIONS</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="score-card sc_color_4">
                        <div class="txt-icon">
                            <img src="{{ asset('assets\images\auth/TOTAL-MEMBERS.svg') }}" />
                        </div>
                        <h2>{{ $actionPending }} / {{$completed_application}}</h2>
                        <div class="txt-cd">ACTION PENDING</div>
                        <img class="img-fluid hexaagon-shape" src="{{ asset('assets\images\auth/hexagon_shape.svg') }}" />
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-2 col-md-2 col-lg-2">
                                    <select name="search_program" class="form-control" id="filter_data">
                                        <option value="">Select Program</option>
                                        @foreach ($programs as $key => $value)
                                            <option value="{{ $value->program_id }}">{{ $value->program_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-2 col-md-2 col-lg-2">
                                    <select name="status" class="form-control" id="status">
                                        <option value="">Select Status</option>
                                        <option value="1">Incomplete</option>
                                        <option value="2">Complete</option>
                                    </select>
                                </div>
                                <div class="col-sm-2 col-md-2 col-lg-2">
                                    <select name="assign_id" class="form-control" id="assign_id">
                                        <option value="">Select Assign User</option>
                                        @foreach ($genralusers as $key => $value)
                                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-2 col-md-2 col-lg-2">
                                    <select name="assign_id" class="form-control" id="filter_assign">
                                        <option value="">Select Assign/UnAssign Application</option>
                                        <option value="assign">Assign</option>
                                        <option value="unassign">Unassign</option>
                                    </select>
                                </div>

                                <div class="col-sm-2 col-md-2 col-lg-2">
                                    <select name="is_verify" class="form-control" id="action_status">
                                        <option value="">Select action status </option>
                                        <option value="1">Moving forward</option>
                                        <option value="2">Waited</option>
                                        <option value="3">Not moving forward</option>
                                    </select>
                                </div>

                                <div class="col-sm-2 col-md-2 col-lg-2">
                                    <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>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-sm-12">
                    <!-- Zero config.table start -->

                    <div class="card">

                        <div class="card-block">
                        <div style="float: left;"><a href="javascript:void(0)" class="btn btn-warning btn-sm " id="sendNotification">Send
                                Notification</a></div>
                            <div style="float: right;"><a href="javascript:void(0)" title="Excel Download"> <span><input type="button" class="btn btn-sm btn-block btn-primary" id="excel_button" onclick="tableToExcel('simpletable', 'Shortlist Applications','Shortlist_application_list.xls')" title="Excel Download" style="width: auto;" value="Export"></span></a></div>

                            <div class="dt-responsive table-responsive">
                                @include('common.error')
                                @php
                                    $i = 0;
                                @endphp
                                <br>
                                <table id="simpletable" class="table table-striped table-bordered nowrap">
                                    <thead>
                                        <tr>
                                            <th width="2%"><input type="checkbox" id="checkAll"></th>
                                            <th width="10%">Sr. No.</th>
                                            <th width="15%">Name</th>
                                            <th width="13%">Email I'd</th>
                                            <th width="10%">Mobile No.</th>
                                            <th width="6%">Status</th>
                                            <th width="13%">Assign By</th>
                                            <th width="13%">Created On</th>
                                            <th width="13%">Assign User</th>
                                            <th width="13%">Action status</th>
                                            <th width="13%">Updated On</th>
                                            <th width="5%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>


                    {{-- Modal --}}
                    <div class="m_div">
                        <div class="modal remarkModal" id="remarkModal">
                            <div class="modal-dialog modal-lg" style="padding-top: 100px;">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header">
                                        <h4 class="modal-title">Update Application Status</h4>
                                        <button type="button" class="close close_modal"
                                            data-dismiss="modal">&times;</button>
                                    </div>
                                    <form class="" id="formContainer" method="POST"
                                        action="{{ route('stores.form') }}">
                                        @csrf
                                        <!-- Modal body -->
                                        <input type="hidden" name="lead_id" id="lead_id" value="" />
                                        <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>

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

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

                                                    </select>
                                                </div>

                                                <div class="col-sm-3 col-md-3 col-lg-3 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=""> Status<span class="required"
                                                            style="color: red;">*</span></label>
                                                    <select name="isverify" class="form-control" id="isverify">
                                                        <option value="">Select Status</option>
                                                        <option value="1">Moving forward</option>
                                                        <option value="2">Waited</option>
                                                        <option value="3">Not Moving forward</option>

                                                    </select>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for=""> Remark<span class="required"
                                                            style="color: red;">*</span></label>
                                                    <textarea class="after_secratory form-control" name="verify_remarks" id="verify_remarks" rows="4"
                                                        min="2" maxlength="150"></textarea>

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

                                        <!-- Modal footer -->
                                        <div class="modal-footer">
                                            <button class="btn btn-m btn-success" name="save" value="1"
                                                type="submit">Save</button>
                                            <button type="button" class="btn btn-danger close_modal"
                                                data-dismiss="modal">Close</button>
                                        </div>
                                    </form>
                                </div>
                            </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() {
            //Get Average score
            $(document).ready(function() {
                function calculateWeightedAverage() {
                    var score1 = parseInt($('#score1').val());
                    var score2 = parseInt($('#score2').val());
                    var score3 = parseInt($('#score3').val());

                    var weight1 = 0.3;
                    var weight2 = 0.4;
                    var weight3 = 0.3;


                    var weightedAverage = (score1 * weight1 + score2 * weight2 + score3 * weight3) / (
                        weight1 + weight2 + weight3);
                    $('#average_score').val(weightedAverage.toFixed(2)); // Round to 2 decimal places
                }

                // Call the function initially and whenever any score changes
                $('#score1, #score2, #score3').change(function() {
                    calculateWeightedAverage();
                });
            });


            $.fn.tableload = function(filterProgram = null, status = null, assign_id = null, filter_assign = null , action_status=null) {
                let data = new Array();
                data.push({
                    'filterProgram': filterProgram,
                });
                data.push({
                    'status': status,
                });
                data.push({
                    'assign_id': assign_id,
                });
                data.push({
                    'filter_assign': filter_assign,
                });
                data.push({
                    'action_status': action_status,
                });

                $('#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('leads.index') }}",
                        "type": "GET",
                        data: function(d) {
                            d.data = data;
                        },
                        "dataType": "json",
                        "dataSrc": function(jsonData) {
                            return jsonData.data;
                        }
                    },
                    //Set column definition initialisation properties.
                    "columnDefs": [{
                        "targets": [0, -1], //first column / numbering column
                        "orderable": false, //set not orderable
                    }, ],
                });
            }
            $.fn.tableload();

            $('#checkAll').on('click', function() {
                $('.email-checkbox').prop('checked', this.checked);
            });

            // Uncheck "check all" checkbox if any individual checkbox is unchecked
            $('.email-checkbox').on('change', function() {
                if (!this.checked) {
                    $('#checkAll').prop('checked', false);
                }
            });
        });

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

        $("#reset").on("click", function(e) {
            e.preventDefault();
            var status = '';
            let value = '';
            $.fn.tableload(value, status)
        })

        function fn_delete(user_id) {
            bootbox.confirm({
                title: "",
                message: "Are you sure, you want to delete this Lead?",
                callback: function(result) {
                    if (result) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        var url = "{{ route('leads.destroy', ':id') }}";
                        url = url.replace(':id', user_id);

                        $.ajax({

                                type: "POST",
                                data: {
                                    _method: "DELETE"
                                },
                                url: url,
                                //url: '{{-- {{ route('role.destroy', $user_id) }} --}}',
                                dataType: 'JSON'
                            })
                            .done(function(response) {
                                bootbox.alert({
                                    title: "Deleted?",
                                    message: response.message
                                });
                                location.reload();
                            })
                            .fail(function(response) {
                                bootbox.alert({
                                    title: "Deleted?",
                                    message: 'Something Went Wrong..'
                                });
                            })
                    }
                }
            });
        }

        function fn_member(id) {
            $('#lead_id').val(id);
            // alert(id);
            $('.remarkModal').show();
        }


        $(document).ready(function() {
            $(".close_modal").click(function() {
                $("#remarkModal").hide();
            });

            $(".mdiv").click(function() {
                $("#remarkModal").show();
            });
        });


        // Assign Modal
        $(".assignModal").on("click", function() {
            $("#exampleModal").modal("toggle");
        })
    </script>
@endsection
<!-- data-table js -->