<?php $this->load->view('site/layout'); ?>
<?php $this->load->view('site/navbar'); ?>
<style>
    .oneStar {
        color: #44370f;
    }

    .twoStars {
        color: #96781e;
    }

    .threeStars {
        color: #e2b52e;
    }

    .fourStars {
        color: #f1ba12;
    }

    .fiveStars {
        color: #f3cb06;
    }
    .icon-3xl {
        font-size: 3rem !important;
        cursor: pointer;
    }
    .icon-2xl{
        font-size: 2.5rem !important;
        cursor: pointer;
    }
    .datepicker{
        z-index: 100 !important;
    }
</style>
<div
    class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor"
    id="kt_content">
    <div class="kt-subheader  kt-grid__item" id="kt_subheader">
        <div class="kt-container  kt-container--fluid ">
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title">
                    <a href="<?php echo base_url() ?>Dashboard/"><?php echo $this->lang->line('dashboard'); ?></a>
                </h3>
                <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                <span class="kt-subheader__desc"><a
                        href="<?= base_url('quraan/sessions') ?>"><?php echo $this->lang->line('quraan_sessions') ?></a></span>
            </div>
        </div>
    </div>
    <?php if (isset($msg) || validation_errors() !== ''): ?>
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">×</button>
            <h4>
                <i class="icon fa-warning"></i> Alert!
            </h4>
            <?= validation_errors(); ?>
            <?= isset($msg) ? $msg : ''; ?>
        </div>
    <?php endif; ?> 
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    <?php echo $this->lang->line('add-a-plan') ?>
                </h3>
            </div>
        </div>
        <!--begin::Form-->
        <!-- <?php echo form_open_multipart(); ?> -->
        <form class="kt-form kt-form--label-right" method="post" action="">
            <div class="kt-portlet__body">
                <div class="form-group row">
                    <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('students') ?></label>
                    <div class="col-10">
                        <select name="students[]" class="topnav form-control" multiple id="students" >
                            <?php foreach ($students as $member) { ?>
                                <option
                                    value="<?= $member->id ?>"><?= $member->student_name ?></option>
                                <?php } ?>
                        </select>
                    </div>
                </div>


                <div id="repeater">
                    <div class="repeater_elements">
                        <a class="text-danger icon-2xl text-center float-right remove_tsme3 d-none"  title="<?= $this->lang->line('remove') ?>"><i class="fas fa-window-close"></i></a>
                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('type') ?></label>
                            <div class="col-10">
                                <select name="recite_type[]" class="form-control">

                                    <option value="0">حفظ</option>
                                    <option value="1">مراجعة</option>
                                    <option value="2">سرد</option>
                                    <option value="3">تلاوة</option>
                                    <option value="4">تلقين</option>
                                    <option value="5">اختبار</option>

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

                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('start-date') ?></label>
                            <div class="col-10">
                                <input type="text" name="date_from[]" class="form-control datepicker" />
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('end-date') ?></label>
                            <div class="col-10">
                                <input type="text" name="date_to[]" class="form-control datepicker" />
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('from_surah') ?></label>
                            <div class="col-10">
                                <select name="from_surah[]"  class="form-control from_surah">
                                    <?php foreach ($surahs as $surah) { ?>
                                        <option value="<?= $surah->id ?>"><?= $surah->arabic ?></option>
                                    <?php } ?>


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

                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('from_ayah') ?></label>
                            <div class="col-10">
                                <input type="number" name="from_ayah[]" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('sessions_count_per_week') ?></label>
                            <div class="col-10">
                                <input type="number" name="sessions_count_per_week[]" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"> <?php echo $this->lang->line('lines_count_per_session') ?></label>
                            <div class="col-10">
                                <input type="number" name="lines_count_per_session[]" class="form-control" />
                            </div>
                        </div>

                    </div>
                </div>

                <div id="items">
                </div>

                <a class="text-primary icon-3xl text-center" id="add_tsme3" title="<?= $this->lang->line('add') ?>"><i class="fas fa-plus"></i></a>


            </div>
            <div class="kt-portlet__foot">
                <div class="kt-form__actions">
                    <div class="row">
                        <div class="col-2"></div>
                        <div class="col-10">
                            <button type="submit" class="btn btn-primary" name="submit"
                                    value="pl"><?php echo $this->lang->line('add') ?></button>
                            <button type="reset" class="btn btn-secondary">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <?php $this->load->view('site/footer_2'); ?>
    <script src="<?= base_url() ?>public/js/pages/crud/forms/widgets/select2.js"></script>
    <script>
        $('document').ready(function () {
            tsme3_count = 1;



            $("#add_tsme3").click(function () {
                $('#items').append($('#repeater').html());

                $(".remove_tsme3").last().removeClass('d-none');

                tsme3_count++;
            });

            $(document).on('click', '.remove_tsme3', function () {
                $(this).closest('.repeater_elements').remove();
            });

            $(".datepicker").datepicker({format: 'yyyy-mm-dd',todayHighlight:true});
            $('#students').select2();


        });

    </script>



