@extends('admin.layout.master')
@section('content')

<div class="content-wrapper">
    <div class="content">
        <div class="card card-default">
            <div class="card-header">
                <h2> Update Time Period </h2>
            </div>
        </div>
        <div class="card card-default">
            <div class="card-body">
                <form action="{{ route('time_period.update', $timePeriod->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="role_name">Time Period</label>
                                <!-- <input type="text" class="form-control" name="time_period" placeholder="Enter Time Period" value="{{ old('time_period', $timePeriod->time_period) }}" required> -->
                                <input type="number" class="form-control" name="time_period" placeholder="Enter Time Period" value="{{ old('time_period', $timePeriod->time_period) }}" required min="1" max="24" onkeyup="validateTimePeriod(this)">
                                <span id="timeperiodError" class="text-danger"></span>
                            </div>
                        </div>
                        @if ($errors->has('time_period'))
                        <span class="text-danger">{{ $errors->first('time_period') }}</span>
                        @endif
                    </div>

                    <div class="form-footer pt-5">
                        <button type="submit" class="btn btn-primary btn-pill">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
<script>
    function validateTimePeriod(input) {
        let errorSpan = document.getElementById("timeperiodError");
        errorSpan.textContent = "";

        if (input.value.includes('.') || input.value.includes(',')) {
            errorSpan.textContent = "Time Period must be a whole number (1-24 hours)!";
            input.value = Math.floor(input.value);
        }

        if (input.value > 24) {
            errorSpan.textContent = "Time Period cannot be greater than 24 hours!";
            input.value = 24;
        } else if (input.value < 1) {
            errorSpan.textContent = "Time Period must be at least 1 hour!";
            input.value = '';
        }
    }
</script>