@extends('layouts.app')
@section('title', 'Dashboard | ')
@section('content')
   
    <!-- Page Content -->     
    <div class="content container-fluid">
  
    <!-- Page Header -->
    <div class="page-header">
      <div class="row align-items-center">
        <div class="col">
          <h3 class="page-title">Holidays {{date('Y')}}</h3>          
        </div>
        <div class="col-auto float-right ml-auto">
           
        </div>
      </div>
    </div>
    <!-- /Page Header -->
    
    <div class="row">
      <div class="col-md-12">
        <div class="table-responsive">
          <table class="table table-hover custom-table mb-0">
            <thead>
              <tr>
                <th>#</th>
                <th>Title </th>
                <th>Holiday Date</th>
                <th>Day</th>
                <th class="text-right">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr class="holiday-completed">
                <td>1</td>
                <td>New Year</td>
                <td>1 Jan 2020</td>
                <td>Wednesday</td>
                <td></td>
              </tr>
              <tr class="holiday-completed">
                <td>2</td>
                <td>Republic Day</td>
                <td>26 Jan 2020</td>
                <td>Sunday</td>
                <td></td>
              </tr>
              <tr class="holiday-completed">
                <td>3</td>
                <td>Holi</td>
                <td>10 Mar 2020</td>
                <td>Tuesday</td>
                <td class="text-center">
                </td>
              </tr>
              <tr class="holiday-upcoming">
                <td>4</td>
                <td>Independence Day</td>
                <td>15 Aug 2020</td>
                <td>Saturday</td>
                <td class="text-center">
                </td>
              </tr>
              <tr class="holiday-upcoming">
                <td>5</td>
                <td>Gandhi Jayanti</td>
                <td>02 Oct 2020</td>
                <td>Friday</td>
                <td></td>
              </tr>
              <tr class="holiday-upcoming">
                <td>6</td>
                <td>Dussehra</td>
                <td>25 Oct 2020</td>
                <td>Sunday</td>
                <td class="text-right">

                </td>
              </tr>
              <tr class="holiday-upcoming">
                <td>7</td>
                <td>Deepavali</td>
                <td>14 Nov 2020</td>
                <td>Saturday</td>
                <td class="text-right">
                  
                </td>
              </tr>
              <tr class="holiday-upcoming">
                <td>8</td>
                <td>Gowardhan Pooja</td>
                <td>15 Nov 2020</td>
                <td>Sunday</td>
                <td class="text-right">
                  
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>
  <!-- /Page Content -->


<!-- Invite client Modal -->
<div class="modal custom-modal fade" id="addHolidaykModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
                <h5 class="modal-title">Add Holiday</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
            <div class="modal-body">
              <form method="post" id="assignTaskForm">
                @csrf
                <div class="form-header">
               
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                   <p> You can custom holiday.</p>                    
                </div>
                </div>
                <div class="form-group">                        
                        <label>Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name">
                        <span class="errorDiv"></span>
                </div>  

                <div class="form-group">                        
                        <label>Date <span class="text-danger">*</span></label>
                        <div class="cal-icon">
                          <input class="form-control " id="date" type="text" name="date" placeholder="dd-mm-yyyy">
                        </div>
                        <span class="errorDiv"></span>
                </div>  

                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <input type="hidden" name="task_id" id="input_task_id2" value="">
                            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
                            <button class="btn btn-primary submit-btn">Assign now</button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>     
<!--  -->

<script type="text/javascript">

$(function(){

$(document).on('click','#addHolidayBtn',function(){

  $('#addHolidaykModal').modal();

});

//submit task form
 $("#assignTaskForm").validate({
        rules:{
          assign_user:{
                required: true,                
            },
            
        },
        highlight: function (element) {
          $(element).closest('.form-group').addClass('errorDiv');
        },
        messages:{
            assign_user:{
                required: "Please seelct an user",                
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                url:'/task/assignToUser',
                type:'POST',
                data:$('#assignTaskForm').serialize(),
                success: function(data) {
                    console.log(data);
                    var obj = JSON.parse(data);
                    if(obj.status=='ok'){
                      location.reload(true);                    
                    }
                    else
                    {
                      alert("Something went wrong!");
                    }
                }
             });
             return false; // required to block normal submit since you used ajax
         }
});

});
</script>

@endsection