@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')
@endsection
@section('content')

    <section>
        <div class="col-12 mt-4">
            <h4 class="page-title text-center"> {{ __('obs.ot') }} {{ __('obs.day') }} {{ __('obs.request') }}
                {{ __('obs.create') }}</h4>
            <div class="mb-2 heading-border"></div>
        </div>
    </section>
    <section class="row">
        <div class="col-12 mb-4">
            <div class="blu-card d-flex flex-wrap p-3">
                <div class="col-12">
                    @if (session('success'))
                        <div class="alert alert-success" id="hide-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" id="hide-alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            
                <form class="col-12 border-right" action="{{ route('employee.ot_day_request.store') }}" method="post" id="employee_ot_request_form">
                    @csrf
                    <div id="form-wrapper" class="row">
                        <div class="col-md-8" id="form-container" >
                            <div class="row w-100">
                                <div class="form-group col-md-4 col-sm-6">
                                    <label for="exampleInputEmail1">{{ __('obs.date') }}</label>
                                    <input required name="date[]" class="form-control" type="date">
                                </div>
                    
                                <div class="form-group col-md-4 col-sm-6">
                                    <label for="type">{{ __('obs.type') }}</label>
                                    <select class="form-control" name="type[]">
                                        <option value="2">Adjust With Leave</option>
                                        <option value="1">Adjust With Salary</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-1 col-sm-4 d-flex align-items-end" dis>
                                    <button type="button" class="btn btn-danger remove-field">X</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-1">
                            <!-- The "+" button is placed outside of the cloneable area -->
                            <div class="form-group col-md-1 col-sm-4 d-flex align-items-end">
                                <button type="button" id="add-more" class="btn btn-primary">+</button>
                            </div>
                        </div>
                       
                    </div>
                
                    <div class="row mt-3">
                        <div class="col-5 d-flex justify-content-end">
                            <button type="button" class="btn btn-success btn-sm" onclick="submit_data('employee_ot_request_form')">Submit</button>
                        </div>
                    </div>
                </form>
                
                
            </div>
        </div>
    </section>

    <section class="row ">
        <div class="col-12">
            <div class="card blu-card py-0">
                <div class="card-header py-2">
                    <h6> {{ __('obs.ot') }} {{ __('obs.day') }} {{ __('obs.request') }} {{ __('obs.list') }}</h6>
                </div>
                <div class="card-body p-1">
                    <table class="table table-bordered table-hover text-center">
                        <thead class="">
                            <tr>
                                <th  style="width:3%">{{ __('obs.sl') }}</th>
                                <th style="width: 10%">{{__('obs.date')}}</th>
                                <th style="width: 10%">{{__('obs.type')}}</th>
                                <th style="width: 10%">{{__('obs.status')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $sl=1;
                            @endphp
                            @foreach ($ot_day_requests as $list)
                                <tr class="att-status-row">
                                    <td>{{$sl++}}</td>
                                    <td class="text-center">{{date('d-m-Y',strtotime($list->date))}}</td>
                                    <td class="text-center">
                                        @if ($list->type ==1)
                                            <span class="badge badge-info">Adjust with Salary</span>
                                        @elseif ($list->type ==2)
                                            <span class="badge badge-success">Adjust with Leave</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if ($list->is_verified ==1)
                                            <span class="badge badge-primary">Pending</span>
                                        @elseif($list->is_verified ==2)
                                            @if($list->type ==2 && $list->adjust_status == 1)
                                                <span class="badge badge-warning">Not Adjusted</span>
                                            @elseif($list->type ==2 && $list->adjust_status == 2)
                                                <span class="badge badge-success">Adjusted</span>
                                            @else
                                                <span class="badge badge-success">Verified</span>
                                            @endif
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

@endsection

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

<script>
   $(document).ready(function() {
        $('#add-more').click(function() {
            // Clone the input fields
            var newFields = $('#form-container').first().clone();
            
            // Clear the cloned input values
            newFields.find('input[type="date"]').val('');
            newFields.find('select').val('2'); // Set default option

            $('#form-wrapper').append(newFields);
        });

        // Delegate event listener for dynamically added remove buttons
        $(document).on('click', '.remove-field', function() {
            $(this).closest('.row').remove(); // Remove the cloned row
        });
    });

     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,formUrldata=null,method,);
   }
</script>
@endsection