@extends('layouts.admin', ['title' => 'Cohort Details'])

@push('stylesheets')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

@endpush

@section('content')
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{route('dit.view-sessions')}}">DIT Cohorts</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{$session->cohort}}</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <h5 class="card-title mb-0">Cohort Details</h5>
                                <button class="btn btn-soft-info" data-bs-toggle="modal" data-bs-target="#importModal"><span class="ri-upload-2-line"></span>Import</button>
                                {{--<a href="{{route('dit.add-attendees', ['cohort'=>$session->id])}}" class="btn btn-primary">
                                    Add Attendees
                                </a>--}}
                            </div>
                            <div class="card-body">
                                <dl class="row">
                                    <dt class="col-sm-2">Cohort</dt>
                                    <dd class="col-sm-10">{{\Carbon\Carbon::parse($session->start_time)->format("d-M-Y")}} to {{\Carbon\Carbon::parse($session->end_time)->format("d-M-Y")}}</dd>
                                    <dt class="col-sm-2">Farm School</dt>
                                    <dd class="col-sm-10">{{$session->partner->name}}</dd>
                                    <dt class="col-sm-2">Attendees</dt>
                                    <dd class="col-sm-10">{{$session->attendees->count()}}</dd>
                                    <dt class="col-sm-2">Added By</dt>
                                    <dd class="col-sm-10">{{$session->user->name}}</dd>

                                </dl>

                                <h3 class="mt-5 text-center"><span class="badge badge-soft-info">Attendees</span></h3>
                                <table id="attendees_" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Farmer Group</th>
                                        <th>Phone Number</th>
                                        <th>Registration No.</th>
                                        <th>Grade</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                {{--modals--}}
                <dialog id="edit_attendee_modal">
                    {{--<button class="btn btn-danger" autofocus>x</button>--}}
                    <div class="modal-dialog" style="width: 40vw">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Update Attendee</h5>
                                <button type="button" class="btn btn btn-outline-danger" onclick="closeModal">x</button>
                            </div>
                            <div class="modal-body pt-4">
                                <form action="" method="post" id="edit_attendee_form">
                                    @csrf
                                    <div class="mb-3">
                                        <label class="form-label">Name</label>
                                        <input type="text" class="form-control" id="a_name" disabled>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Farmer Group</label>
                                        <input type="text" class="form-control" id="a_group" disabled>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Registration number</label>
                                        <input type="text" class="form-control" name="reg_no" id="a_reg" placeholder="Reg no.">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Grade</label>
                                        <input type="text" class="form-control" name="grade" id="a_grade" placeholder="grade">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Reported?</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="reported" id="reported_no" value="0">
                                            <label class="form-check-label">No</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="reported" id="reported_yes" value="1">
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Completed?</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="completed" id="completed_no" value="0">
                                            <label class="form-check-label">No</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="completed" id="completed_yes" value="1">
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <button type="submit"  class="ms-2 btn btn-success form-control">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </dialog>

                <div class="modal fade" id="importModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="importModalLabel">Import Attendees</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form action="{{route('dit.import-data',["session" => $session->id])}}" method="post">
                                    @csrf
                                    <div class="form-group mb-3">
                                        <label>Partner</label>
                                        <input type="text" class="form-control" value="{{$partner->id}}" disabled readonly>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label>Courses</label>
                                        <select name="courses" id="course_select" class="form-control">
                                            <option value="">Select course</option>
                                            @foreach($courses as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label>Cohorts</label>
                                        <select name="cohort" id="cohort_select" class="form-control"></select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label>Number of Attendees</label>
                                        {{--<select name="attendee_ids[]" id="attendee_select" class="form-control" multiple></select>--}}
                                        <input type="text" class="form-control" id="attendee_select" name="attendee count">
                                    </div>
                                    <button class="btn btn-soft-success">Save</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- container-fluid -->
        </div>

        <!-- End Page-content -->

        @endsection

        @push('scripts')

            <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
            <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
            <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

            <script>
                // const dialog = document.querySelector("dialog");
                const dialog = document.getElementById('edit_attendee_modal');
                // const showButton = document.querySelector("dialog + button");
                const closeButton = document.querySelector("dialog button");
                const edit_form = document.getElementById('edit_attendee_form');

                function edit_attendee(row) {
                    let data = JSON.parse(atob(row));
                    let endpoint = '{{url('/')}}/'+`dit/session_attendees/${data.id}/update`;
                    edit_form.setAttribute('action', endpoint);

                    document.getElementById('a_name').value = `${data.first_name} ${data.last_name}`;
                    document.getElementById('a_group').value = data.farmer_group;
                    document.getElementById('a_grade').value = data.grade;
                    document.getElementById('a_reg').value = data.reg_no;
                    if (data.reported) {
                        document.getElementById('reported_yes').setAttribute('checked', true);
                    } else {
                        document.getElementById('reported_no').setAttribute('checked', true);
                    }
                    if (data.completed) {
                        document.getElementById('completed_yes').setAttribute('checked', true);
                    } else {
                        document.getElementById('completed_no').setAttribute('checked', true);
                    }

                    dialog.showModal();
                }

                // "Close" button closes the dialog
                closeButton.addEventListener("click", () => {
                    dialog.close();
                });

                function closeModal() {
                    dialog.close();
                }

            </script>

            <script>


                ////////////////////////////////INITIALISATION OF DATATABLE ///////////////////////////
                $(document).ready(function(){
                    flatpickr("._dt", {});

                    ///////////////////////////AJAX CSRF SET UP //////////////////////////////////////////////

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });


                    const cohort_id = {{Js::from($session->id)}};
                    var table = $('#attendees_').DataTable({
                        processing: true,
                        serverSide: true,
                        // ajax: `/dit/cohorts/${cohort_id}/show`,
                        ajax: '',
                        columns: [
                            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable:false, searchable:false},
                            { data: 'first_name', name: 'first_name'},
                            { data: 'last_name', name: 'last_name'},
                            { data: 'farmer_group', name: 'farmer_group'},
                            { data: 'participant_contact', name: 'participant_contact'},
                            { data: 'reg_no', name: 'reg_no'},
                            { data: 'grade', name: 'grade'},
                            { data: 'actions', name: 'actions'}
                        ]
                    });

                    let course_select = $('#course_select');
                    let cohort_select = $('#cohort_select');
                    let attendee_select = $('#attendee_select');

                    course_select.change(async function() {
                        const selected = $(this).val();
                        console.log('course changed ::', selected);

                        const response = await http_get('/dit/import',{data: 'cohorts', id: selected});
                        console.log('The cohort response ::', response);

                        if (response.data.length > 0) {
                            first_option_line = '<option value ="">Select cohort</option>'
                            cohort_select.append(first_option_line);
                            for (var i = 0; i < response.data.length; i++) {
                                var id = response.data[i].id;
                                var cohort = response.data[i].start_date + " " + response.data[i].end_date;

                                var option = "<option value='" + id + "'>" + cohort + "</option>";

                                cohort_select.append(option)
                                    .select2({placeholder: 'Select cohort'});
                            }
                        }
                    })

                    cohort_select.change(async function() {
                        const selected = $(this).val();
                        console.log('cohort changed changed ::', selected);

                        const response = await http_get('/dit/import',{data: 'attendees', id: selected});
                        console.log('The attendee response ::', response);
                        attendee_select.val(response.data);

                        /*if (response.data.length > 0) {
                            first_option_line = '<option value ="">Select attendees</option>'
                            attendee_select.append(first_option_line);
                            for (var i = 0; i < response.data.length; i++) {
                                var id = response.data[i].id;
                                var name = response.data[i].first_name + " " + response.data[i].last_name;
                                console.log('the participant ::', name);

                                var option = "<option value='" + id + "' selected>" + name + "</option>";

                                attendee_select.append(option)
                                    .select2({placeholder: 'Select attendees'});
                            }
                        }*/
                    })

                });
            </script>
    @endpush