@extends('master.app')
@section('title', 'customer')
@section('body')
    <main class="app-content">
        <section class="">
            <div class="card">
                <div class="card-header">
                    <h5>Edit</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ route('employee_overtime.update', $overtime->id) }}">
                        @method('post')
                        @csrf
                        <input type="hidden" name="salary" id="salary" value="">
                        <div class="row">
                            <div class="mb-2">
                                <select name="employee_id" id="employee_id" class="form-control" required>
                                    <option value="">Select Employee</option>
                                    @foreach ($employees as $row)
                                        <option value="{{ $row->id }}"
                                            @if ($row->id == $overtime->employee_id) {{ 'selected' }} @endif>
                                            {{ $row->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="">
                                <label for="hours" class="col-form-label">Hourse</label>
                                <input type="number" value="{{ $overtime->hourse }}" required class="form-control"
                                    id="hours" name="hours" />
                            </div>
                            <div class="">
                                <label for="amount" class="col-form-label">Amount</label>
                                <input type="number" readonly value="{{ $overtime->amount }}" class="form-control"
                                    id="amount" name="amount" />
                            </div>
                            <div class="">
                                <label for="date" class="col-form-label">Date</label>
                                @if ($bdate == 1)
                                    <input type="text" dir="rtl" name="date" autocomplete="false" value="{{ $overtime->date }}"
                                        class="form-control sample-date-picker" id="form3Examplev2" />
                                @else
                                    <input type="date" required name="date" value="{{ $overtime->date }}"
                                        class="form-control " id="form3Examplev2" />
                                @endif
                            </div>
                            <div class="col-md-2 mt-3">
                                <button type="submit" class="btn btn-primary btn-sm btn-rounded">Edit</button>

                            </div>

                        </div>
                </div>
            </div>
        </section>
    </main>

@endsection


@section('pageJs')
    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_hri").addClass("active");
        $("#hri").addClass("is-expanded");
        $("#nav_emp_overtime").addClass("active");
        $("#hours").keyup(function() {
            let hours = document.getElementById("hours").value;
            let salary = document.getElementById("salary").value;
            let salary_hours = 30 * 8;
            // alert(salary_hours);
            let hour_salary = parseFloat(salary) / parseFloat(salary_hours);
            // alert(hour_salary);
            let amount = parseFloat(hours) * parseFloat(hour_salary);
            // alert(amount);
            document.getElementById("amount").value = parseFloat(amount);
        });


        $("#hours").change(function() {
            let hours = document.getElementById("hours").value;
            let salary = document.getElementById("salary").value;
            let salary_hours = 30 * 8;
            // alert(salary_hours);
            let hour_salary = parseFloat(salary) / parseFloat(salary_hours);
            // alert(hour_salary);
            let amount = parseFloat(hours) * parseFloat(hour_salary);
            // alert(amount);
            document.getElementById("amount").value = parseFloat(amount);
        });
    </script>
@endsection