@extends('admin.layout.master')
@section('content')
<style>
    select {
           height: 33px !important;
       }
</style>
    
    <div class="row">
        <div class="col-lg-12">
            <div class="card">

                <div class="card-header d-flex justify-content-between align-items-center ">
                    <h5 class="font-weight-bold mb-0">  {{__('obs.weekend_cancel')}}</h5>
                    <a href="{{route('payroll.hrm.weekend_cancel.index')}}" class="btn btn-sm btn-success">{{__('obs.weekend_cancel')}} {{__('obs.list')}} </a>
                 </div> 

              
                <div class="card-body">
                   
                 
                    <form class="col-12 " action="{{route('payroll.hrm.weekend_cancel.store')}}" method="post" id="myForm">
                        @csrf
                            <div class="form-group col-md-4 offset-3">
                                <label for="date" class="labels">{{__('obs.date')}}</label>
                                <input  type="text"  name="date" class="form-control datepicker" id="date" required>
                            </div>
                            <div class="form-group col-md-4 offset-3">
                                <label class="labels pr-4">{{__('obs.assign_type')}}</label>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input assign_type" type="radio" name="assign_type" id="all_employee" value="1" checked style="height: 20px; width:20px">
                                    <label class="form-check-label" for="assign_type">{{__('obs.all')}}</label>
                                  </div>
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input assign_type" type="radio" name="assign_type" id="partial_employee" value="2" style="height: 20px; width:20px">
                                    <label class="form-check-label" for="assign_type">{{__('obs.partial')}}</label>
                                  </div>
                            </div>
                            <div class="form-group col-md-4 offset-3 hidden_div" style="display: none">
                                <label for="Department" class="labels">{{__('obs.select_department')}}</label>
                                <select class="form-control select_2" name="department_id" id="department" style="width: 100%"   onchange="deptwiseemp()">
                                    <option value="">{{__('obs.choose_one')}}</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-4 offset-3 hidden_div"id="emp" style="display: none">
                             <label class="">{{__('obs.employee')}}</label>
                             <select class="form-control select_2" id="employee" name="employee_id" style="width: 100%">
                                <option value=" ">{{__('obs.choose_one')}}</option>
                                {{-- @foreach ($employees as $employee)
                                    <option value="{{ $employee->id }}">{{ $employee->emp_name }}</option>
                                @endforeach --}}
                            </select>
                            </div>
                           
                            
                            <div class="form-group col-md-4 offset-3">
                                <label>{{__('obs.description')}}</label>
                               <textarea class="form-control" name="description" id="" cols="1" rows="1"></textarea>
                            </div>
                            <div class="form-group col-md-4 offset-3">
                                <label>{{__('obs.status')}}</label>
                                <select class="form-control input-sm" name="status" id="status">
                                    <option value="1" selected>{{__('obs.active')}}</option>
                                    <option value="2">{{__('obs.inactive')}}</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4 offset-3 text-center">
                                 <button class='btn btn-sm btn-warning' id="data_submit">{{__('obs.submit')}}</button>
                            </div>   
                    </form>
                </div>
            </div>
        </div>
    </div>

   
    
@endsection

@section('script')
    <script src="{{ asset('payroll_assets/payroll_common.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('.select_2').select2();

            $(".assign_type").change(function() {
                if ($(this).val() == 2) {
                    $(".hidden_div").show(1000);
                } else if ($(this).val() == 1) {
                    $(".hidden_div").hide(1000);
                }
            });
        });


        $("#data_submit").click(function(e){
            e.preventDefault();
             let date = $("#date").val();
             let assign_type = $("input[type='radio']:checked").val();
          
            if (date) {
                if (assign_type == 2) {
                    let department = $("#department").val();
                  
                    // let designation = $("#designation").val();
                    if (department) {
                        // $('#myForm').submit();
                    }else{
                        alert('Please Select Department');
                    }
                }else{
                    $('#myForm').submit();
                }
               
            }else{
                alert('Please Select Date');
            }
          
        });

      function deptwiseemp(v) {
        let id = $('#department').val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'GET',
            url: "/payroll/get-dept-wise-emp/" + id,
            data: {
                _token: "{{ csrf_token() }}",
            },

            dataType: 'json',
            success: function(data) {
                var emp_count = data.length;
                var html = `<option value="">Select Employee</option>`;
                for (var i = 0; i < emp_count; i++) {
                    html += `
                            <option value="${data[i].id}">${data[i].emp_name}</option>
                        `;
                }
                $('#employee').html(html);
            }
        })
    }
    </script>
@endsection