@extends('layouts.user.main')

@section('content')

<script src="{{asset('assets/js/validation/breakInterval.js?v1')}}"></script>

@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-column gap-7 gap-lg-10">
                <form class="form" method="POST" action="{{route('updateBreakInterval',$BreakInterval->id)}}" id="edit_break_interval_form">
                    @csrf
                    @method('POST')
                    <div class="card card-flush py-4">
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Edit Break Interval
                                </h2>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="d-flex flex-wrap gap-5 mb-10">
                                <div class="fv-row w-100 flex-md-root">
                                    <label class="required form-label">Break Interval Name</label>
                                    <input type="text" class="form-control form-control-solid mb-2" name="name" placeholder="Break Interval Name" value="{{$BreakInterval->name}}"/>
                                </div>
                                <div class="fv-row w-100 flex-md-root">
                                    <label class="required form-label">Date</label>
                                    <input class="form-control form-control-solid date mb-2" placeholder="Select Date" name="date" id="date" value="{{$BreakInterval->date}}"/>
                                </div>
                            </div>
                            <div class="d-flex flex-wrap gap-5 mb-10">
                                <div class="fv-row w-100 flex-md-root">
                                    <label class="required form-label">Start Time</label>
                                    <input class="form-control form-control-solid flatpickr-input active startTime" placeholder="Pick Start Time" name="startTime" id="startTime" value="{{ $BreakInterval->startTime }}" readonly="readonly"/>                                
                                </div>
                                <div class="fv-row w-100 flex-md-root">
                                    <label class="required form-label">End Time</label>
                                    <input class="form-control form-control-solid flatpickr-input active endTime" placeholder="Pick End Time" name="endTime" id="endTime" value="{{ $BreakInterval->endTime }}" readonly="readonly"/>
                                </div>
                            </div>
                            <div class="d-flex flex-wrap gap-5 mb-10">
                                <div class="fv-row w-100 flex-md-root">
                                    <label class="required form-label">Comment</label>
                                    <textarea class="form-control form-control-solid mb-2" name="comment" placeholder="Break Interval Comment">{!!  $BreakInterval->comment !!}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex">
                                <a href="{{ route('breakIntervals') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                                <button type="reset" class="btn btn-secondary me-3" id="btn-reset">Reset</button>
                                <button type="submit" class="btn btn-primary me-3">Update</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection