@extends('layouts.app')

@section('content')

<div class="page-header mb-4">
    <div>
        <h2 class="page-title">
            <i class="fas fa-money-check-alt text-primary mr-2"></i>
            Tambah Penggajian
        </h2>
        <p class="text-muted mb-0">
            Tambahkan data penggajian guru.
        </p>
    </div>

    <a href="{{ route('penggajian.index') }}" class="btn btn-light">
        <i class="fas fa-arrow-left mr-1"></i>
        Kembali
    </a>
</div>

<div class="card modern-card">

    <div class="card-header bg-white border-0">
        <h5 class="mb-0">
            <i class="fas fa-file-invoice-dollar text-success mr-2"></i>
            Form Penggajian
        </h5>
    </div>

    <div class="card-body">

        <form action="{{ route('penggajian.store') }}" method="POST">

            @csrf

            <div class="row">

                <div class="col-md-6 mb-3">

                    <label>Guru</label>

                    <select
                        name="guru_id"
                        class="form-control modern-input"
                        required>

                        <option value="">
                            -- Pilih Guru --
                        </option>

                        @foreach($guru as $g)

                        <option value="{{ $g->id }}">
                            {{ $g->nama }}
                        </option>

                        @endforeach

                    </select>

                </div>

                <div class="col-md-6 mb-3">

                    <label>Periode</label>

                    <input
                        type="month"
                        name="periode"
                        class="form-control modern-input"
                        required>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6 mb-3">

                    <label>Total Jam Mengajar</label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="fas fa-clock"></i>
                        </span>

                        <input
                            type="number"
                            name="total_jam"
                            class="form-control modern-input"
                            placeholder="Masukkan total jam"
                            required>

                    </div>

                </div>

                <div class="col-md-6 mb-3">

                    <label>Tarif Per Jam</label>

                    <div class="input-group">

                        <span class="input-group-text">
                            Rp
                        </span>

                        <input
                            type="number"
                            name="tarif"
                            class="form-control modern-input"
                            placeholder="Masukkan tarif"
                            required>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6 mb-3">

                    <label>Tunjangan / Insentif</label>

                    <div class="input-group">

                        <span class="input-group-text">
                            Rp
                        </span>

                        <input
                            type="number"
                            name="tunjangan"
                            value="0"
                            class="form-control modern-input">

                    </div>

                </div>

                <div class="col-md-6 mb-3">

                    <label>Potongan</label>

                    <div class="input-group">

                        <span class="input-group-text">
                            Rp
                        </span>

                        <input
                            type="number"
                            name="potongan"
                            value="0"
                            class="form-control modern-input">

                    </div>

                </div>

            </div>

            <div class="alert alert-info mt-3">

                <i class="fas fa-info-circle mr-2"></i>

                Pastikan seluruh data penggajian sudah sesuai sebelum disimpan.

            </div>

            <hr>

            <div class="d-flex justify-content-end">

                <a href="{{ route('penggajian.index') }}"
                   class="btn btn-light mr-2">

                    <i class="fas fa-times"></i>

                    Batal

                </a>

                <button
                    type="submit"
                    class="btn btn-primary">

                    <i class="fas fa-save"></i>

                    Simpan Penggajian

                </button>

            </div>

        </form>

    </div>

</div>

@endsection