@extends('layouts.appv2')

@section('content')

    @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

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

    <form action="{{ route('admins.updateeditleavestaff', $employee->employee_id) }}" id="updateleaves" method="post" enctype="multipart/form-data">
    @csrf
        <div id="leaveApp" 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>
                                <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">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Employee Name</label>
                            <div class="col-sm-4">
                                <span class="form-control-plaintext font-weight-bold">{{ $employee->employee_first_name }}</span>
                            </div>
                        </div>

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

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

                        {{-- Leave Entitlement Fields --}}
                        <div class="row">
                            <div class="col-md-6 mb-3" v-for="(label, key) in fields" :key="key">
                                <label :for="key + '_entitled'">@{{ label }}</label>
                                <input
                                    type="number"
                                    class="form-control form-control-sm font-weight-bold"
                                    :id="key + '_entitled'"
                                    :name="'new_' + key"
                                    v-model.number="leaves[key]"
                                    step="0.5"
                                    min="0"
                                    required
                                >
                            </div>
                        </div>

                        {{-- Total AL Entitled --}}
                        <div class="form-row mt-3">
                            <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="totalAL" disabled>
                                <input type="hidden" name="total_al_entitled" id="total_al_entitled_hidden" :value="totalAL">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {{-- Vue.js via CDN --}}
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    // Entitlement fields mapped dynamically
                    fields: {
                        al: "AL Entitled",
                        el: "EL Entitled",
                        ml: "ML Entitled",
                        hl: "HL Entitled",
                        cl: "CL Entitled",
                        rl: "RL Entitled",
                        mtl: "MTL Entitled",
                        ptl: "PTL Entitled",
                        cml: "CML Entitled",
                        mgl: "MGL Entitled",
                        pi: "PI Entitled",
                        ts: "TS Entitled", 
                        cf: "Carry Forward", 
                        bl: "Bank Leaves", 
                        balance_last_year: "Balance Last Year",
                    },
                    // Initialize values from backend
                    leaves: {
                        al: parseFloat('{{ $leaveEntitled->AL ?? 0 }}'),
                        el: parseFloat('{{ $leaveEntitled->EL ?? 0 }}'),
                        ml: parseFloat('{{ $leaveEntitled->ML ?? 0 }}'),
                        hl: parseFloat('{{ $leaveEntitled->HOSP ?? 0 }}'),
                        cl: parseFloat('{{ $leaveEntitled->CL ?? 0 }}'),
                        rl: parseFloat('{{ $leaveEntitled->RL ?? 0 }}'),
                        mtl: parseFloat('{{ $leaveEntitled->MTL ?? 0 }}'),
                        ptl: parseFloat('{{ $leaveEntitled->PTL ?? 0 }}'),
                        cml: parseFloat('{{ $leaveEntitled->CML ?? 0 }}'),
                        mgl: parseFloat('{{ $leaveEntitled->MGL ?? 0 }}'),
                        pi: parseFloat('{{ $leaveEntitled->PI ?? 0 }}'),
                        ts: parseFloat('{{ $leaveEntitled->TS ?? 0 }}'),
                        cf: parseFloat('{{ $leaveEntitled->carry_forward ?? 0 }}'),
                        bl: parseFloat('{{ $leaveEntitled->bank_leave ?? 0 }}'),
                        balance_last_year: parseFloat('{{ $leaveEntitled->balance_last_year ?? 0 }}'),
                    }
                }
            },
            computed: {
                // Total AL = capped balance + AL + RL
                totalAL() {
                    const balance = Math.min(this.leaves.balance_last_year || 0, 5);
                    return (balance + (this.leaves.al || 0) + (this.leaves.rl || 0)).toFixed(1);
                }
            },
            watch: {
                // Auto validate on input
                leaves: {
                    handler(newLeaves) {
                        for (const key in newLeaves) {
                            if (newLeaves[key] !== '' && newLeaves[key] % 0.5 !== 0) {
                                alert(`Sila masukkan nombor yang berakhir dengan .0 atau .5 sahaja untuk ${this.fields[key]}!`);
                                this.leaves[key] = '';
                            }
                        }
                    },
                    deep: true
                }
            }
        }).mount('#leaveApp');
    </script>
@endsection