@extends('layouts.customer')
<style type="text/css">
    .payroll_type ul{    width: 100%;padding-left: 0px;float: left;margin-top: 10px;}
    .payroll_type li{list-style: none;float: left;margin-right: 15px;}
    .payroll_type li label{font-size: 15px;}
    .payroll_type p {float: left;font-size: 15px;width: 100%;}
    .payroll_type input[type="radio"]{margin-top: 3px;float: left;margin-right: 8px;}
    .payroll_type h3{font-weight: 600;}
    .day_name {max-width: 300px;}
    .border-warning {
        border: 1px solid #ffc107 !important;
    }
</style>
@section('content')
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Payroll Settings</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                             <li class="breadcrumb-item">
                                <a href="{{url('/')}}/dashboard">Dashboard</a>
                            </li>
                            
                            <li class="breadcrumb-item active" aria-current="page">Payroll Settings</li>
                        </ol>
                    </nav>

                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    @if ($errors->any())
                        <div class="alert alert-danger w-100">
                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>


            <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
                @if ($message = Session::get('notice'))
                    <div class="w-100 alert alert-warning">
                        <p>{{ $message }}</p>
                    </div>
                @endif
            </div>

            <div class="row mb-4">
                <div class="col-12 mb-4">
                    <div class="card payroll_type">
                        <div class="card-body">
                            <form id="create-form" action="{{ route('payroll-settings.store', ['account'=>$account]) }}" method="post">
                                @csrf
                                <h3>
                                    Set Payroll Cycle
                                    
                                    <small class="float-right">
                                        <strong>Payroll starts from: </strong> @if(!empty($setting->start_date)) {{ \Carbon\Carbon::parse($setting->start_date)->format('F j, Y') }} @else N/A @endif
                                    </small>
                                </h3>
                                <h5>Your current payroll cycle is: {{ isset($setting->payroll_type) ? ucwords($setting->payroll_type) : 'N/A' }}
                                    <a class="btn btn-link payroll-edit-button" style="font-size: 12px;padding-left: 10px;">
                                        <div class="glyph-icon simple-icon-note"></div>
                                    </a>
                                </h5>
                                <div class="payroll-edit d-none">
                                    <ul>
                                        <li class="custom-control custom-radio">
                                            <input type="radio" name="payroll_type" class="custom-control-input" id="daily" value="daily" @if(isset($setting->payroll_type) && $setting->payroll_type == 'daily') checked @endif />
                                            <label class="custom-control-label" for="daily">Daily</label>
                                        </li>
                                        <li class="custom-control custom-radio">
                                            <input type="radio" @if(isset($setting->payroll_type) && $setting->payroll_type == 'weekly') checked @endif name="payroll_type" class="custom-control-input" id="Weekly" value="weekly" />
                                            <label class="custom-control-label" for="Weekly">Weekly</label>
                                        </li>
                                        <li class="custom-control custom-radio">
                                            <input type="radio" name="payroll_type" class="custom-control-input" id="Biweekly"  @if(isset($setting->payroll_type) && $setting->payroll_type == 'biweekly') checked @endif value="biweekly" />
                                            <label class="custom-control-label" for="Biweekly">Biweekly</label>
                                        </li>
                                        <li class="custom-control custom-radio">
                                            <input type="radio" name="payroll_type" class="custom-control-input" id="Monthly" @if(isset($setting->payroll_type) && $setting->payroll_type == 'monthly') checked @endif value="monthly" />
                                            <label class="custom-control-label" for="Monthly">Monthly</label>
                                        </li>
                                    </ul>

                                    <div class="mb-4">
                                        <h5 class="mb-1">Mark this period as an adjustment to override an active payroll.</h5>
                                        <div>
                                            <div class="custom-control custom-checkbox mb-4">
                                                <input type="checkbox" class="custom-control-input" id="is_adjusted" name="is_adjusted" @if($setting->is_adjusted == 1) checked @endif>
                                                <label class="custom-control-label" for="is_adjusted">Override the current payroll schedule with a new one starting partway through.</label>
                                            </div>
                                        </div>

                                        <div class="form-row mt-3 mb-2 d-none" id="date">
                                            <div class="col-4">
                                                <label for="">Period Start Date:</label>
                                                @php
                                                    $today = \Carbon\Carbon::today()->format('m/d/Y');
                                                @endphp
                                                <input 
                                                    type="text" 
                                                    class="form-control datepicker" 
                                                    id="datepicker" 
                                                    name="date"
                                                    value="{{ $today }}"
                                                    data-provide="datepicker"
                                                    data-date-format="mm/dd/yyyy"
                                                    data-date-start-date="{{ $today }}"
                                                    data-date-autoclose="true"
                                                    data-date-today-highlight="true" />
                                            </div>
                                        </div>

                                        @if($setting)
                                            <!-- Optional adjustment preview warning -->
                                            <div class="card border-warning mb-3 d-none" id="adjustmentPreview">
                                                <div class="card-header text-dark font-weight-bold p-2">
                                                    &#9888;&#65039; Adjustment Preview
                                                </div>
                                                <div class="card-body text-dark p-2">
                                                    <p class="mb-1">This new payroll period will override the following:</p>
                                                    <ul class="mb-0">
                                                    <li><strong>Current Payroll:</strong> {{$setting->payroll_type ? ucfirst($setting->payroll_type) : 'N/A'}}</li>
                                                    <li><strong>Start Date:</strong> @if(!empty($setting->start_date)) {{ \Carbon\Carbon::parse($setting->start_date)->format('F j, Y') }} @else N/A @endif</li>
                                                    <li><strong>End Date:</strong> <span class="payroll_end_date">{{ now()->format('F j, Y') }}</span> </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="mb-3" id="start" style="display: @if(isset($setting->payroll_type) && ( $setting->payroll_type == 'weekly' || $setting->payroll_type == 'biweekly' ) ) block @else none @endif">
                                        <label for="">Select your payroll frequency:</label>
                                        <select class="day_name form-control" @if(isset($setting->payroll_type) && ( $setting->payroll_type == 'weekly' || $setting->payroll_type == 'biweekly' ) ) name="start" @endif>
                                            {{-- weekDays() function is defined inside helper.php file --}}
                                            @foreach( weekDays() as $day ) 
                                                <option value="{{ $day }}" @if(isset($setting->payroll_type) && in_array($setting->payroll_type, ['weekly','biweekly']) && $day == $setting->day) selected @endif>{{ ucfirst($day) }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    
                                    <p class="text-danger">*This setting will only apply to staff members who are under the “Apply to all” configuration.</p>
                                    <input type="submit" class="btn btn-primary" value="Save Payroll Settings">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{--
            <div class="col-4 row mb-4">
                <div class="col-12 mb-4">
                    <div class="card payroll_type">
                        <div class="card-body">
                            <form action="{{ route('payroll.settings.update', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                @csrf
                                @method('PUT')

                                <h3>Break Duration</h3> 
                                @if(isset($gsettings->setting_prop) && $gsettings->setting_prop == 'shift_break_min')
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group row mb-1">
                                                <div class="col-4">
                                                   <input type="text" class="form-control" value="{{ $gsettings->setting_value ?? '' }}" name="setting_value" placeholder="30" style="max-width: 100%;width:100px;">
                                                </div>
                                                <div class="col-8">
                                                    <p>Set how long each break lasts (in minutes)</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group row mb-1">
                                                <div class="col-4">
                                                   <input type="text" class="form-control" name="setting_value" placeholder="Shift break time" style="max-width: 100%;width:100px;" required>
                                                </div>
                                                <div class="col-8">
                                                    <p>In mintues</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                <div class="row">
                                    <div class="col-12">
                                        <input type="submit" class="btn btn-primary" value="Update Break Time">
                                    </div>
                                </div>
                                <input type="hidden" name="setting_key" value="{{ $gsettings->setting_key ?? '' }}" />
                                <input type="hidden" name="setting_prop" value="{{ $gsettings->setting_prop ?? '' }}" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-4  row mb-4">
                <div class="col-12 mb-4">
                    <div class="card payroll_type">
                        <div class="card-body">
                            @if($gbsettings)
                                <form action="{{ route('payroll.settings.update', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                    @csrf
                                    @method('PUT')

                                    <h3>Is Paid Break?</h3> 
                                    @if($gbsettings->setting_prop == 'is_paid_shift_break')
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group row mb-1">
                                                    <label class="col-12 col-form-label">
                                                        <strong>Paid Break</strong>
                                                    </label>
                                                    <div class="col-12">
                                                        <p>Toggle this on if employees are paid during break time.</p>
                                                        <div class="custom-switch custom-switch-secondary mb-2">
                                                            <input class="custom-switch-input" id="is_paid" type="checkbox" name="setting_value" value="{{ $gbsettings->setting_value ?? '' }}" @if($gbsettings->setting_value) checked @endif>
                                                            <label class="custom-switch-btn" for="is_paid"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="row">
                                        <div class="col-12">
                                            <input type="submit" class="btn btn-primary" value="Update Break Type">
                                        </div>
                                    </div>
                                    <input type="hidden" name="setting_key" value="{{ $gbsettings->setting_key }}" />
                                    <input type="hidden" name="setting_prop" value="{{ $gbsettings->setting_prop }}" />
                                </form>
                            @else
                                <form action="{{ route('payroll.settings.store', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                    @csrf

                                    <h3>Is Paid Break?</h3> 
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group row mb-1">
                                                <label class="col-12 col-form-label">
                                                    <strong>Paid Break</strong>
                                                </label>
                                                <p>Toggle this on if employees are paid during break time.</p>
                                                <div class="col-12">
                                                    <div class="custom-switch custom-switch-secondary mb-2">
                                                        <input class="custom-switch-input" id="is_paid" type="checkbox" name="setting_value" value="0">
                                                        <label class="custom-switch-btn" for="is_paid"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12">
                                            <input type="submit" class="btn btn-primary" value="Update">
                                        </div>
                                    </div>
                                    <input type="hidden" name="setting_key" value="{{ session('restaurant')['restaurant_id'] ?? '' }}" />
                                    <input type="hidden" name="setting_prop" value="is_paid_shift_break" />
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            @if($gwsettings)
                <div class="row mb-4">
                    <div class="col-12 mb-4">
                        <div class="card payroll_type">
                            <div class="card-body">
                            <!-- weekly_working_setting -->
                                @php
                                    $gw_settings = json_decode($gwsettings->setting_value);
                                @endphp

                                @if( $gw_settings )
                                    <form action="{{ route('payroll.settings.update', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                        @csrf
                                        @method('PUT')

                                        @foreach( $gw_settings as $key => $gw_setting )
                                            @if( $key == 'weekly_working_hours' )
                                                <h3>Working Hours & Days</h3> 
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group row mb-1">
                                                            <label>Weekly Working Hours</label>
                                                            <div class="col-12">
                                                               <input type="number" class="form-control" value="{{ $gw_setting ?? '' }}" name="setting_value[weekly_working_hours]" placeholder="Weekly working hours">
                                                               <p>Enter total work hours per week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            @if( $key == 'weekly_working_days' )
                                                <h3>Weekly Working Days</h3> 
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group row mb-1">
                                                            <div class="col-12">
                                                                <select name="setting_value[weekly_working_days]" class="form-control">
                                                                    @for($i=1; $i<=7; $i++)
                                                                        <option value="{{ $i }}" @if( $gw_setting == $i ) selected @endif>{{ $i }}</option>
                                                                    @endfor
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach

                                        <div class="row">
                                            <div class="col-12">
                                                <input type="submit" class="btn btn-primary" value="Update Working Hours">
                                            </div>
                                        </div>
                                        <input type="hidden" name="setting_key" value="{{ $gwsettings->setting_key }}" />
                                        <input type="hidden" name="setting_prop" value="{{ $gwsettings->setting_prop }}" />
                                    </form>
                                    
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row mb-4">
                    <div class="col-12 mb-4">
                        <div class="card payroll_type">
                            <div class="card-body">
                                <form action="{{ route('payroll.settings.store', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                    @csrf
                                        <h3>Weekly working hours?</h3> 
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group row mb-1">
                                                    <div class="col-12">
                                                        <input type="number" class="form-control" name="setting_value[weekly_working_hours]" placeholder="Weekly working hours">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    
                                        <h3>Weekly working days?</h3> 
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group row mb-1">
                                                    <div class="col-12">
                                                        <select name="setting_value[weekly_working_days]" class="form-control">
                                                            @for($i=1; $i<=7; $i++)
                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    <div class="row">
                                        <div class="col-12">
                                            <input type="submit" class="btn btn-primary" value="Save">
                                        </div>
                                    </div>
                                    <input type="hidden" name="setting_key" value="{{ session('restaurant')['restaurant_id'] ?? '' }}" />
                                    <input type="hidden" name="setting_prop" value="weekly_working_setting" />
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            --}}

            <div class="row mb-4">
                <div class="col-4 mb-4">
                    <div class="card h-100 payroll_type">
                        <div class="card-body">
                            <form action="{{ route('payroll.settings.update', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                @csrf
                                @method('PUT')

                                <h3>Break Duration?</h3> 
                                @if(isset($gsettings->setting_prop) && $gsettings->setting_prop == 'shift_break_min')
                                    <div class="form-row">
                                        <div class="form-group col-12 mb-1">
                                            <input type="text" class="form-control" value="{{ $gsettings->setting_value ?? '' }}" name="setting_value" placeholder="Shift break time">
                                            <span>In mintues</span>
                                        </div>
                                    </div>
                                @else
                                    <div class="form-row">
                                        <div class="form-group col-12 mb-1">
                                            <input type="text" class="form-control" name="setting_value" placeholder="Shift break time" required>
                                            <span>In mintues</span>
                                        </div>
                                    </div>
                                @endif
                                
                                <input type="submit" class="btn btn-primary float-right" value="Update Break">
                                <input type="hidden" name="setting_key" value="{{ $gsettings->setting_key ?? '' }}" />
                                <input type="hidden" name="setting_prop" value="{{ $gsettings->setting_prop ?? '' }}" />
                            </form>

                            <br />
                                                    </div>
                    </div>
                </div>

                <div class="col-4 mb-4">
                    <div class="card h-100 payroll_type">
                        <div class="card-body">
                            @if($gbsettings)
                                <form action="{{ route('payroll.settings.update', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                    @csrf
                                    @method('PUT')

                                    <h3>Is Paid Break?</h3> 
                                    @if($gbsettings->setting_prop == 'is_paid_shift_break')
                                        <div class="form-row">
                                            <div class="form-group col-12 mb-1">
                                                <label class="form-label">
                                                    <strong>Paid Break</strong>
                                                </label>
                                                <div>
                                                    <div class="custom-switch custom-switch-secondary mb-2">
                                                        <input class="custom-switch-input" id="is_paid" type="checkbox" name="setting_value" value="{{ $gbsettings->setting_value ?? '' }}" @if($gbsettings->setting_value) checked @endif>
                                                        <label class="custom-switch-btn" for="is_paid"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <input type="submit" class="btn btn-primary float-right" value="Update">
                                    <input type="hidden" name="setting_key" value="{{ $gbsettings->setting_key }}" />
                                    <input type="hidden" name="setting_prop" value="{{ $gbsettings->setting_prop }}" />
                                </form>
                            @else
                                <form action="{{ route('payroll.settings.store', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                    @csrf

                                    <h3>Is Paid Break?</h3> 
                                    <div class="form-row">
                                        <div class="form-group col-12 mb-1">
                                            <label class="form-label">
                                                <strong>Paid Break</strong>
                                            </label>
                                            <div>
                                                <div class="custom-switch custom-switch-secondary mb-2">
                                                    <input class="custom-switch-input" id="is_paid" type="checkbox" name="setting_value" value="0">
                                                    <label class="custom-switch-btn" for="is_paid"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <input type="submit" class="btn btn-primary float-right" value="Update">
                                    <input type="hidden" name="setting_key" value="{{ session('restaurant')['restaurant_id'] ?? '' }}" />
                                    <input type="hidden" name="setting_prop" value="is_paid_shift_break" />
                                </form>
                            @endif
                        </div>
                    </div>
                </div>

                @if($gwsettings)
                    <div class="col-4 mb-4">
                        <div class="card h-100 payroll_type">
                            <div class="card-body">
                            <!-- weekly_working_setting -->
                                @php
                                    $gw_settings = json_decode($gwsettings->setting_value);
                                @endphp

                                @if( $gw_settings )
                                    <form action="{{ route('payroll.settings.update', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                        @csrf
                                        @method('PUT')

                                        @foreach( $gw_settings as $key => $gw_setting )
                                            @if( $key == 'weekly_working_hours' )
                                                <h3>Weekly working hours?</h3> 
                                                <div class="form-row">
                                                    <div class="form-group col-12 mb-1">
                                                        <input type="number" class="form-control" value="{{ $gw_setting ?? '' }}" name="setting_value[weekly_working_hours]" placeholder="Weekly working hours">
                                                    </div>
                                                </div>
                                            @endif

                                            @if( $key == 'weekly_working_days' )
                                                <h3>Weekly working days?</h3> 
                                                <div class="form-row">
                                                    <div class="form-group col-12 mb-1">
                                                        <select name="setting_value[weekly_working_days]" class="form-control">
                                                            @for($i=1; $i<=7; $i++)
                                                                <option value="{{ $i }}" @if( $gw_setting == $i ) selected @endif>{{ $i }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                        
                                        <input type="submit" class="btn btn-primary float-right" value="Save">
                                        <input type="hidden" name="setting_key" value="{{ $gwsettings->setting_key }}" />
                                        <input type="hidden" name="setting_prop" value="{{ $gwsettings->setting_prop }}" />
                                    </form>
                                    
                                @endif
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-6 mb-4">
                        <div class="card h-100 payroll_type">
                            <div class="card-body">
                                <form action="{{ route('payroll.settings.store', ['account' => $account]) }}" method="POST" autocomplete="off" autofill="off">
                                    @csrf
                                        <h3>Weekly working hours?</h3> 
                                        <div class="form-row">
                                            <div class="form-group col-12 mb-1">
                                                <input type="number" class="form-control" name="setting_value[weekly_working_hours]" placeholder="Weekly working hours">
                                            </div>
                                        </div>
                                    
                                        <h3>Weekly working days?</h3> 
                                        <div class="form-row">
                                            <div class="form-group col-12 mb-1">
                                                <select name="setting_value[weekly_working_days]" class="form-control">
                                                    @for($i=1; $i<=7; $i++)
                                                        <option value="{{ $i }}">{{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                        
                                    <input type="submit" class="btn btn-primary float-right" value="Save">
                                    <input type="hidden" name="setting_key" value="{{ session('restaurant')['restaurant_id'] ?? '' }}" />
                                    <input type="hidden" name="setting_prop" value="weekly_working_setting" />
                                </form>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- New Payroll history grouping -->
            <div class="row card mb-4">
                <div class="card-body">
                    <h3>Payroll Periods</h3>
                    <div id="DataTables_Table_1_wrapper">
                        <table class="data-table table" id="DataTables_Table_1">
                            <thead>
                                <tr>
                                    <th scope="col">Periods</th>
                                    <th scope="col">Payroll Type</th>
                                    <th scope="col">Payroll Repeat Count</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">End Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{--
                                @php // $total = 0; @endphp
                                @if($groupedPayrolls)
                                    @foreach($groupedPayrolls as $groupedPayroll)
                                        @php
                                         /*
                                            $periods = '';
                                            $start_date = $end_date = '';
                                            if( $groupedPayroll->isNotEmpty() && $groupedPayroll->count() >= 2) {
                                                // Get data
                                                $last = $groupedPayroll->last() ?? '';
                                                $first = $groupedPayroll->first() ?? '';
                                                
                                                // Get dates
                                                $end_date = $last->end_date ?? '';
                                                $start_date = $first->start_date ?? '';

                                                // Periods
                                                $periods = date('M d, Y',strtotime($start_date)) . " to ";
                                                if($end_date) :
                                                    $periods .= date('M d, Y',strtotime($end_date));
                                                else:
                                                    $periods .= "N/A"; 
                                                endif;
                                            } else if( $groupedPayroll->isNotEmpty() ) {
                                                $first = $groupedPayroll->first() ?? '';

                                                // Get dates
                                                $end_date = $first->end_date ?? '';
                                                $start_date = $first->start_date ?? '';

                                                // Periods
                                                $periods = date('M d, Y',strtotime($start_date)) . " to ";
                                                if($end_date) :
                                                    $periods .= date('M d, Y',strtotime($end_date));
                                                else:
                                                    $periods .= "N/A"; 
                                                endif; 
                                            }
                                            */
                                        @endphp
                                        
                                        <tr>
                                            <td>{{ $periods }}</td>
                                            <td>{{ $first ? ucwords($first->payroll_type) : '' }}</td>
                                            <td>{{ $groupedPayroll->count() }}</td>
                                            <td>{{ date('M d, Y | h:i A',strtotime($start_date)) }}</td>
                                            <td>
                                                @if($end_date)
                                                    {{ date('M d, Y | h:i A',strtotime($end_date)) }}
                                                @else N/A @endif 
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif

                                        --}}

                                @forelse ($groupedPayrolls as $group)
                                    <tr>
                                        @php
                                            $startDate = \Carbon\Carbon::parse($group['start_date'])->format('M d, Y');
                                            $endDate = $group['end_date']
                                                ? \Carbon\Carbon::parse($group['end_date'])->format('M d, Y')
                                                : 'Ongoing';
                                        @endphp
                                        <td>{{ $startDate }} to {{ $endDate }}</td>
                                        <td>
                                            <div class="d-flex">
                                                {{ ucfirst($group['payroll_type']) }}
                                                @if( isset($group['is_adjusted']) && $group['is_adjusted'] ) 
                                                    <span class="badge badge-primary">Adjusted</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>{{ $group['repeat_count'] }}</td>
                                        <td>{{ \Carbon\Carbon::parse($group['start_date'])->format('M d, Y h:i A') }}</td>
                                        <td>{{ $group['end_date'] ? \Carbon\Carbon::parse($group['end_date'])->format('M d, Y h:i A') : 'N/A' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5">No payroll periods found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- New Payroll history grouping -->

            <div class="row card mb-4">
                <div class="card-body">
                <h3>Payroll Period Log</h3>
                <div id="DataTables_Table_0_wrapper">
                    <table class="data-table table" id="DataTables_Table_0">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Payroll Type</th>
                                <!-- <th scope="col">Location ID</th> -->
                                <th scope="col">Start Day</th>
                                <th scope="col">Start Date</th>
                                <th scope="col">End Date</th>
                                <th scope="col">Status</th>
                                <th scope="col">Created At</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $total = 0; @endphp
                            @if($settings)
                                @foreach($settings as $setting_period)
                                    <tr>
                                        <td>{{ $setting_period->id }}</td>
                                        <td>{{ ucwords($setting_period->payroll_type) }}</td>
                                        <!-- <td>{{ $setting_period->location_id }}</td> -->
                                        <td>{{ $setting_period->start_day ? ucwords($setting_period->start_day) : 'N/A' }}</td>
                                        <td>{{ date('M d, Y | h:i A',strtotime($setting_period->start_date)) }}</td>
                                        <td>
                                            @if($setting_period->end_date)
                                                {{ date('M d, Y | h:i A',strtotime($setting_period->end_date)) }}
                                            @else N/A @endif 
                                        </td>
                                        <td>{{ getPayrollStatus($setting_period->status) }}</td>
                                        <td>{{ date('M d, Y | h:i A',strtotime($setting_period->created_at)) }}</td>
                                        <td>
                                            <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                                                <i class="simple-icon-pencil"></i>
                                            </a>
                                            @if( '1' != $setting_period->status )
                                            <a href="{{ route('payroll.timesheets', ['account' => $account, 'id' => $setting_period->id]) }}">
                                                <i class="simple-icon-calendar"></i>
                                            </a>
                                            @endif
                                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
                                                <form class="update-form" action="{{ route('payroll-settings.update', ['account'=>$account,'payroll_setting' => $setting_period->id]) }}" method="POST">
                                                    @csrf
                                                    @method('PUT')
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel">Edit Payroll</h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">×</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <h6 class="mb-2">Payroll Period?</h6>
                                                                <div class="mb-4">
                                                                    <div class="custom-control custom-radio">
                                                                        <input type="radio" name="payroll_type" id="daily1" class="custom-control-input" value="daily" @if(isset($setting_period->payroll_type) && $setting_period->payroll_type == 'daily') checked @endif>
                                                                        <label class="custom-control-label" for="daily1"> Daily</label>
                                                                    </div>
                                                                    <div class="custom-control custom-radio">
                                                                        <input type="radio" name="payroll_type" id="weekly1" class="custom-control-input" value="weekly" @if(isset($setting_period->payroll_type) && $setting_period->payroll_type == 'weekly') checked @endif>
                                                                        <label class="custom-control-label" for="weekly1"> Weekly</label>
                                                                    </div>
                                                                    <div class="custom-control custom-radio">
                                                                        <input type="radio" name="payroll_type" id="biweekly1" class="custom-control-input" value="biweekly" @if(isset($setting_period->payroll_type) && $setting_period->payroll_type == 'biweekly') checked @endif>
                                                                        <label class="custom-control-label" for="biweekly1"> Biweekly</label>
                                                                    </div>
                                                                    <div class="custom-control custom-radio">
                                                                        <input type="radio" name="payroll_type" id="monthly1" class="custom-control-input" value="monthly" @if(isset($setting_period->payroll_type) && $setting_period->payroll_type == 'monthly') checked @endif>
                                                                        <label class="custom-control-label" for="monthly1"> Monthly</label>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="mb-3 start1" style="display: @if(isset($setting_period->payroll_type) && ( $setting_period->payroll_type == 'weekly' || $setting_period->payroll_type == 'biweekly' ) ) block @else none @endif">
                                                                    <h6 class="mb-2">Period Start From</h6>
                                                                    <select class="day_name form-control" @if(isset($setting_period->payroll_type) && ( $setting_period->payroll_type == 'weekly' || $setting_period->payroll_type == 'biweekly' ) ) name="start" @endif>
                                                                        {{-- weekDays() function is defined inside helper.php file --}}
                                                                        @foreach( weekDays() as $day ) 
                                                                            <option value="{{ $day }}" @if(isset($setting->payroll_type) && in_array($setting_period->payroll_type, ['weekly','biweekly']) && $day == $setting_period->day) selected @endif>{{ ucfirst($day) }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-primary">Update</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // datetimepicker
        $(function () {
            $.fn.datepicker.Constructor.Default = $.extend({}, $.fn.datepicker.Constructor.Default, {
                icons: {
                    time: 'simple-icon-clock',
                    date: 'simple-icon-calendar',
                    up: 'simple-icon-arrow-up',
                    down: 'simple-icon-arrow-down',
                    previous: 'simple-icon-arrow-left',
                    next: 'simple-icon-arrow-right',
                    today: 'simple-icon-calendar',
                    clear: 'simple-icon-trash',
                    close: 'simple-icon-close'
                } 
            });
        });

        $('#create-form input[name="payroll_type"]').change(function() {
            const payrollTypeValue = $(this).val();
            if( !$('#is_adjusted').is(':checked') && ( payrollTypeValue == 'weekly' || payrollTypeValue == 'biweekly' ) ) {
                $("#start").show().find("select").attr("name", "start");
            } else {
                $("#start").hide().find("select").removeAttr("name");
            }
        });

        $('.payroll-edit-button').click(function() {
            if( $('.payroll-edit').hasClass('d-none') ) {
                $('.payroll-edit').removeClass('d-none');
            } else {
                $('.payroll-edit').addClass('d-none');
            }
        });

        $('.update-form input[name="payroll_type"]').change(function() {
            const payrollTypeValue = $(this).val(),
                payrollUpdateForm = $(this).closest('form.update-form');

            if ( !$('#is_adjusted').is(':checked') && ( payrollTypeValue == 'weekly' || payrollTypeValue == 'biweekly' ) ) {
                payrollUpdateForm.find(".start1").show().find("select").attr("name", "start");
            } else {
                payrollUpdateForm.find(".start1").hide().find("select").removeAttr("name");
            }
        });

        $('.update-form').submit(function(e) {
            let form = $(this);
            
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                dataType: 'json',
                beforeSend: function() {
                    // form.parent('.modal-body').addClass('show-spinner');
                },
                success: function( response ) {
                    if( response.status ) {
                        alert( response.message )
                        location.reload();
                    } else {
                        alert( response.message )
                    }
                    console.log( response );
                },
                error: function( error ) {
                    console.log( error );
                },
                complete: function() {
                    // form.parent('.modal-body').removeClass('show-spinner');
                },
            });
            
            e.preventDefault();
            return false;
        });

        $("#is_paid, #pdf_btn").change(function() {
            if( $(this).prop('checked') ) {
                $(this).val('1');
            } else {
                $(this).val('0');
            }
        });

        $('#is_adjusted').on('change', function () {
            if ($(this).is(':checked')) {
                $(this).val('1');
                $("#date").removeClass('d-none').find("input").attr("name", "date");
                $("#start").hide().find("select").removeAttr("name");
                $('#adjustmentPreview').removeClass('d-none');
            } else {
                $(this).val('0');
                $("#date").addClass('d-none').find("input").removeAttr("name");
                $("#start").show().find("select").attr("name", "start");
                $('#adjustmentPreview').addClass('d-none');
            }
        });

        // Define overlapped dates in MM/DD/YYYY format
        const overlappedDates = {!! json_encode(date_range($setting->start_date, getEndOfWeek($setting))) !!};

        // Re-initialize #datepicker with beforeShowDay
        // $('#datepicker').datepicker('destroy').datepicker({
        //     format: 'mm/dd/yyyy',
        //     startDate: new Date(),
        //     autoclose: true,
        //     todayHighlight: true,
        //     beforeShowDay: function (date) {
        //         const d = new Date(date),
        //             month = ('0' + (d.getMonth() + 1)).slice(-2),
        //             day = ('0' + d.getDate()).slice(-2),
        //             year = d.getFullYear(),
        //             formatted = `${month}/${day}/${year}`;

        //         if (overlappedDates.includes(formatted)) {
        //             return {
        //                 classes: 'bg-warning text-dark',
        //                 tooltip: 'Overlapping date'
        //             };
        //         }
        //         return; // default
        //     }
        // });

        $('#datepicker').on('change', function () {
            const selectedDate = new Date($(this).val());
            const formatted = selectedDate.toLocaleDateString('en-US', {
                year: 'numeric', month: 'long', day: 'numeric'
            });

            $('.payroll_end_date').html(formatted);
            // alert("You selected: " + formatted);
        });
        
        if ($.fn.DataTable.isDataTable('#DataTables_Table_0')) {
            $('#DataTables_Table_0').DataTable().destroy();
        }

        $('#DataTables_Table_0').DataTable({
            order: [],
        });

        $('#DataTables_Table_1').DataTable({
            order: [],
            paging: true,
            searching: false,
            lengthChange: false, // hides entries per page
            info: false,          // hides "Showing 1 to 5 of 25 entries"
            pageLength: 5,        // default rows per page
            language: {
            paginate: {
                previous: "«",
                next: "»"
            }
            }
        });

    });
</script>

@endsection