@extends('cms.master')

@section('content')
<style>
    form input, form select {
        width: 100%;
    }
    form input[type=submit] {
        width: 6vw;
        margin-top: 2vw;
    }
    
</style>

<div class="uk-grid cms-page-content">
    <div class="uk-width-1-1 page-title">
        <p>Edit Schedule</p>
        <br/><br/><hr/>
    </div>
    
    <div class="uk-width-8-10 uk-margin-top">
        <form class="uk-form schedule-form">
        <table class="uk-table uk-table-hover table-schedule">
           <div id="programId" style="display: none"></div>
           <caption class="schedule-subtitle">starting on April 21st, 2026 for exam </caption>
           <thead>
                <tr>
                    <th class="stdate">Date</th>
                    <th class="sttime">Start time</th>
                    <th class="edtime">End time</th>
                    <th class="meet">Meeting</th>
                    <th class="loc">Location</th>
                    <th></th>
                </tr>
           </thead> 
            @foreach ($schedules as $schedule)
                <tr>
                    <td class="stdate">
                        <input class="stdate" type="text" name="date" data-uk-datepicker="{format:'MMMM Do, YYYY'}" value="April 21st, 2026">
                    </td>
                    <td class="sttime">
                        <input class="sttime" type="text" name="start_time" data-uk-timepicker="{format:'12h'}" value="5:20 AM">
                    </td>
                    <td class="edtime">
                        <input class="edtime" type="text" name="end_time" data-uk-timepicker="{format:'12h'}" value="5:20 AM">
                    </td>
                    <td class="meet">
                        <input class="meet" type="text" name="meeting" value="">
                    </td>
                    <td class="loc">
                        <input class="loc" type="text" name="location" value="">
                    </td>
                    <td><button type="button" class="uk-button uk-button-danger" onclick="removeSchedule({{ $schedule->id }})">X</button></td>
                </tr>
            @endforeach
        </table>
            <div id="token" style="display: none">{{ csrf_token() }}</div>
        </form>
        
        <div class="addRow">
            <button id="addlasttwo" class="uk-button uk-button-primary">Add Last Two</button>
            <button id="addweekly" class="uk-button uk-button-primary">Add Weekly Event</button>
            <button id="addnewrow" class="uk-button uk-button-primary">Add New Event</button>
            <button id="update-schedule" class="uk-button uk-button-success">Update Schedule</button>
        </div>
    </div>
    
