@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('master/master.shift_management') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">{{ trans('master/master.home') }}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/shifts">{{ trans('master/master.shift') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($shift) && $shift->id)
                            {{ trans('master/master.edit_shift') }}
                        @else
                            {{ trans('master/master.add_new_shift') }}
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($shift, ['method' => isset($shift) && $shift->id ? 'put' : 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab"
                    id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ trans('master/master.shift_details') }}</span>
                            <span class="bs-stepper-subtitle">{{ trans('master/master.add_shift_details') }}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel"
                    aria-labelledby="personal-info-vertical-trigger" style="height: 700px">
                    <div class="content-header">
                        <h5 class="mb-0">{{ trans('master/master.shift_details') }}</h5>
                        <small class="text-muted">{{ trans('master/master.enter_shift_details') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('name') ? 'has-error' : '' }}">
                                <label class="form-label" for="name">{{ trans('master/master.name') }} <span
                                        class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('name', isset($shift) && $shift->name ? $shift->name : old('name'), [
                                    'class' => 'form-control',
                                    'id' => 'name',
                                    'placeholder' => 'Enter Shift Name',
                                ]) !!} {!! $errors->first(
                                    'name',
                                    '
                                                                                                                                                                                                                                    <label class="error" for="name">:message</label>',
                                ) !!}
                            </div>
                        </div>
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{ trans('master/master.status') }} <span
                                    class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="status" required>
                                @foreach ($shiftStatus as $val)
                                    <option value="{{ $val }}" @if ((isset($shift) && $shift->status == $val) || old('status') == $val) selected @endif>
                                        {{ ucwords($val) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('start_time') ? 'has-error' : '' }}">
                                <label class="form-label" for="start_time">{{ trans('master/master.start_time') }} <span
                                        class="mendatory-field text-danger">*</span></label>
                                {!! Form::time('start_time', isset($shift) && $shift->start_time ? $shift->start_time : old('start_time'), [
                                    'class' => 'form-control',
                                    'id' => 'start_time',
                                ]) !!}
                                {!! $errors->first('start_time', '<label class="error" for="name">:message</label>') !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('end_time') ? 'has-error' : '' }}">
                                <label class="form-label" for="end_time">{{ trans('master/master.end_time') }} <span
                                        class="mendatory-field text-danger">*</span></label>
                                {!! Form::time('end_time', isset($shift) && $shift->end_time ? $shift->end_time : old('end_time'), [
                                    'class' => 'form-control',
                                    'id' => 'end_time',
                                ]) !!}
                                {!! $errors->first('end_time', '<label class="error" for="name">:message</label>') !!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('notify_alert') ? 'has-error' : '' }}">
                                <label class="form-label" for="notify_alert">{{ trans('master/master.notify_alert') }}
                                    <span class="mendatory-field text-danger">*</span></label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                    onKeyPress="if(this.value.length==4) return false;" id="notify_alert"
                                    name="notify_alert"
                                    class="form-control {{ $errors->has('notify_alert') ? 'error' : '' }}"
                                    placeholder="Enter number of Notify Alerts"
                                    value="{{ isset($shift) && $shift->notify_alert ? $shift->notify_alert : old('notify_alert') }}" />
                                {!! $errors->first('notify_alert', '<label class="error" for="notify_alert">:message</label>') !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('missed_alert') ? 'has-error' : '' }}">
                                <label class="form-label" for="missed_alert">{{ trans('master/master.missed_alert') }}
                                    <span class="mendatory-field text-danger">*</span></label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                    onKeyPress="if(this.value.length==4) return false;" id="missed_alert"
                                    name="missed_alert"
                                    class="form-control {{ $errors->has('missed_alert') ? 'error' : '' }}"
                                    placeholder="Enter number of Missed Alerts"
                                    value="{{ isset($shift) && $shift->missed_alert ? $shift->missed_alert : old('missed_alert') }}" />
                                {!! $errors->first('missed_alert', '<label class="error" for="missed_alert">:message</label>') !!}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('in_buffer') ? 'has-error' : '' }}">
                                <label class="form-label" for="in_buffer">{{ trans('master/master.in_buffer') }}
                                    ({{ trans('master/master.in_minutes') }})</label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                    onKeyPress="if(this.value.length==4) return false;" id="in_buffer" name="in_buffer"
                                    class="form-control {{ $errors->has('in_buffer') ? 'error' : '' }}"
                                    placeholder="Enter In Buffer"
                                    value="{{ isset($shift) && $shift->in_buffer ? $shift->in_buffer : old('in_buffer') }}" />
                                {!! $errors->first('in_buffer', '<label class="error" for="in_buffer">:message</label>') !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('out_buffer') ? 'has-error' : '' }}">
                                <label class="form-label" for="out_buffer">{{ trans('master/master.out_buffer') }}
                                    ({{ trans('master/master.in_minutes') }})</label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                    onKeyPress="if(this.value.length==4) return false;" id="out_buffer" name="out_buffer"
                                    class="form-control {{ $errors->has('out_buffer') ? 'error' : '' }}"
                                    placeholder="Enter Out Buffer"
                                    value="{{ isset($shift) && $shift->out_buffer ? $shift->out_buffer : old('out_buffer') }}" />
                                {!! $errors->first('out_buffer', '<label class="error" for="out_buffer">:message</label>') !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('allowed_days') ? 'has-error' : '' }}">
                                <label class="form-label"
                                    for="allowed_days">{{ trans('master/master.allowed_days') }}</label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                    onKeyPress="if(this.value.length==4) return false;" id="allowed_days"
                                    name="allowed_days"
                                    class="form-control {{ $errors->has('allowed_days') ? 'error' : '' }}"
                                    placeholder="Enter Allowed Days"
                                    value="{{ isset($shift) && $shift->allowed_days ? $shift->allowed_days : old('allowed_days') }}" />
                                {!! $errors->first('allowed_days', '<label class="error" for="allowed_days">:message</label>') !!}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('max_buffer') ? 'has-error' : '' }}">
                                <label class="form-label" for="max_buffer">{{ trans('master/master.max_buffer') }}
                                    ({{ trans('master/master.in_minutes') }})</label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true"
                                    onKeyPress="if(this.value.length==4) return false;" name="max_buffer"
                                    class="form-control {{ $errors->has('max_buffer') ? 'error' : '' }}"
                                    placeholder="Enter Max Buffer"
                                    value="{{ isset($shift) && $shift->max_buffer ? $shift->max_buffer : old('max_buffer') }}" />
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('contiguity_buffer_frequency') ? 'has-error' : '' }}">
                                <label class="form-label" for="contiguity_buffer_frequency">
                                    {{ trans('master/master.contiguity_buffer_frequency') }}
                                    ({{ trans('master/master.in_days') }})
                                </label>
                                <input type="number" name="contiguity_buffer_frequency"
                                    class="form-control {{ $errors->has('contiguity_buffer_frequency') ? 'error' : '' }}"
                                    placeholder="Enter Contiguity Buffer Frequency"
                                    value="{{ isset($shift->contiguity_buffer_frequency) && $shift->contiguity_buffer_frequency ? $shift->contiguity_buffer_frequency : old('contiguity_buffer_frequency') }}" />
                            </div>
                        </div>

                        <div class="col-md-6 demo-inline-spacing d-flex justify-content-center align-items-center">
                            <div class="form-check form-check-secondary mt-1">
                                <input type="checkbox" class="form-check-input" id="is-night" name="is_night"
                                    value="1" @if ((isset($shift) && $shift->is_night) || old('is_night') == 1) checked @endif>
                                <label class="form-check-label fw-bolder" for="is-night">Is Night Shift</label>
                            </div>
                            <div class="form-check form-check-secondary mt-1">
                                <input type="checkbox" class="form-check-input" id="is-auto-shift" name="is_auto_shift"
                                    value="1" @if ((isset($shift) && $shift->is_auto_shift) || old('is_auto_shift') == 1) checked @endif>
                                <label class="form-check-label fw-bolder" for="is-auto-shift">Is Auto Shift</label>
                            </div>
                           
                        </div>
                    </div>
                    <div id="auto-shift-range"  class="row " style="border: 1px solid #ddd; padding: 10px 0px; border-radius: 6px; @if((isset($shift) && $shift->is_auto_shift) || old('is_auto_shift') == 1) display:block; @else display:none; @endif">
                        <div class="col-md-12"><b>{{trans('master/master.auto_shift_checkin_range')}}</b></div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('auto_shift_start_time') ? 'has-error' : '' }}}">
                                <label class="form-label" for="start_time">{{trans('master/master.start_time')}}</label>
                                {!! Form::time('auto_shift_start_time', 
                                    isset($shift) && $shift->auto_shift_start_time ? $shift->auto_shift_start_time : old('auto_shift_start_time'), 
                                    ['class' => 'form-control',
                                    'id' => 'auto_shift_start_time']) 
                                !!}
                                {!! $errors->first('auto_shift_start_time', '<label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('auto_shift_end_time') ? 'has-error' : '' }}}">
                                <label class="form-label" for="auto_shift_end_time">{{trans('master/master.end_time')}}</label>
                                {!! Form::time('auto_shift_end_time', 
                                    isset($shift) && $shift->auto_shift_end_time ? $shift->auto_shift_end_time : old('auto_shift_end_time'), 
                                    ['class' => 'form-control',
                                    'id' => 'auto_shift_end_time']) 
                                !!}
                                {!! $errors->first('auto_shift_end_time', '<label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mt-2">
                            <div class="mb-1  {{ $errors->has('breaks') ? 'has-error' : '' }}">
                                <label class="form-label" for="breaks">{{ trans('master/master.breaks') }}</label>
                                <div class="card">
                                    <!-- <div class="card-header border-bottom">
                                                                <h4 class="card-title">Employee Listing</h4>
                                                            </div> -->
                                    <div class="card-datatable">
                                        <table class="dt-column-search table table-responsive text-center"
                                            id="organization">
                                            <thead>
                                                <tr>
                                                    <th>S.no</th>
                                                    <th>Name</th>
                                                    <th>From Time</th>
                                                    <th>To Time</th>
                                                    <th>Include/Exclude (in Working Hours)</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="breaksTableBody">
                                                @php
                                                    $data =
                                                        isset($shift->breaks) && $shift->breaks ? $shift->breaks : [];
                                                    $breaks = old('breaks', $data ?? []);
                                                @endphp
                                                @if (!empty($breaks))
                                                    @foreach ($breaks as $key => $break)
                                                        <tr>
                                                            <td>{{ $key + 1 }}</td>
                                                            <td>
                                                                <input type="text"
                                                                    id="breaks.{{ $key }}.name"
                                                                    name="breaks[{{ $key }}][name]"
                                                                    class="form-control name"
                                                                    value="{{ old('breaks.' . $key . '.name', $break['name'] ?? '') }}">
                                                                @foreach ($errors->get('breaks.' . $key . '.name') as $message)
                                                                    <label class="error"
                                                                        for="breaks.{{ $key }}.name">{{ $message }}</label>
                                                                @endforeach
                                                            </td>
                                                            <td>
                                                                <input type="time"
                                                                    id="breaks.{{ $key }}.from_time"
                                                                    name="breaks[{{ $key }}][from_time]"
                                                                    class="form-control from_time"
                                                                    value="{{ old('breaks.' . $key . '.from_time', $break['from_time'] ?? '') }}">
                                                                @foreach ($errors->get('breaks.' . $key . '.from_time') as $message)
                                                                    <label class="error"
                                                                        for="breaks.{{ $key }}.from_time">{{ $message }}</label>
                                                                @endforeach
                                                            </td>
                                                            <td>
                                                                <input type="time"
                                                                    id="breaks.{{ $key }}.to_time"
                                                                    name="breaks[{{ $key }}][to_time]"
                                                                    class="form-control to_time"
                                                                    value="{{ old('breaks.' . $key . '.to_time', $break['to_time'] ?? '') }}">
                                                                @foreach ($errors->get('breaks.' . $key . '.to_time') as $message)
                                                                    <label class="error"
                                                                        for="breaks.{{ $key }}.to_time">{{ $message }}</label>
                                                                @endforeach
                                                            </td>
                                                            <td>
                                                                <label>
                                                                    <input type="radio"
                                                                        name="breaks[{{ $key }}][include]"
                                                                        value="1"
                                                                        {{ old('breaks.' . $key . '.include', $break['include']) == 1 ? 'checked' : '' }}>
                                                                        Exclude
                                                                        
                                                                </label>
                                                                <label>
                                                                    <input type="radio"
                                                                        name="breaks[{{ $key }}][include]"
                                                                        value="0"
                                                                        {{ old('breaks.' . $key . '.include', $break['include']) == 0 ? 'checked' : '' }}>
                                                                    Include
                                                                </label>
                                                            </td>
                                                            @if ($key == 0)
                                                                <td><button type="button"
                                                                        class="btn btn-success btn-sm addRow">Add</button>
                                                                    <button type="button"
                                                                        class="btn btn-danger btn-sm removeRow">Remove</button>
                                                                </td>
                                                            @else
                                                                <td><button type="button"
                                                                        class="btn btn-danger btn-sm removeRow">Remove</button>
                                                                </td>
                                                            @endif
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td>1</td>
                                                        <td>
                                                            <input type="text" name="breaks[0][name]"
                                                                class="form-control name" id="breaks.0.name"
                                                                value="{{ old('breaks.0.name') }}">
                                                            @foreach ($errors->get('breaks.0.name') as $message)
                                                                <label class="error"
                                                                    for="breaks.0.name">{{ $message }}</label>
                                                            @endforeach
                                                        </td>
                                                        <td>
                                                            <input type="time" name="breaks[0][from_time]"
                                                                class="form-control from_time" id="breaks.0.from_time"
                                                                value="{{ old('breaks.0.from_time') }}">
                                                            @foreach ($errors->get('breaks.0.from_time') as $message)
                                                                <label class="error"
                                                                    for="breaks.0.from_time">{{ $message }}</label>
                                                            @endforeach
                                                        </td>
                                                        <td>
                                                            <input type="time" name="breaks[0][to_time]"
                                                                class="form-control to_time" id="breaks.0.to_time"
                                                                value="{{ old('breaks.0.to_time') }}">
                                                            @foreach ($errors->get('breaks.0.to_time') as $message)
                                                                <label class="error"
                                                                    for="breaks.0.to_time">{{ $message }}</label>
                                                            @endforeach
                                                        </td>
                                                        <td>
                                                            <label>
                                                                <input type="radio" name="breaks[0][include]" value="1" checked>
                                                                    Exclude
                                                            </label>
                                                            <label>
                                                                <input type="radio" name="breaks[0][include]" value="0">
                                                                    Include
                                                            </label>
                                                        </td>
                                                        <td><button type="button"
                                                                class="btn btn-success btn-sm addRow">Add</button> <button
                                                                type="button"
                                                                class="btn btn-danger btn-sm removeRow">Remove</button>
                                                        </td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex flex-row-reverse content-footer">

                            <button type="submit" class="btn btn-success btn-submit user-submit"
                                id="submit-text">{{ trans('common/common.submit') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {!! Form::close() !!}
    <!-- Basic Floating Label Form section end -->

@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <!-- END: Page JS-->

    <script>
        $(document).ready(function() {
            let maxRows = 4;
            let baseHeight = 700;
            let heightIncrement = 55;

            function adjustHeight() {
                let rowCount = $("#breaksTableBody tr").length;
                let minHeight = 700;
                @if ($errors->has('breaks'))
                    let additionalHeightPerRow = 65;
                @else
                    let additionalHeightPerRow = 55;
                @endif
                console.log(additionalHeightPerRow);

                let newHeight = minHeight + rowCount * additionalHeightPerRow;
                $("#personal-info-vertical").css("height", newHeight + "px");
            }

            function updateRowIndexes() {
                $("#breaksTableBody tr").each(function(index) {
                    $(this).find("td:first").text(index + 1);

                    $(this).find("input").each(function() {
                        let nameAttr = $(this).attr("name");
                        if (nameAttr) {
                            let updatedName = nameAttr.replace(/\[.*?\]/, `[${index}]`);
                            $(this).attr("name", updatedName);
                            $(this).attr("id", updatedName.replace(/\[|\]/g, "."));
                        }
                    });

                    $(this).find("label.error").each(function() {
                        let forAttr = $(this).attr("for");
                        if (forAttr) {
                            let updatedFor = forAttr.replace(/\.\d+\./, `.${index}.`);
                            $(this).attr("for", updatedFor);
                        }
                    });
                });
            }

            $(document).on("click", ".addRow", function() {
                let rowCount = $("#breaksTableBody tr").length;

                if (rowCount > maxRows) {
                    swal("Warning!", "Maximum 4 breaks can be considered.", "warning");
                    return;
                }

                let newRow = `
                <tr>
                    <td>${rowCount + 1}</td>
                    <td>
                        <input type="text" name="breaks[${rowCount}][name]" class="form-control name" id="breaks.${rowCount}.name">
                    </td>
                    <td>
                        <input type="time" name="breaks[${rowCount}][from_time]" class="form-control from_time" id="breaks.${rowCount}.from_time">
                    </td>
                    <td>
                        <input type="time" name="breaks[${rowCount}][to_time]" class="form-control to_time" id="breaks.${rowCount}.to_time">
                    </td>
                    <td>
                        <label>
                            <input type="radio" name="breaks[${rowCount}][include]" value="1" checked>
                            Exclude
                        </label>
                        <label>
                            <input type="radio" name="breaks[${rowCount}][include]" value="0">
                            Include
                        </label>
                    </td>
                    <td><button type="button" class="btn btn-danger btn-sm removeRow">Remove</button></td>
                </tr>`;

                $("#breaksTableBody").append(newRow);
                adjustHeight();
            });

            $(document).on("click", ".removeRow", function() {
                $(this).closest("tr").remove();
                updateRowIndexes();
                adjustHeight();
            });

            adjustHeight();
        });

</script>
<script>
    $(document).ready(function(){
        $("#is-auto-shift").change(function(){
            $("#auto-shift-range").toggle(this.checked);
        });
    });
    
</script>
@endpush