@extends('layouts/layoutMaster')

@section('title', 'Edit Payroll - HRD')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
@endsection

@section('page-script')
    @vite(['Modules/Hrd/resources/assets/js/payroll/edit-payroll.js'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'])
@endsection

@section('content')
    <form class="pt-0" method="POST" action="{{ route('payroll.update', $payroll->id) }}">
        @csrf
        @method('PUT')
        <div
            class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
            <div class="d-flex flex-column justify-content-center">
                <h4 class="mb-1">Edit Payroll</h4>
            </div>
            <div class="d-flex align-content-center flex-wrap gap-4">
                <button type="button" class="btn btn-outline-secondary" onclick="history.back()">Batalkan</button>
                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card mb-6">
                    <div class="card-body">
                        <div class="form-floating form-floating-outline mb-5">
                            <select id="employee_id" name="employee_id" class="select2 form-select-lg" required>
                                @foreach ($employees as $employee)
                                    <option value="{{ $employee->id }}"
                                        {{ $payroll->employee_id == $employee->id ? 'selected' : '' }}>
                                        {{ $employee->user->name }}
                                    </option>
                                @endforeach
                            </select>
                            <label for="employee_id">Pegawai</label>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="number" class="form-control" id="basic_salary" placeholder="1000000"
                                name="basic_salary" aria-label="1000000" required min="0"
                                value="{{ $payroll->basic_salary }}" />
                            <label for="basic_salary">Gaji Pokok</label>
                        </div>

                        <div class="card mb-5">
                            <div class="card-body">
                                <h6>Bonus</h6>
                                <div id="bonus-fields">
                                    @foreach ($payroll->bonuses as $bonus)
                                        <div class="row mb-3 bonus-group-{{ $bonus->id }}">
                                            <div class="col-md-5">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="text" class="form-control"
                                                        id="bonus_name_{{ $bonus->id }}"
                                                        name="bonuses[{{ $bonus->id }}][name]" placeholder="Nama Bonus"
                                                        required value="{{ $bonus->name }}">
                                                    <label for="bonus_name_{{ $bonus->id }}">Nama Bonus</label>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="number" class="form-control bonus-amount"
                                                        id="bonus_amount_{{ $bonus->id }}"
                                                        name="bonuses[{{ $bonus->id }}][amount]"
                                                        placeholder="Jumlah Bonus" required min="0"
                                                        value="{{ $bonus->amount }}">
                                                    <label for="bonus_amount_{{ $bonus->id }}">Jumlah Bonus</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-bonus-field"
                                                    data-bonus-id="{{ $bonus->id }}">Hapus</button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="add-bonus-field">Tambah
                                    Bonus</button>
                            </div>
                        </div>

                        <div class="card mb-5">
                            <div class="card-body">
                                <h6>Pengurangan</h6>
                                <div id="deduction-fields">
                                    @foreach ($payroll->deductions as $deduction)
                                        <div class="row mb-3 deduction-group-{{ $deduction->id }}">
                                            <div class="col-md-5">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="text" class="form-control"
                                                        id="deduction_name_{{ $deduction->id }}"
                                                        name="deductions[{{ $deduction->id }}][name]"
                                                        placeholder="Nama Pengurangan" required
                                                        value="{{ $deduction->name }}">
                                                    <label for="deduction_name_{{ $deduction->id }}">Nama
                                                        Pengurangan</label>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="number" class="form-control deduction-amount"
                                                        id="deduction_amount_{{ $deduction->id }}"
                                                        name="deductions[{{ $deduction->id }}][amount]"
                                                        placeholder="Jumlah Pengurangan" required min="0"
                                                        value="{{ $deduction->amount }}">
                                                    <label for="deduction_amount_{{ $deduction->id }}">Jumlah
                                                        Pengurangan</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-deduction-field"
                                                    data-deduction-id="{{ $deduction->id }}">Hapus</button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary"
                                    id="add-deduction-field">Tambah Pengurangan</button>
                            </div>
                        </div>

                        <div class="form-floating form-floating-outline mb-5">
                            <input type="date" class="form-control" id="pay_date" placeholder="1000000" name="pay_date"
                                aria-label="1000000" required value="{{ $payroll->pay_date }}" />
                            <label for="pay_date">Tanggal Pembayaran</label>
                        </div>

                        <div class="form-floating form-floating-outline">
                            <input type="number" class="form-control" id="total_salary" placeholder="1000000"
                                name="total_salary" aria-label="1000000" required aria-readonly="true" readonly
                                value="{{ $payroll->total_salary }}" />
                            <label for="total_salary">Total Gaji</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection