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

@section('content')
<style>
    .error {
        color: red;
    }
    .disabled {
        pointer-events: none;
        opacity: 0.6;
    }
</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">Edit 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">Edit Shift</li>
                </ol>
            </nav>
        </div>
    </div>

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

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

            <form id="edit-shift-form" action="{{ route('shift.update', $shift['id'] ?? $shift['id']) }}" method="POST">
                @csrf
                @method('PUT')

                {{-- Name + Time --}}
                <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', $shift['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', $shift['start_time'] ?? '') }}"> --}}
                                        <input 
                                            type="time" 
                                            class="form-control" 
                                            id="time_in" 
                                            name="start_time"
                                            value="{{ old('start_time', isset($shift['start_time']) ? \Carbon\Carbon::parse($shift['start_time'])->format('H:i') : '') }}">

                                    </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', $shift['end_time'] ?? '') }}"> --}}
                                        <input 
                                            type="time" 
                                            class="form-control" 
                                            id="time_out" 
                                            name="end_time"
                                            value="{{ old('end_time', isset($shift['end_time']) ? \Carbon\Carbon::parse($shift['end_time'])->format('H:i') : '') }}">

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

                <hr class="section-divider">

                {{-- Break Option --}}
                <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"
                                {{ old('user_break_time_option', $shift['user_break_time_option'] ?? '') == 'break_time_range' ? 'checked' : '' }}>
                            <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 {{ old('user_break_time_option', $shift['user_break_time_option'] ?? '') != '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', $shift['break_time_range_from'] ?? '') }}"> --}}
                                    <input 
                                        type="time" 
                                        class="form-control" 
                                        id="break_start_time" 
                                        name="break_time_range_from"
                                        value="{{ old('break_time_range_from', isset($shift['break_time_range_from']) ? \Carbon\Carbon::parse($shift['break_time_range_from'])->format('H:i') : '') }}">


                                </div>
                            </div>
                            <div
                                class="col-sm-6 break_time_range {{ old('user_break_time_option', $shift['user_break_time_option'] ?? '') != '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', $shift['break_time_range_to'] ?? '') }}"> --}}
                                    <input 
                                        type="time" 
                                        class="form-control" 
                                        id="break_end_time"
                                        name="break_time_range_to"
                                        value="{{ old('break_time_range_to', isset($shift['break_time_range_to']) ? \Carbon\Carbon::parse($shift['break_time_range_to'])->format('H:i') : '') }}">
                                </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"
                                {{ old('user_break_time_option', $shift['user_break_time_option'] ?? '') == 'break_duration' ? 'checked' : '' }}>
                            <label class="col-form-label mb-0" for="break_duration">Use Break Duration</label>
                        </div>
                        <div
                            class="input-group time break_duration {{ old('user_break_time_option', $shift['user_break_time_option'] ?? '') != 'break_duration' ? 'disabled' : '' }}">
                            <input class="form-control" type="text" placeholder="Duration" name="break_duration"
                                id="break_duration_input"
                                value="{{ old('break_duration', $shift['break_duration'] ?? '') }}">
                            <span class="input-group-text">Minutes</span>
                        </div>
                    </div>
                </div>

                <hr>

                {{-- Grace Periods --}}
                <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', $shift['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', $shift['early_leaving_grace'] ?? '') }}">
                            <span class="input-group-text">Minutes</span>
                        </div>
                    </div>
                </div>

                <hr>

                {{-- Switches --}}
                <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" 
                                    {{ old('extrahours', $shift['extrahours'] ?? false) ? 'checked' : '' }}>
                                <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"  class="form-check-input"
                                    id="publishSwitch"
                                    {{ old('publish', $shift['publish'] ? true : false) ? '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"  class="form-check-input"
                                    id="isOvernightSwitch"
                                    {{ old('is_overnight', $shift['is_overnight'] ?? false) ? 'checked' : '' }}>
                                <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>Update
                    </button>
                </div>

            </form>

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

@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