<script>
    $("#addnewrow").click(function(){
        
        var raw = "<tr><td class=\"stdate\"><input class=\"stdate\" type=\"text\" name=\"date\" data-uk-datepicker=\"{format:'MMMM Do, YYYY'}\" value=\"\"></td>";
        raw += "<td class=\"sttime\"><input class=\"sttime\" type=\"text\" name=\"start_time\" data-uk-timepicker=\"{format:'12h'}\" value=\"\"></td>";
        raw += "<td class=\"edtime\"><input class=\"edtime\" type=\"text\" name=\"end_time\" data-uk-timepicker=\"{format:'12h'}\" value=\"\"></td>";
        raw += "<td class=\"meet\"><input class=\"meet\" type=\"text\" name=\"meeting\" value=\"\"></td>";
        raw += "<td class=\"loc\"><input class=\"loc\" type=\"text\" name=\"location\" value=\"\"></td>";
        raw += "<td><button type=\"button\" class=\"uk-button uk-button-danger delete-row\">X</button></td>";
        
        $(".table-schedule").append(raw);
    });
   
   
    $("#addweekly").click(function(){
        
        var date = $(".table-schedule tr").last().find('td .stdate').val();
        var start = $(".table-schedule tr").last().find('td .sttime').val();
        var end = $(".table-schedule tr").last().find('td .edtime').val();
        var location = $(".table-schedule tr").last().find('td .loc').val();
          
        $.ajax({
            type: "POST",
            url: "{{ URL::to('/cms/programs/addWeekly') }}",
            data: ({
                date: date,
                _token: $('#token').text()
            }),
            success: function(result, status) {
                if(result != false) {
                    if(status="success"){
                        var new_date = JSON.parse(result)
                                        
                        var raw = "<tr><td class=\"stdate\"><input class=\"stdate\" type=\"text\" name=\"date\" data-uk-datepicker=\"{format:'MMMM Do, YYYY'}\" value=\""+new_date+"\"></td>";
                        raw += "<td class=\"sttime\"><input class=\"sttime\" type=\"text\" name=\"start_time\" data-uk-timepicker=\"{format:'12h'}\" value=\""+start+"\"></td>";
                        raw += "<td class=\"edtime\"><input class=\"edtime\" type=\"text\" name=\"end_time\" data-uk-timepicker=\"{format:'12h'}\" value=\""+end+"\"></td>";
                        raw += "<td class=\"meet\"><input class=\"meet\" type=\"text\" name=\"meeting\" value=\"\"></td>";
                        raw += "<td class=\"loc\"><input class=\"loc\" type=\"text\" name=\"location\" value=\""+location+"\"></td>";
                        raw += "<td><button type=\"button\" class=\"uk-button uk-button-danger delete-row\">X</button></td>";
                        
                        var weekly = $(".table-schedule").append(raw);
                    } else {
                        alert("Server connection error!");
                    }
                }
            }
        });
    });
    
    
    $("#addlasttwo").click(function(){
        
        var dateL = $(".table-schedule tr:last").find('td .stdate').val();
        var startL = $(".table-schedule tr:last").find('td .sttime').val();
        var endL = $(".table-schedule tr:last").find('td .edtime').val();
        var locationL = $(".table-schedule tr:last").find('td .loc').val();
        var dateSL = $(".table-schedule tr:last").prev("tr").find('td .stdate').val();
        var startSL = $(".table-schedule tr:last").prev("tr").find('td .sttime').val();
        var endSL = $(".table-schedule tr:last").prev("tr").find('td .edtime').val();
        var locationSL = $(".table-schedule tr:last").prev("tr").find('td .loc').val();
          
        $.ajax({
            type: "POST",
            url: "{{ URL::to('/cms/programs/addLastTwo') }}",
            data: {
                datel: dateL,
                datesl: dateSL,
                _token: $('#token').text()
            },
            success: function(result, status) {
                if(result != false) {
                    if(status="success"){
                        var new_date = JSON.parse(result)
                                                                      
                        var raw = "<tr><td class=\"stdate\"><input class=\"stdate\" type=\"text\" name=\"date\" data-uk-datepicker=\"{format:'MMMM Do, YYYY'}\" value=\""+new_date.datesl+"\"></td>";
                        raw += "<td class=\"sttime\"><input class=\"sttime\" type=\"text\" name=\"start_time\" data-uk-timepicker=\"{format:'12h'}\" value=\""+startSL+"\"></td>";
                        raw += "<td class=\"edtime\"><input class=\"edtime\" type=\"text\" name=\"end_time\" data-uk-timepicker=\"{format:'12h'}\" value=\""+endSL+"\"></td>";
                        raw += "<td class=\"meet\"><input class=\"meet\" type=\"text\" name=\"meeting\" value=\"\"></td>";
                        raw += "<td class=\"loc\"><input class=\"loc\" type=\"text\" name=\"location\" value=\""+locationSL+"\"></td>";
                        raw += "<td><button type=\"button\" class=\"uk-button uk-button-danger delete-row\">X</button></td>";
                        
                        var weekly = $(".table-schedule").append(raw);
                        var raw = "<tr><td class=\"stdate\"><input class=\"stdate\" type=\"text\" name=\"date\" data-uk-datepicker=\"{format:'MMMM Do, YYYY'}\" value=\""+new_date.datel+"\"></td>";
                        raw += "<td class=\"sttime\"><input class=\"sttime\" type=\"text\" name=\"start_time\" data-uk-timepicker=\"{format:'12h'}\" value=\""+startL+"\"></td>";
                        raw += "<td class=\"edtime\"><input class=\"edtime\" type=\"text\" name=\"end_time\" data-uk-timepicker=\"{format:'12h'}\" value=\""+endL+"\"></td>";
                        raw += "<td class=\"meet\"><input class=\"meet\" type=\"text\" name=\"meeting\" value=\"\"></td>";
                        raw += "<td class=\"loc\"><input class=\"loc\" type=\"text\" name=\"location\" value=\""+locationL+"\"></td>";
                        raw += "<td><button type=\"button\" class=\"uk-button uk-button-danger delete-row\">X</button></td>";
                        
                        var weekly = $(".table-schedule").append(raw);
                    } 
                    else {
                        alert("Server connection error!");
                    }
                }
            }
        });
    });
   
    $(".table-schedule").on("click", ".delete-row" ,function(){
        $(this).closest("tr").fadeOut( "slow", function() {
            $(this).closest("tr").remove();
        });
    });
    
    $("#update-schedule").click(function(){
        
        var programId = $('#programId').text();
        var table = $(".schedule-form").find("input").serializeArray();

        $.post("{{ URL::to('/cms/programs/postSchedule') }}", {"programId": programId, "table": table, "_token": $('#token').text() }, function(data)
        {
            console.log(data);
            // window.location.href = "{{ URL::to('/cms/programs') }}";
        });

    });

    function removeSchedule(scheduleId){
        $.post("{{ URL::to('/cms/programs/deleteSchedule') }}", {"scheduleId": scheduleId, "_token": $('#token').text(), "_method": 'delete' }, function(){
            console.log(scheduleId);
            $(this).closest("tr").remove();
        });
    }
</script>
@stop