@extends('layouts.admin')
@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            {{-- ######################## here ###################### --}}
            <x-page.header>Group Report Settings</x-page.header>
            @include('admin.errors.form-errors')
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Search </h3>
                        </div>
                        <div class="card-body">
                            <form method="GET" action="{{ url('/staff/report/reports') }}" class="form-horizontal">
                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Academic Year Session <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="acysid" id="acysid" class="form-control select2-show-search"
                                                required>
                                                @foreach ($academicYearSessions as $item)
                                                    <option value="{{ $item->acysid }}">{{ $item->acyname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-0 row justify-content-end">
                                    <div class="col-md-3">
                                        <button type="submit"
                                            class="btn btn-primary waves-effect waves-light">Search</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            @if ($id)
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">

                            <table id="table_id" class="table table-bordered table-vcenter text-nowrap">
                                <thead>
                                    <tr>
                                        <th style="text-align: center;display: table-cell; vertical-align: middle"
                                            colspan="4">
                                            {{ $acys[0]->acyname }} <button type="button"
                                                style="width: 70px;height: 30px; border-radius: 4px; margin-left: 20px"
                                                id="btnExport" class="btn-outline-success">Export</button></th>
                                    </tr>
                                    <tr>
                                        <th
                                            style="text-align: center;display: table-cell; vertical-align: middle; background-color: #99a399">
                                            ID
                                        </th>
                                        <th
                                            style="text-align: center;display: table-cell; vertical-align: middle; background-color: #99a399">
                                            Full Name
                                        </th>
                                        <th
                                            style="text-align: center;display: table-cell; vertical-align: middle; background-color: #99a399">
                                            Course Name
                                        </th>
                                        <th
                                            style="text-align: center;display: table-cell; vertical-align: middle; background-color: #99a399">
                                            Level
                                        </th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i = 0;
                                    @endphp
                                    @foreach ($groups as $iteration)
                                        <tr class="table-active">
                                            <td style="text-align:center;">
                                                {{ $i++ }}
                                            </td>
                                            <td style="text-align:center;">
                                                {{ $iteration[0] }} {{ $iteration[1] }}. {{ $iteration[2] }}
                                            </td>
                                            <td style="text-align:center;">
                                                {{ $iteration[3] }}
                                            </td>
                                            <td style="text-align:center;">
                                                {{ $iteration[4] }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="4">

                                                <thead>
                                                    <tr>
                                                        <th data-toggle="toggle{{ $i }}"
                                                            style="text-align: center;display: table-cell; vertical-align: middle; color: Blue; width: 271px; cursor: pointer;">
                                                            Group Name <small><i>click me</i></small>
                                                        </th>
                                                        <th colspan="3"
                                                            style="text-align: center;display: table-cell; vertical-align: middle; width: 760px">
                                                            Start Date
                                                        </th>
                                                    </tr>
                                                </thead>
                                <tbody class="hol">

                                    {{-- {{ dd($iteration[5]) }} --}}
                                    @foreach ($iteration[5] as $key => $item)
                                        {{-- {{ dd($item) }} --}}
                                    {{-- @endforeach
                                    @for ($j = 0; $j < count($groups[$i][4]); $j++) --}}
                                        <tr>
                                            <td style="width: 550px; text-align:center;">
                                                {{ $key }}</td>
                                            <td width: 300px; text-align:center></td>
                                            <td width: 300px; text-align:center></td>
                                            <td width: 300px; text-align:center></td>
                                            <tr>
                                                @for ($k = 0; $k < count($item); $k++)
                                                    <tr>
                                                        <td width: 300px; text-align:center></td>
                                                        <td>
                                                            @php
                                                                $days = ['', 'Saterday', 'Sunday', 'Monday', 'Tuseday', 'Wednesday', 'Thursday', 'Friday'];
                                                                echo $days[(int) $item[$k][0]];
                                                            @endphp
                                                        </td>
                                                        <td style="width: 500px; text-align:center;">
                                                            From - {{ $item[$k][1] }}
                                                        </td>
                                                        <td style="width: 500px; text-align:center;">
                                                            To - {{ $item[$k][2] }}</td>
                                                    </tr>
                                                @endfor
                                            </tr>
                                        </tr>
            @endforeach

            </tbody>

            </td>
            </tr>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script>
                $(document).ready(function() {
                    var str = "toggle" + {{ $i }};
                    $('[data-toggle=' + str + ']').click(function() {
                        $(this).parents().next('.hol').toggle();

                    });
                });
            </script>
            @endforeach
            </tbody>
            </table>

        </div>
    </div>
    </div>
    @endif
    </div>
    </div>

@endsection
@section('admin-js')
    {{-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", type="text/javascript">

    </script> --}}
    <script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btnExport").click(function() {
                console.log("HelloWorld");
                let table = document.getElementById("table_id");
                console.log(table.innerText);
                TableToExcel.convert(table, {
                    name: `export.xlsx`,
                    sheetname: 'Sheet 1'
                });
            });
        });
        $(document).ready(function() {
            // add group
            jQuery('body').on('click', '.addGroup', function() {
                var coffid = $(this).attr('data-coffid');
                $('#add_group_name').append(`<option value="0" disabled selected>Processing...</option>`);
                $.get('getUnListedGroups/' + coffid, function(data) {
                    $('#add_group_name').empty();
                    $('#add_group_name').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data.groupName, function(id, value) {
                        $('#add_group_name').append('<option value="' + value.gnameid +
                            '">' + value.gname +
                            '</option>');
                    });
                })
            });

            // edit group
            jQuery('body').on('click', '.editGroup', function() {
                var coffid = $(this).attr('data-coffid');
                $('#edit_group_name').append(`<option value="0" disabled selected>Processing...</option>`);
                $.get('editGroup/' + coffid, function(data) {
                    $('#edit_group_name').empty();
                    $('#edit_group_name').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data, function(id, value) {
                        $('#edit_group_name').append('<option value="' + value.gid + '">' +
                            value.group_name.gname +
                            '</option>');
                    });
                })
            });

            // Add WhatsApp group
            jQuery('body').on('click', '.addWhatsapp', function() {
                var coffid = $(this).attr('data-coffid');
                $('#course').val(coffid)
                var url = "{{ route('courseofferings.getWhatsAppGroups', ':coffid') }}";
                url = url.replace(':coffid', coffid);
                $.ajax({
                    url: url,
                    success: function(data) {
                        console.log(data)
                        jQuery('#student_group_link').val(data.student_whatsapp_group);
                        jQuery('#parent_group_link').val(data.parent_whatsapp_group);
                        jQuery('#enrollment_group_link').val(data.enrollment_whatsapp_group);
                    }
                });

            });

            // add meeting (get all added groups)
            jQuery('body').on('click', '.addMeeting', function() {
                var coffid = $(this).attr('data-mcoffid');
                $('#meeting_groups_add').append(
                    `<option value="0" disabled selected>Processing...</option>`);
                $.get('editGroup/' + coffid, function(data) {
                    $('#meeting_groups_add').empty();
                    $('#meeting_groups_add').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data, function(id, value) {
                        $('#meeting_groups_add').append('<option value="' + value.gid +
                            '">' + value.group_name.gname +
                            '</option>');
                    });
                })
            });

            // edit meeting (get all added meetings with groups )
            jQuery('body').on('click', '.editMeeting', function() {
                var coffid = $(this).attr('data-mcoffid');
                $('#meeting_groups_edit').append(
                    `<option value="0" disabled selected>Processing...</option>`);
                $.get('editMeeting/' + coffid, function(data) {
                    $('#meeting_groups_edit').empty();
                    $('#meeting_groups_edit').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data, function(id, value) {
                        $('#meeting_groups_edit').append('<option value="' + value.gid +
                            '">' + value.group_name.gname +
                            '</option>');
                    });
                })
            });

            // update course offering status
            $('.form-switch-input').on('change', function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                const course_id = $(this).attr('data-coffid');
                var formData = new FormData();
                var checkbox_value = jQuery('#is_active_' + course_id).val()
                var status = jQuery('#status_' + course_id);

                if (checkbox_value == 1) {
                    checkbox_value = 0
                    status.text('inactive')
                } else {
                    checkbox_value = 1
                    status.text('active')
                }

                formData.append('is_active', checkbox_value);

                $.ajax({
                    url: "courseofferings/updateCourseOfferingStatus/" + course_id,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formData,
                    enctype: 'multipart/form-data',
                    success: function(data) {
                        notif({
                            type: "success",
                            msg: "The Status Updated Successfully",
                            position: "center",
                            opacity: 0.8,
                            autohide: true
                        });
                        setTimeout(location.reload.bind(location), 1000);
                    }
                });
            });


        })
    </script>
@endsection