@extends('admin.layout.master')
@section('content')
   @include('flash-message')
       
    <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"> Dynamic OT Shift</h3>
                    <a href="{{route('payroll.hrm.roster.shift_extend')}}" class="btn btn-sm btn-success">List</a>
                </div>
                
                <div class="card-body">
                    <form action="{{route('payroll.hrm.roster.shift_extend')}}" method="get">
                       
                        <div class='row col-12' >
                            <div class='col-3'>
                                <div class="form-group">
                                    <label>Date</label>
                                    <input type="text" class="form-control datepicker" id="date" name="date" value="{{request('date') ? carbon()->parse(request('date'))->format('d-m-Y') :carbon()->now()->format('d-m-Y')}}" placeholder="Date" required >
                                </div>
                            </div>
                           
                            <div class='col-4'>
                                <div class="form-group">
                                    <label>Employee Name</label>
                                    <select id="emp_select" class="name_code_live_search form-control" name="employee_id">
                                        <option selected disabled value="">Select employee</option>
                                        @foreach ($employes as $e)
                                            <option value="{{$e->id}}" @if(request()->get('employee_id') == $e->id) {{'selected'}} @endif>{{$e->emp_name}}-{{$e->emp_code}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class='col-md-2 mt-4'>
                                <button class="btn btn-primary btn-sm" id="submit_button">Submit</button>
                            </div>
                            <div class='col-md-2 mt-4 text-center'>
                                <button class="btn btn-warning btn-sm" type="button" id="refresh_from">Refresh</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h3 class="text-left">Current Date Roster List</h3>
                        </div>
                    </div>  
                </div>
                <div class="card-body">
                    <div class='row'>
                        <table class="display table-bordered datatable table table-stripped mt-3" style="width: 100%">
                            <thead>
                                <tr>
                                    <th style="width: 20%">Date</th>
                                    <th style="width: 25%">Shift</th>
                                    <th style="width: 15%">Type</th>
                                    <th style="width: 20%">Extend Hours</th>

                                    <th style="width: 15%">Action</th>
                                </tr>
                            </thead>
                            <tbody id="exchange_or_replace_list">
                             @foreach ($current_shift_info as $list)
                             @php
                                 $date = carbon()->parse(request('date'))->format('Y-m-d');
                                 $shift_extend = $shift_extends->where('emp_id',$list->emp_id)->where('date',$date)->where('shift_id',$list->shift_id)->first();
                                
                             @endphp
                           <form action="{{ route('payroll.hrm.roster.shift_extend_store', ['id' => $list->id]) }}" method="get">
                                <input type="hidden" value="{{request('date')}}" name="date">
                                <input type="hidden" value="{{request('employee_id')}}" name="employee_id">
                                <input type="hidden" value="{{$list->shift_id}}" name="shift_id">
                                <tr>
                                    <td class="text-left">{{carbon()->parse(request('date'))->format("d-m-Y")}}</td>
                                    <td class="text-left">{{$list->fetch_shift_info_data->name}}</td>
                                
                                    <td class="text-left">{{$list->type== 1 ? 'Exchange' : ($list->type== 2 ? 'Replace':($list->type== 3 ? 'OT': 'Regular'))}}</td>
                                    <td class="text-center extend_hours" id="" row-id="{{$list->id}}">
                                        <span id="extend_hours_span_{{$list->id}}">{{$shift_extend ? $shift_extend->extend_hours: null}}</span>
                                        <input type="number" class="form-control" name="extend_hours" value="{{$shift_extend ? $shift_extend->extend_hours: null}}" style="display: none" id="extend_hours_input_field_{{$list->id}}">
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-warning btn-sm"  type="submit" id="update_button_{{$list->id}}" style="display: none">Extend</button>
                                    </td>
                                </tr>
                           </form>
                             @endforeach

                               
                            </tbody>
                        </table>
                        
                    </div>  
                </div>
            </div>
        </div>
    </div>
    <script>



    $(document).ready(function(){
        $(".extend_hours").click(function(){
             let row_id = $(this).attr('row-id');
             
             $('#extend_hours_span_'+row_id).hide();
             $('#extend_hours_input_field_'+row_id).show();

             $('#update_button_'+row_id).show();
          
        });

        $("#refresh_from").click(function(){
            $('#emp_select').val(null).trigger('change');
        });
       
    });

    </script>

@endsection