@extends('layouts.app2') @section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.min.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.print.min.css') !!}" rel="stylesheet" media="print" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<style>
    body {
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        background-color: #fff;
    }

    #calendar {
        max-width: 1050px;
        margin: 0 auto;
        background-color: white;
        width: 100%;
    }

    .h2,
    h2 {
        font-size: 1.5rem !important;
    }

    #calendar table .fc-head {
        background-color: #2bbbad!important;
        color: white;
    }

    .fc-day-header {
        height: 43px;
        font-size: 18px;
        padding-top: 16px !important;
    }

    .color_indegator {
        margin-left: 10px;
        margin-top: 2px;
        font-weight: 700;
    }

    .fc-scroller {
        height: auto !important;
        /* max-height: 350px !important; */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #agenda_d {
        /*   height: 300px;*/
        border: 1px solid #d4c8c8;
        /* padding: 39px; */
        /* padding-top: 10px;*/
        /*background-color: #17a2b8;*/
    }

    .row_pading {
        padding-right: 0px;
        padding-left: 0px;
    }

    .row_margin {
        margin-right: 0px;
        margin-left: 0px;
    }

    .card_header {
        padding: 0rem 0rem;
    }


    .dtp-btn-ok {
        background-color: #007bff;
        opacity: .7;
    }

    .dtp-btn-cancel {
        background-color: #dc3545;
        opacity: .7;
    }

    .dtp-btn-clear {
        background-color: #ffc107;
        opacity: .7;
    }




    /* fallback */

    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }



    .docs-tab-content {
        position: relative;
        border: 1px solid rgba(0, 0, 0, .15);
        padding: 0;
    }

    .docs-tabs .nav-link {
        border-width: 1px 1px 0 1px;
        border-color: rgba(0, 0, 0, .15);
        border-style: solid;
        border-radius: 5px 5px 0 0;
        margin-right: 8px;
        margin-bottom: -1px;
        color: #212529;
    }


    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 26px;
    }

    .switch input {display:none;}

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }


    .df{
        display: flex;
    }

    .slider_label{
        font-size: 18px;
        margin-left: 5px;
        margin-right: 5px;
    }    


    .border_bottom{
        border-bottom: 1px solid #e7e1e1;
        border-left: 3px solid #28a745;;
    }
    .border_left_red{
        border-left: 3px solid red;
    }   

    .show{
        border-bottom: 1px solid #e7e1e1;
    }

    .over_flow{
        overflow: hidden;
        text-align: left;
        text-decoration: none;
    }




</style>
@endsection @section('badcome')

@endsection 
@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <form method="post" action="" class="form-horizontal" id="holiday-form">
                @csrf
                <table class="table table-responsive table-bordered">
                    @foreach($holidayNames AS $holidayName)
                    <tr>
                        <th><label class="control-label">{{$holidayName['holiday_name']}}</label></th><td><input type="text" name="start{{$holidayName['id']}}" class="form-control"><label class="start{{$holidayName['id']}} text-danger" style="display: none;"></td></label><td><input type="text" name="endate{{$holidayName['id']}}" class="form-control"><label class="endate{{$holidayName['id']}}" style="display: none;"></label></td>
                    </tr>
                    @endforeach
                </table>
                <div class="form-group row">
                    <input type="submit" class="btn btn-primary btn-sm" value="SAVE">
                </div>
            </form>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <form method="post" action="" class="form-horizontal" id="office-holiday-form">
                @csrf
                <div id="input-div">
                    
                </div>
                <div class="form-group row">
                    <input type="submit" class="btn btn-primary btn-sm" value="SAVE EVEN SATURDAYS & SUNDAYS">
                </div>
            </form>
        </div>
    </div>
</div>



@endsection
@section('dynamic_js')
<script src="{{ asset('plugins/bootstrap-select/js/bootstrap-select.js') }}"></script>
<script src="{{ asset('js/lib/moment.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>
<script src="{{ asset('js/lib/fullcalendar.min.js') }}"></script>
<script src="{{ asset('js/custom/calender_minutes.js') }}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
$('.form-control').bootstrapMaterialDatePicker({
    weekStart: 0,
    time: false
});

