@extends('layouts.app', ['path' => 'attendance.shift'])

@section('content')
<style>
    .error{
        color: red;
    }
</style>
    <div class="content" data-color="primary">

        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Shift</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">Attendance</li>
                        <li class="breadcrumb-item active" aria-current="page">Shift</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="card">
            <div class="card-body">

                {{-- Validation Errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        @foreach ($errors->all() as $error)
                            {!! $error !!}
                        @endforeach
                    </div>
                @endif

                <form id="add-shift-form" action="{{ route('shift.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="input-block mb-3">
                                <label class="col-form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="Morning, Evening, ..." id="name" value="{{ old('name') }}">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="input-block mb-3">
                                        <label class="col-form-label">Time In <span class="text-danger">*</span></label>
                                        <div class="input-group time">
                                            <input type="time" class="form-control" id="time_in" name="start_time" value="{{ old('start_time') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="input-block mb-3">
                                        <label class="col-form-label">Time Out <span class="text-danger">*</span></label>
                                        <div class="input-group time">
                                            <input type="time" class="form-control" id="time_out" name="end_time" value="{{ old('end_time') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="section-divider">

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-check d-flex align-items-center mb-2">
                                <input type="radio" name="user_break_time_option" id="break_time_range"
                                    class="form-check-input me-2" value="break_time_range">
                                <label class="col-form-label mb-0" for="break_time_range">Use Break Time Range</label>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 break_time_range disabled">
                                    <div class="input-group time">
                                        <input type="time" class="form-control" id="break_start_time" name="break_time_range_from" value="{{ old('break_time_range_from') }}">
                                    </div>
                                </div>
                                <div class="col-sm-6 break_time_range disabled">
                                    <div class="input-group time">
                                        <input type="time" class="form-control" id="break_end_time" name="break_time_range_to" value="{{ old('break_time_range_to') }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-check d-flex align-items-center mb-2">
                                <input type="radio" name="user_break_time_option" id="break_duration"
                                    class="form-check-input me-2" value="break_duration">
                                <label class="col-form-label mb-0" for="break_duration">Use Break Duration</label>
                            </div>
                            <div class="input-group time break_duration disabled">
                                <input class="form-control" type="text" placeholder="Duration" name="break_duration"
                                    id="break_duration_input">
                                <span class="input-group-text">Minutes</span>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-sm-6">
                            <label class="col-form-label pt-0" for="late_grace">Late Arrival Grace<span class="text-danger">*</span></label>
                            <div class="input-group time mb-3">
                                <input class="form-control" type="text" id="late_grace" name="late_arrival_grace"
                                    value="{{ old('late_arrival_grace') }}">
                                <span class="input-group-text">Minutes</span>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label class="col-form-label pt-0" for="early_grace">Early Leaving Grace<span class="text-danger">*</span></label>
                            <div class="input-group time mb-3">
                                <input class="form-control" type="text" id="early_grace" name="early_leaving_grace"
                                    value="{{ old('early_leaving_grace') }}">
                                <span class="input-group-text">Minutes</span>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-sm-2">
                            <div class="input-block mb-3">
                                <label class="col-form-label">Accept Extra Hours</label>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" id="extraHoursSwitch"
                                        name="extrahours" value="1">
                                    <label class="form-check-label" for="extraHoursSwitch"></label>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-2">
                            <div class="input-block mb-3">
                                <label class="col-form-label">Publish</label>
                                <div class="form-check form-switch">
                                    <input type="checkbox" name="publish" value="1" class="form-check-input"
                                        id="publishSwitch" checked>
                                    <label class="form-check-label" for="publishSwitch"></label>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-2">
                            <div class="input-block mb-3">
                                <label class="col-form-label">Is Overnight</label>
                                <div class="form-check form-switch">
                                    <input type="checkbox" name="is_overnight" value="1" class="form-check-input"
                                        id="isOvernightSwitch">
                                    <label class="form-check-label" for="isOvernightSwitch"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer mb-3">
                        <a href="{{ route('shift.index') }}" class="btn btn-light me-2"><i class="ti ti-x me-2"></i>Cancel</a>
                        <button class="btn btn-primary submit-btn"> <i class="ti ti-check me-2"></i>Submit</button>
                    </div>
                    
                </form>

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

{{-- Disable/enable break fields dynamically --}}
@push('scripts')
    <script src="{{ asset('assets/validation/shift.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const breakRangeRadio = document.getElementById('break_time_range');
        const breakDurationRadio = document.getElementById('break_duration');
        const rangeFields = document.querySelectorAll('.break_time_range');
        const durationField = document.querySelector('.break_duration');

        function toggleFields() {
            if (breakRangeRadio.checked) {
                rangeFields.forEach(el => el.classList.remove('disabled'));
                durationField.classList.add('disabled');
            } else if (breakDurationRadio.checked) {
                rangeFields.forEach(el => el.classList.add('disabled'));
                durationField.classList.remove('disabled');
            } else {
                rangeFields.forEach(el => el.classList.add('disabled'));
                durationField.classList.add('disabled');
            }
        }

        breakRangeRadio.addEventListener('change', toggleFields);
        breakDurationRadio.addEventListener('change', toggleFields);
        toggleFields();
    });
</script>
@endpush
@endsection