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

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

        <!-- Page-body start -->
        <div class="page-body">
            <form class="" method="GET" action="{{ url('members') }}" 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-3">
                                        <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('manage_member_filter_session')['filter_data']) && Session::get('manage_member_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-3">
                                        <select name="status" class="form-control" id="status">
                                            <option value="">--Select Status--</option>
                                            @php
                                                $filter_session = Session::get('manage_member_filter_session');
                                            @endphp
                                            @if (!empty($filter_session) && isset($filter_session['status']))
                                                <option value="3"
                                                    {{ $filter_session['status'] == '3' ? 'selected' : '' }}>Not Moving
                                                    Forward
                                                </option>
                                                <option value="1"
                                                    {{ $filter_session['status'] == '1' ? 'selected' : '' }}>Moving Forward
                                                </option>
                                                <option value="2"
                                                    {{ $filter_session['status'] == '2' ? 'selected' : '' }}>Wait
                                                </option>
                                            @else
                                                <option value="3">Not Moving Forward</option>
                                                <option value="1">Moving Forward</option>
                                                <option value="2">Wait</option>
                                            @endif
                                        </select>
                                    </div>

                                    <div class="col-sm-3 col-md-3 col-lg-3">
                                        <select name="schedule_interview" class="form-control" id="schedule_interview">
                                            <option value="">--Select --</option>
                                            @php
                                                $filter_session = Session::get('manage_member_filter_session');
                                            @endphp
                                            @if (!empty($filter_session) && isset($filter_session['schedule_interview']))
                                                <option value="1"
                                                    {{ $filter_session['schedule_interview'] == '1' ? 'selected' : '' }}>Schedule Complete
                                                </option>
                                                <option value="0"
                                                    {{ $filter_session['schedule_interview'] == '0' ? 'selected' : '' }}>Schedule Incomplete
                                                </option>
                                            @else
                                                <option value="1">Schedule Complete</option>
                                                <option value="0">Schedule Incomplete</option>
                                            @endif
                                        </select>
                                    </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>
                            </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="col-sm-6 col-md-6 col-lg-4">
                                <a href="{{ route('event.calendar_vew') }}" class="btn btn-secondary"><i
                                        class="c-white-500 ti-calendar"></i> Calendar</a>
                            </div> --}}
                            <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 ">
                                    <thead>
                                        <tr>
                                            <th width="10%">Sr. No.</th>
                                            <th width="20%">Name</th>
                                            <th width="15%">Email I'd</th>
                                            <th width="15%">Mobile No.</th>
                                            <th width="18%">Weightage Avg.</th>
                                            <th width="6%">Status</th>
                                            <th width="20%">Shortlisted By</th>
                                            <th width="13%">Remarks</th>
                                            <th width="18%">Updated On</th>
                                            <th width="6%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </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">Create Interview Schedule </h5>

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form class="add_event" method="POST" id="needs-validation" action="{{ route('event.store') }}">
                            @csrf
                            <div class="modal-body">
                                <div class="row container">
                                    <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
                                                min="{{ date('Y-m-d') }}">
                                        </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
                                                min="">
                                        </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" 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">
                                        <a href="javascript:void(0)" class="btn btn-primary btn-sm" id="toggleButton">Add
                                            New Guest</a>
                                    </div>

                                    <div class="col-lg-12 guestForm" style="display: none">
                                        <div class="form-group">
                                            <label for="">Guest <span class="required"
                                                    style="color: red;">*</span></label>
                                            <div class="input-group">
                                                <input type="email" name="guest_email[]" id="guest_email"
                                                    class="form-control" placeholder="E-mail">
                                                &nbsp;
                                                &nbsp;
                                                <input type="text" class="form-control" name="guest_name[]"
                                                    placeholder="Guest Display Name" id="guest_display_names">
                                                &nbsp;
                                                &nbsp;
                                                <div class="input-group-append">
                                                    <button class="btn btn-success add-email-new-guest"
                                                        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" minlength="2"
                                                maxlength="150px" placeholder="" autocomplete="off" required></input>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="">Description<span class="required"
                                                    style="color: red;">*</span></label>
                                            <textarea type="text" class="form-control" name="summary" rows="5" cols="6" placeholder=""
                                                autocomplete="off" required></textarea>
                                        </div>
                                    </div>
                                    <input type="hidden" name="id" id="id">


                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="float-right">
                                    <button type="submit" name="submit" class="btn btn-success"
                                        id="submitButton">Save</button>
                                    <button type="button" class="btn btn-danger" id="closeModalButton">Close</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Remark</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label for="message-text" class="col-form-label">Remark:</label>
                                <textarea class="form-control" id="remark-text" rows="25"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.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() {

            // $("#load").show();
            $.fn.tableload = function(filterProgram = null, status = null) {
                let data = new Array();
                data.push({
                    'filterProgram': filterProgram,
                });
                data.push({
                    '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('members.index') }}",
                        "type": "GET",
                        data: function(d) {
                            d.data = data;
                        },
                        "dataType": "json",
                        data: function(data) {
                            delete data.columns;
                        },
                        "dataSrc": function(jsonData) {
                            return jsonData.data;
                        }
                    },
                    //Set column definition initialisation properties.
                    "columnDefs": [{
                        "targets": [0, -1, -2], //first column / numbering column
                        "orderable": false, //set not orderable
                    }, ],
                });
                // dataTable();
            }
            $.fn.tableload();
        });


        // $("#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();
        //     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 Member?",
                callback: function(result) {
                    if (result) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        var url = "{{ route('members.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..'
                                });
                            })
                    }
                }
            });
        }

        // Modal ..........

        $("body").on("click", ".Interview_schedule", function() {
            var id = $(this).data('id');
            $("#id").val(id);
            $("#exampleModal").modal("toggle");
        })


        // Append input field email
        $(".add-email").click(function() {
            var emailInput = '<div class="input-group mt-2">' +
                '<select class="form-control guest-email" name="guest_email[]" 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">' +
            '&nbsp;' +
            '&nbsp;' +
            '<div class="input-group-append">' +
            '<button class="btn btn-danger remove-email" type="button">-</button>' +
            '</div>' +
            '</div>';
            $(this).closest('.form-group').append(emailInput);
        });

        // Function to remove email input field
        $(document).on('click', '.remove-email', function() {
            $(this).closest('.input-group').remove();
        });

        // Update guest name when email is selected
        $(document).on('change', '.guest-email', function() {
            var selectedName = $(this).find(':selected').data('name');
            $(this).closest('.input-group').find('.form-control[name="guest_name[]"]').val(selectedName);
        });


        // New Guest
        $(".add-email-new-guest").click(function() {
            var emailInput = '<div class="input-group mt-2">' +
                '<input type="email" class="form-control guest-email" name="guest_email[]" >' +
                '&nbsp;' +
                '&nbsp;' +
                '<input type="text" class="form-control" name="guest_name[]"  placeholder="Guest Display  Name">' +
                '&nbsp;' +
                '&nbsp;' +
                '<div class="input-group-append">' +
                '<button class="btn btn-danger remove-email-new-email" type="button">-</button>' +
                '</div>' +
                '</div>';
            $(this).closest('.form-group').append(emailInput);
        });

        // Function to remove email input field
        $(document).on('click', '.remove-email-new-email', function() {
            $(this).closest('.input-group').remove();
        });


        $("#toggleButton").click(function() {
            var guestForm = $('.guestForm');
            if (guestForm.css('display') === 'none') {
                guestForm.css('display', 'block');
            } else {
                guestForm.css('display', 'none');
            }
        });

        $("body").on("click", ".view-remark", function(e) {
            e.preventDefault();
            var remark = $(this).attr('data-remark');
            $("#remark-text").val(remark);
            $("#remarkModal").modal('toggle');;
        })
    </script>
@endsection
<!-- data-table js -->