@extends('layouts.appv2')

@section('content')

    {{-- Flash Messages --}}
    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

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

    {{-- Form Start --}}
    <form action="{{ route('admins.updateeditleavestaff', $employee->employee_id) }}" id="updateleaves" method="post" enctype="multipart/form-data">
        @csrf

        <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
            <div class="card-header">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-2">
                    <h5>Edit Staff Leaves Record</h5>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-primary" name="update" data-toggle="modal" data-target="#UpdateModal">
                                <i class="fas fa-save"></i> Update
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="UpdateModal" tabindex="-1" role="dialog" aria-labelledby="UpdateModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="UpdateModalLabel">Update Entitled Leaves</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label for="changetitle" class="col-form-label">Change Title:</label>
                                                <input type="text" class="form-control" id="changetitle" name="change_title">
                                            </div>

                                            <div class="form-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="customFile" name="attachment">
                                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label for="updateremark" class="col-form-label">Remark:</label>
                                                <textarea class="form-control" id="updateremark" name="remark"></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary" name="updateleaves">Update</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="btn-group mr-2">
                            <a class="btn btn-sm btn-outline-info btn-back" href="{{ route('admins.showleaveupdatehistory', $employee->employee_id) }}">
                                View All Update
                            </a>
                            <a class="btn btn-sm btn-outline-secondary btn-back" href="{{ route('admins.leavestaff') }}">
                                <i class="far fa-arrow-alt-circle-left"></i> Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="mb-3">
                    {{-- Employee Info --}}
                    <div class="form-group row">
                        <label for="employee_first_name" class="col-sm-2 col-form-label">Employee Name</label>
                        <div class="col-sm-4">
                            <a class="form-control-plaintext font-weight-bold">{{ $employee->employee_first_name }}</a>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Employee Type</label>
                        <div class="col-sm-4">
                            <a class="form-control-plaintext font-weight-bold">{{ $employee->emptype->emptype_name ?? 'N/A' }}</a>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Last Modified Date</label>
                        <div class="col-sm-4">
                            <a class="form-control-plaintext font-weight-bold">
                                {{ $leaveEntitled && $leaveEntitled->modified_date 
                                    ? \Carbon\Carbon::parse($leaveEntitled->modified_date)->format('d M Y') 
                                    : 'N/A' }}
                            </a>
                        </div>
                    </div>

                    {{-- Entitled Leaves --}}
                    <div class="form-row mt-4">
                        <div class="form-group col-sm-6">
                            <label for="al_entitled">AL Entitled</label>
                            <input type="number" class="form-control form-control-sm font-weight-bold" id="al_entitled"
                                name="new_al" value="{{ $leaveEntitled->AL ?? 0 }}"
                                step="0.5" min="0" pattern="[0-9]+(\.[05])?" required>
                            <input type="hidden" name="old_al" value="{{ $leaveEntitled->AL ?? 0 }}">
                        </div>

                        <div class="form-group col-sm-6">
                            <label for="el_entitled">EL Entitled</label>
                            <input type="number" class="form-control form-control-sm font-weight-bold" id="el_entitled"
                                name="new_el" value="{{ $leaveEntitled->EL ?? 0 }}"
                                step="0.5" min="0" pattern="[0-9]+(\.[05])?" required>
                            <input type="hidden" name="old_el" value="{{ $leaveEntitled->EL ?? 0 }}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="ml_entitled">ML Entitled</label>
                            <input type="number" class="form-control form-control-sm font-weight-bold" id="ml_entitled"
                                name="new_ml" value="{{ $leaveEntitled->ML ?? 0 }}"
                                step="0.5" min="0" pattern="[0-9]+(\.[05])?" required>
                            <input type="hidden" name="old_ml" value="{{ $leaveEntitled->ML ?? 0 }}">
                        </div>

                        <div class="form-group col-sm-6">
                            <label for="rl_entitled">RL Entitled</label>
                            <input type="number" class="form-control form-control-sm font-weight-bold" id="rl_entitled"
                                name="new_rl" value="{{ $leaveEntitled->RL ?? 0 }}"
                                step="0.5" min="0" pattern="[0-9]+(\.[05])?" required>
                            <input type="hidden" name="old_rl" value="{{ $leaveEntitled->RL ?? 0 }}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="hl_entitled">HL Entitled</label>
                            <input type="number" class="form-control form-control-sm font-weight-bold" id="hl_entitled"
                                name="new_hl" value="{{ $leaveEntitled->HOSP ?? 0 }}"
                                step="0.5" min="0" pattern="[0-9]+(\.[05])?" required>
                            <input type="hidden" name="old_hl" value="{{ $leaveEntitled->HOSP ?? 0 }}">
                        </div>

                        <div class="form-group col-sm-6">
                            <label for="balance_last_year">Balance Last Year</label>
                            <input type="number" class="form-control form-control-sm font-weight-bold" id="balance_last_year"
                                name="new_balance_last_year" value="{{ $leaveEntitled->balance_last_year ?? 0 }}"
                                step="0.5" min="0" pattern="[0-9]+(\.[05])?" required>
                            <input type="hidden" name="old_balance_last_year" value="{{ $leaveEntitled->balance_last_year ?? 0 }}">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-sm-6">
                            <label for="total_al_entitled">Total AL Entitled</label>
                            <input type="text" class="form-control form-control-sm font-weight-bold" id="total_al_entitled"
                                value="{{ ($leaveEntitled->carry_forward ?? 0) + ($leaveEntitled->AL ?? 0) }}" disabled>
                            <input type="hidden" name="total_al_entitled" value="{{ ($leaveEntitled->carry_forward ?? 0) + ($leaveEntitled->AL ?? 0) }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {{-- Script for number input validation --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('input[type="number"]').forEach(input => {
                input.addEventListener("input", function () {
                    let value = parseFloat(this.value);
                    if (value % 0.5 !== 0) {
                        alert("Sila masukkan nombor yang berakhir dengan .0 atau .5 sahaja!");
                        this.value = "";
                    }
                });
            });
        });
    </script>

@endsection