<section class="container collapse" id="tncInfo">
    <div class="jumbotron bg-white">
        <h6 class="text-danger">Taxi Fare</h6>
        <ul>
            <li>4.8 Taxi fare claimable for staff who work untill 12.00 midnight and above and solely for those possess public transport</li>
        </ul>
        <small>Reference : <a href="http://salihin.noip.me/spserp/assets/uploads/hr/tnc/Claims__Allowances_-(Revision_2).pdf" target="_blank">Claims and Allowances (Revision no: 2) </a></small>
        <ul>
            <li>5.7.9 SALIHIN shall reimburse the taxi fares incurred while performing Company duties</li>
        </ul>
        <small>Reference : <a href="http://salihin.noip.me/spserp/assets/uploads/hr/tnc/Travel_-_(Revision_2).pdf" target="_blank">Local and Business Travel (Revision no: 2) Effective date : 1st January 2018</a></small>
    </div>
</section>

<section class="container">
    <div class="card no-shadow">
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <h2>Add Taxi Fare <small>(Submission <?php echo date('F-Y',strtotime('01-'.$month.'-'.$year)); ?>)</small> </h2>
                </div>
                <div class="col-2 text-right">
                    <button class="btn btn-sm btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="" type="button" data-toggle="collapse" data-target="#tncInfo" data-original-title="Terms and Condition Reference">
                        <i class="fas fa-info"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container">
    <div class="card no-shadow bg-light-transparent">
        <div class="card-body">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-block btn-dark p-4" onclick="workingLate()" >
                                <h3><i class="fas fa-moon"></i> Working Late</h3>
                            </button>
                        </div>
                        <div class="col">
                            <button class="btn btn-block btn-dark p-4" onclick="traveling()" >
                                <h3><i class="fas fa-briefcase"></i> Traveling</h3>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="container mb-5 d-none" id="option-worklate">
    <div class="card no-shadow">
        <div class="card-body">
            
            <div class="row">
                <div class="col-lg-2">
                    <label><b>Date</b></label>
                </div>
                <div class="col-lg-4">
                    <input type="text" class="form-control claimdate" id="worklate_date"/>
                </div>
                <div class="col-lg-2">
                    <label><b>Amount</b></label>
                </div>
                <div class="col-lg-4">
                    <input type="number" class="form-control" id="worklate_amount" />
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label><b>Attachments</b></label>
                    <div class="row">
                        <div class="col text-right pr-4">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mdl-attachment"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


            <div class="row">
                <div class="col text-right">
                    <button class="btn btn-success"><i class="fas fa-save"></i> Save</button>
                </div>
            </div>

        </div>
    </div>
</section>




<section class="container mb-5 d-none" id="option-traveling">
    <div class="card no-shadow">
        <div class="card-body">

            <div class="row">

                <div class="col-lg-2">
                    <label><b>Date</b></label>
                </div>
                <div class="col-lg-4">
                    <input type="text"  class="form-control claimdate" id="date_from"/>
                </div>

                <div class="col-lg-2">
                    <label><b>Amount</b></label>
                </div>
                <div class="col-lg-4">
                    <input type="text" class="form-control" />
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <label><b>Staff movements</b></label>
                    <div class="row">
                        <div class="col text-right pr-4">
                            <button class="btn btn-primary btn-sm"><i class="fas fa-sync-alt"></i></button>
                        </div>
                    </div>
                    <table class="table table-bordered" id="table-staffMovement">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Movement Type</th>
                                <th>Client</th>
                                <th>Location</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


            <div class="row">
                <div class="col">
                    <label><b>Attachments</b></label>
                    <div class="row">
                        <div class="col text-right pr-4">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mdl-attachment"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                    <table class="table table-bordered" >
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>


            <div class="row">
                <div class="col text-right">
                    <button class="btn btn-success"><i class="fas fa-save"></i> Save</button>
                </div>
            </div>


        </div>
    </div>
</section>









<!-- attachements modal -->
<div class="modal fade" id="mdl-attachment" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Uploading Attachments</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col">
                <label><b>File</b></label>
                <input type="file" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <label><b>Description</b></label>
                <textarea cols="30" rows="10" class="form-control"></textarea>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- attachments modal -->


<script>
    var staff_movement = [];

    var claim_year      = <?php echo $year; ?>; //2018
    var claim_month     = <?php echo $month; ?>; //8
    
    var date = new Date();
    var full_start_date = date.setFullYear(claim_year,claim_month-1 , 1);
    var start_claim     = moment(full_start_date).subtract(2,'months').startOf('month').format('DD-MM-YYYY');

    var full_end_date = date.setFullYear(claim_year,claim_month,1);
    var end_claim     = moment(full_end_date).subtract(2,'months').endOf('month').format('DD-MM-YYYY');

    $(document).ready(function(){

        $( ".claimdate" ).datepicker(
            {
                uiLibrary: 'bootstrap4',
                format: 'dd-mm-yyyy',
                autoclose: true,
                changeMonth: true, 
                changeYear: true,
                startDate :start_claim,
                endDate:end_claim
            }
        );

        $('#date_from').change(function()
            {
                let date_from   = $('#date_from').val();

                if(date_from)
                {
                    fetchMovement(date_from);
                }
            }
        );

    });



    /**
    Navigation 
     */
    function workingLate()
    {
        $('#option-worklate').removeClass('d-none');
        $('#option-traveling').addClass('d-none');
        console.log('working untill mdinight or more');
    }

    function traveling()
    {
        $('#option-traveling').removeClass('d-none');
        $('#option-worklate').addClass('d-none');
        console.log('Traveling ');    
    }
    /**
    Navigation 
     */

    function fetchMovement(date_from)
    {
        if(date_from)
        {
            let url = '<?php echo base_url('hr/api_movement/getUserMovementBetweenDate/'); ?>';
            let data = 
            {
                token:'<?php echo $token; ?>',
                date_from:date_from,
                date_to:date_from,
                user_id:<?php echo $user_id; ?>,
            }

            $.ajax({
                url: url,
                type: 'POST',
                data:data,
                dataType: 'JSON',
                success: function(data)
                {
                    staff_movement = data.results;
                    createTable();
                },error:function(err)
                {
    
                }
            });

        }
    }

    function createTable()
    {
        var table   = $('#table-staffMovement').DataTable();
        table.clear().draw();

        $.each(staff_movement,function(index,value){
            table.row.add({
                0:moment(value.movement_date).format('DD/MM/YYYY'),
                1:value.movement_type,
                2:value.client,
                3:value.destination,
                4:'<button class="btn btn-danger btn-sm" onclick="removeStaffMovement('+index+')" ><i class="fas fa-trash-alt"></i></button>',
            }).draw();
        });
    }

    function removeStaffMovement(index)
    {
        staff_movement.splice(index,1);
        createTable();
    }

    
</script>