@extends('layouts.app_hr')

@section('title', __('hr.add_shift'))

@section('content')
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{ __('home.home') }}</a>
                </li> <li class="breadcrumb-item">
                    <a href="#">{{ __('hr.attendance') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ __('hr.add_shift') }}</li>
            </ol>
        </nav>

    <section class="content">
        <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
            <div class="card-body">
                {!! Form::open(['url' => action([\App\Http\Controllers\Hr\ShiftController::class, 'store']), 'method' => 'post', 'id' => 'add_shift_form']) !!}
                <div class="row mb-3">
                    <!-- اسم الشيفت -->
                    <div class="col-6">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="shift_name" name="shift_name" class="form-control" required>
                            <label for="shift_name">{{ __('hr.shift_name') }}</label>
                        </div>
                    </div>
                    <!-- الحالة -->
                    <div class="col-6">
                        <div class="form-floating form-floating-outline">
                            <select id="is_active" name="is_active" class="form-select">
                                <option value="1">{{ __('lang_v1.active') }}</option>
                                <option value="0">{{ __('lang_v1.inactive') }}</option>
                            </select>
                            <label for="is_active">{{ __('hr.status') }}</label>
                        </div>
                    </div>
                </div>

                <!-- جدول الأوقات الأسبوعية -->
                <div class="row">
                    <div class="col-12">
                        <div class="divider">
                            <div class="divider-text">{{ __('hr.weekly_schedule') }}</div>

                        </div>
                        <div class="row">
                            @foreach(['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as $day)
                                <div class="col-6 mb-3">
                                    <div class="card p-3">
                                        <h6>{{ __('hr.' . $day) }}</h6>
                                        <div class="row">
                                            <div class="col">
                                                <label for="schedule[{{ $day }}][start_time]">{{ __('hr.start_time') }}</label>
                                                <input type="time" name="schedule[{{ $day }}][start_time]" class="form-control timepicker">
                                            </div>
                                            <div class="col">
                                                <label for="schedule[{{ $day }}][end_time]">{{ __('hr.end_time') }}</label>
                                                <input type="time" name="schedule[{{ $day }}][end_time]" class="form-control timepicker">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">{{ __('messages.save') }}</button>
                <a href="{{ route('shifts.index') }}" class="btn btn-secondary">{{ __('messages.cancel') }}</a>
                {!! Form::close() !!}
            </div>
        </div>
    </section>
@endsection
@section('javascript')

            <script>
                flatpickr(".timepicker", {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: "H:i", // صيغة 24 ساعة
                    time_24hr: true     // استخدام صيغة 24 ساعة
                });
                $(document).ready(function () {
                    function displayValidationErrors(errors) {
                        if (errors) {
                            $.each(errors, function (key, messages) {
                                messages.forEach(function (msg) {
                                    toastr.error(msg); // عرض الخطأ في Toastr
                                });
                            });
                        }
                    };
                });

            </script>

@stop