@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.show-courses')}}">DIT Courses</a></li>
                                <li class="breadcrumb-item"><a href="{{route('dit.show-course', ['dit_course' => $course->id])}}">{{$course->name}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{$cohort->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>
                                <a href="{{route('dit.add-attendees', ['cohort'=>$cohort->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">{{$cohort->cohort}}</dd>
                                    <dt class="col-sm-2">Farm School</dt>
                                    <dd class="col-sm-10">{{$cohort->partner}}</dd>
                                    <dt class="col-sm-2">Attendees</dt>
                                    <dd class="col-sm-10">{{$cohort->attendees->count()}}</dd>
                                    <dt class="col-sm-2">Added By</dt>
                                    <dd class="col-sm-10">{{$cohort->creator}}</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><!-- 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/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($cohort->id)}};
                    var table = $('#attendees_').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: `/dit/cohorts/${cohort_id}/show`,
                        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'}
                        ]
                    });

                });
            </script>
    @endpush