<style>
    .w-50{
        width:50%;
        float:left;
        padding:0px 10px;
    }
    #AddPeriod{
        width:100%;
    }
    @media (min-width: 576px)
        
        .modal-dialog{
            width:600px !important;
        }
        
    
</style>
<?php 
$id=$this->uri->segment("3");
$table="time_table";
$get_time_table_data=$this->TimeTableModel->get_item_data($id,$table);
if($get_time_table_data){
    foreach($get_time_table_data as $sch_data){
?>
<div class="container-fluid mt-3 mb-3 bg-white">
    <div class="row">
        <div class="col-sm-12 pt-3 pb-3">
            <ul class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="<?php echo base_url(); ?>Welcome">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="<?php echo base_url(); ?>TimeTableManagement">Time Table</a>
                </li>
                <li class="breadcrumb-item">Periods</li>
            </ul>
            <h2 class="main-heading"><?php echo $sch_data['title']."(".$sch_data['y1']."-".$sch_data['y2'].")"; ?></h2><hr>
            <!--<a href="<?php echo base_url(); ?>"></a>-->
            <a href="#" class="btn btn-sm btn-success mb-2 add_time_table_period">Add New Period</a>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        
                    
                        <tr>
                            <th class="sl_no">Sl.No.</th>
                            <th>Period No</th>
                            <th>Period</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                            
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $count=0;
                        $time_table_periods_table="time_table_periods";
                        $all_time_table_periods=$this->TimeTableModel->get_schedule_periods($id,$time_table_periods_table);
                        if($all_time_table_periods){
                            foreach($all_time_table_periods as $periods_data){
                                $count=$count + 1;
                        ?>
                        <tr>
                            <td><?php echo $count; ?></td>
                            <td><?php echo $periods_data['period_order']; ?></td>
                            <td><?php echo $periods_data['period']; ?></td>
                            <td><?php echo date("h:i:sa",strtotime($periods_data['start_time'])); ?></td>
                            <td><?php echo date("h:i:sa",strtotime($periods_data['end_time'])); ?></td>
                            
                            <td>
                                <a href="<?php echo base_url().'TimeTableManagement/edit_periods/'.$periods_data["id"]; ?>" class="btn btn-sm btn-outline-warning" target="_blank">Edit</a>
                            </td>
                        </tr>
                        <?php
                            }
                        }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>    
    </div>        
</div>


<!-- Modal -->
<div class="modal fade" id="AddPeriod" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="#" id="AddPeriodForm">
                <div class="modal-header">
                    <h1 class="main-heading" id="staticBackdropLabel">Add New Period</h1>
                    <button type="button" class="btn btn-sm btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
                            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                        </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="time_table_id" value="<?php echo $id;?>">
                    <div class="form-group w-50">
                        <label>Period Number</label>
                        <input type="number" name="period_number" class="form-control" required>
                    </div>
                    <div class="form-group w-50">
                        <label>Period Title</label>
                        <input type="text" name="period_title" class="form-control" required>
                    </div>
                    <div class="form-group w-50">
                        <label>Start Time</label>
                        <input type="time" name="start_time" class="form-control" required>
                    </div>
                    
                    <div class="form-group w-50">
                        <label>End Time</label>
                        <input type="time" name="end_time" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-danger btn-close" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $(".add_time_table_period").on("click",function(){
            $('#AddPeriod').modal({
                backdrop: 'static',
                keyboard: false
            });
            // alert("Hi"); 
            // backdrop: 'static';
            // keyboard: false;
            $("#AddPeriod").modal('show');
        });
        $(".btn-close").on("click",function(){
            $("#AddPeriod").modal('hide');   
        });
        
        // $('#AddPeriod').modal({
        //     backdrop: 'static',
        //     keyboard: false
        // });
        
        
        $("#AddPeriodForm").submit(function(e){
            e.preventDefault();           
            var error_count=0;                      
            if(error_count == 0){
                // $("#staticBackdrop").modal('show');
                $.ajax({
                    url: "<?php echo base_url(); ?>TimeTableManagement/add_new_period",
                    type: 'post',
                    contentType: false,
                    cache: false,
                    processData:false,
                    data:  new FormData(this),
                    success: function(response) {
                        alert(response);
                        location.reload();
                        // alert("HJi");
                        // var success_data = JSON.parse(response);
                        // var case_id=success_data.case_id;
                        // var message=success_data.msg;
                        // var case_footer_data='<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><a type="button" href="<?php echo base_url(); ?>Admissions/view_case_data/'+case_id+'" class="btn btn-primary">View Case Details</a>';
                        // $(".case-footer-btns").html(case_footer_data);
                        // $(".case-message-div").html("<p class='text-center text-success font-weight-bolder'>"+message+"</p>");
                    },
                    // error: function(jqXHR, textStatus, errorThrown) {
                    //     console.log(textStatus, errorThrown);
                    // }
                });
            }else{
                // alert("Please add order details !");
            }
        });
    });
</script>
<?php
    }
}
?>