@extends('admin.layout.master')
@section('content')
<style>
    .select_2 {
       width:100% !important;
    }
</style>
   
    <div class="row">
        <div class="col-12">
            @include('flash-message')
        </div>
    </div>
    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center ">
                    <h3 class="text-left">{{__('obs.bulk')}} {{__('obs.ot')}} {{__('obs.day')}} {{__('obs.request')}} </h3>
                 </div>
                
                <div class="card-body">
                    <form action="{{route('payroll.hrm.bulk_ot_day_request.create')}}" method="GET">
                        <div class='row'>
                            <div class='col-md-3'>
                                <div class="form-group">
                                    <label>{{__('obs.name')}}/{{__('obs.code')}}</label>
                                    <select class="form-control input-sm name_code_live_search" name="employee_id" id="employee_id">
                                        {{-- @foreach ($employes as $e)
                                            <option value="{{$e->id}}" @if(request()->get('emp_code') == $e->emp_code) {{'selected'}} @endif>{{$e->emp_name}}-{{$e->emp_code}}</option>
                                         @endforeach --}}
                                    </select>
                                </div>
                            </div>
                           
                           
                            <div class='col-md-1 text-center mt-4'>
                                <button class="btn btn-primary btn-sm" name="filter" value="true">{{__('obs.search')}}</button>
                            </div>
                           
                        </div>
                    </form>
                </div>
                </div>
                @if ($employee)
               <div class="card">
                   <div class="card-body">
                        <form action="{{route('payroll.hrm.bulk_ot_day_request.store')}}" method="post" id="ot_day_request_form">
                         @csrf
                        <button  style="position: fixed;bottom:35%;right:1px;z-index:2;" class="btn btn-sm btn-success" type="button" onclick='submit_data("ot_day_request_form")'><i class="fa fa-save"></i> {{__('obs.submit')}}</button>
                       
                        <input type="hidden" name="employee_id" value="{{$employee->id}}">

                        <div class="row">
                            <div class="col-md-6">
                                <table class="display table-bordered  table table-stripped mt-3 text-center" style="width: 100%">
                                    <thead class="text-center">
                                    <tr>
                                        <th style="width: 10%">{{__('obs.code')}}</th>
                                        <th style="width:12%">{{__('obs.name')}}</th>
                                        <th style="width: 10%">{{__('obs.department')}}</th>
                                        <th style="width: 10%">{{__('obs.designation')}}</th>
                                       
                                    </tr>
                                    </thead>
                                    <tbody>
    
                                      <tr>
                                        <td class="text-center">{{$employee->emp_code}}</td>
                                        <td class="text-start">{{$employee->emp_name}}</td>
                                        <td>{{$employee->fetch_department ? $employee->fetch_department->name : null}}</td>
                                        <td>{{$employee->fetch_designation ? $employee->fetch_designation->name : null}}</td>
                                      </tr>
                                     
                                    </tbody>
                                </table>
                            </div>

                            <div class="col-md-6">
                                <table class="display table table-bordered table mt-3 text-center" style="width: 100%">
                                    <thead class="text-center">
                                        <tr>
                                            <th style="width: 30%">{{__('obs.date')}}</th>
                                            <th style="width:40%">{{__('obs.type')}}</th>
                                            <th style="width: 20%"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="dynamic-row">
                                        <tr>
                                            <td>
                                                <input type="text" name="date[]" class="form-control datepicker">
                                            </td>
                                            <td>
                                                <select class="form-control" name="type[]" id="">
                                                    <option value="2" selected>Adjust With leave</option>
                                                    <option value="1">Adjust With Salary</option>
                                                </select>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-success add-row">
                                                    <i class="fa fa-plus"></i> <!-- Font Awesome icon -->
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            @endif

        </div>
    </div>

@endsection

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

    $(document).ready(function () {
        $('.select_2').select2();
    });
    
    function submit_data(formId) {
       var message = "Do you want to Submit?";
       var confirmButtonText = "Yes, Submit it!";
       var formUrl = null;
       var  method = null;      
       showConfirmAndSubmit(formId, message,confirmButtonText,ajax=0,formUrl,data = null, method);
     
   }

    $(document).ready(function () {
        $(document).on('click', '.add-row', function () {
            let newRow = $('#dynamic-row tr:first').clone();
            newRow.find('input').val('');
            newRow.find('select').val();

            newRow.find('.add-row')
                .removeClass('btn-success add-row')
                .addClass('btn-danger remove-row')
                .html('<i class="fa fa-minus"></i>'); 

            $('#dynamic-row').append(newRow);

            flatpickr('.datepicker',{
                dateFormat: 'd-m-Y',
                disableMobile: 'true'
            })
        });

        $(document).on('click', '.remove-row', function () {
            $(this).closest('tr').remove();
        });
    });

</script>
@endsection