$('#holiday-form').on('submit', function (e) {
    e.preventDefault();

    swal({
        title: "Are you sure?",
        text: "You are about to save expenditure record!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
            .then((willStore) => {
                if (willStore) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: "{{url('/add_holiday')}}",
                        dataType: "json",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        statusCode: {
                            422: function (data) {
                                // Error...
                                var object = "";
                                $.each(data, function (key, val) {

                                    if (key === "responseText") {
                                        object = jQuery.parseJSON(val);
                                    }

                                });
                                var error = "";
                                $.each(object.errors, function (key, val) {

                                    $('.' + key).text(val);
                                    $('.' + key).removeAttr('style');

                                });
                                swal("In valid data has been provided please check!", "", "error");
                            },
                            200: function (data) {

                                if (data.msg) {
                                    swal(data.msg, "", "warning");
                                } else {
                                    swal("Data has been successfully saved.!", "", "success");

                                }
                            },
                            500: function () {
                                swal("Something went wrong. Please try again.", "", "warning");
                            }
                        },
                        error: function (data) {

                        },
                        success: function () {
                            swal("Data has been successfully saved.!", "", "success");
                        }
                    });
                } else {
                    swal("You have canceled your operation!");
                }
            });



});
$('#office-holiday-form').on('submit', function (e) {
    e.preventDefault();

    swal({
        title: "Are you sure?",
        text: "You are about to save expenditure record!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
            .then((willStore) => {
                if (willStore) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: "{{url('/add_office_holiday')}}",
                        dataType: "json",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        statusCode: {
                            422: function (data) {
                                // Error...
                                var object = "";
                                $.each(data, function (key, val) {

                                    if (key === "responseText") {
                                        object = jQuery.parseJSON(val);
                                    }

                                });
                                var error = "";
                                $.each(object.errors, function (key, val) {

                                    $('.' + key).text(val);
                                    $('.' + key).removeAttr('style');

                                });
                                swal("In valid data has been provided please check!", "", "error");
                            },
                            200: function (data) {

                                if (data.msg) {
                                    swal(data.msg, "", "warning");
                                } else {
                                    swal("Data has been successfully saved.!", "", "success");

                                }
                            },
                            500: function () {
                                swal("Something went wrong. Please try again.", "", "warning");
                            }
                        },
                        error: function (data) {

                        },
                        success: function () {
                            swal("Data has been successfully saved.!", "", "success");
                        }
                    });
                } else {
                    swal("You have canceled your operation!");
                }
            });



});
$(document).ready(function () {
    var d = new Date();
    var getTot = [];
    for (var j = 0; j < 12; j++) {
        getTot[j] = daysInMonth(j + 1, d.getFullYear()); //Get total days in a month
    }
    var sat = new Array();   //Declaring array for inserting Saturdays
    var sun = new Array();   //Declaring array for inserting Sundays
    var count = 1;
    for (j = 0; j < getTot.length; j++) {
        for (var i = 1; i <= getTot[j]; i++) {    //looping through days in month
            var newDate = new Date(d.getFullYear(),j, i)
            if (newDate.getDay() == 0) {   //if Sunday
                sun.push(d.getFullYear() + "-" + (j + 1) + "-" + i);
            }
            if (newDate.getDay() == 6) {   //if Saturday
                if(count%2 == 0){
                    sat.push(d.getFullYear() + "-" + (j + 1) + "-" + i);
                }
                count++;
            }
            

        }
        count = 1;
    }
    console.log(sat);
    console.log(sun);
    console.log(getTot);
    console.log(d.getMonth());
    var inputSunDate = "";
    var inputEvenSatDate = "";
    for(var i = 0; i < sun.length; i++){
        inputSunDate += "<input type='hidden' class='form-control' name='sundays[]' value='"+sun[i]+"'>";
    }
    for(var i = 0; i < sat.length; i++){
       inputEvenSatDate += "<input type='hidden' class='form-control' name='saturdays[]' value='"+sat[i]+"'>";
    }
    $('#input-div').html(inputSunDate+inputEvenSatDate);
    function daysInMonth(month, year) {
        return new Date(year, month, 0).getDate();
    }
});
$(document).on('change','.form-control',function(){
    $('.'+$(this).attr('name')).attr('style','display:none');
});
</script>
@endsection