@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Laporan Gaji Guru</h3>
    <p class="text-subtitle text-muted">Pilih bulan dan tahun untuk melihat laporan gaji.</p>

    <section class="section">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('laporan.gaji.filter') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-5">
                            <label for="month" class="form-label">Bulan</label>
                            <select name="month" id="month" class="form-control" required>
                                @for($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}" {{ isset($month) && $month == $i ? 'selected' : '' }}>
                                        {{ date('F', mktime(0, 0, 0, $i, 1)) }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label for="year" class="form-label">Tahun</label>
                            <select name="year" id="year" class="form-control" required>
                                @for($i = date('Y'); $i <= 2035; $i++)
                                    <option value="{{ $i }}" {{ isset($year) && $year == $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Tampilkan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if(!empty($data))
        <div class="card">
            <div class="card-body">
                <h4>Hasil Laporan: {{ date('F', mktime(0, 0, 0, $month, 1)) }} {{ $year }}</h4>
                <table class="table table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center">No</th>
                            <th>Nama Guru</th>
                            <th width="100px" class="text-center">Hadir & Terlambat</th>
                            <th width="150px" class="text-center">Upah</th>
                            <th width="150px" class="text-center">Gaji</th>
                            <th width="150px" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $totalPembayaran = 0; @endphp

                        @foreach ($data as $index => $row)
                        @php $totalPembayaran += str_replace('.', '', $row['gaji']); @endphp
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>{{ $row['nama_guru'] }}</td>
                            <td class="text-center">{{ $row['hadir'] }}</td>
                            <td>Rp {{ $row['upah'] }}</td>
                            <td>Rp {{ $row['gaji'] }}</td>
                            <td class="text-center">
                                @if($row['paid'] == 0)
                                    <button type="button" class="btn btn-sm btn-success btn-bayar"
                                        data-id="{{ $row['id_guru'] }}"
                                        data-month="{{ $month }}"
                                        data-year="{{ $year }}"
                                        data-gaji="{{ $row['gaji'] }}">
                                        Bayar
                                    </button>
                                @else
                                    <button class="btn btn-sm btn-secondary" disabled>Sudah Dibayar</button>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        <tr>
                            <th colspan="4" class="text-center">Total Pembayaran</th>
                            <th width="150px" class="text-center">Rp {{ number_format($totalPembayaran, 0, ',', '.') }}</th> 
                            <th width="150px" class="text-center"></th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on('click', '.btn-bayar', function () {
        const button = $(this);
        const id_guru = button.data('id');
        const month = button.data('month');
        const year = button.data('year');
        const gaji = button.data('gaji');

        if (confirm('Apakah Anda yakin ingin membayar gaji guru ini?')) {
            $.ajax({
                url: '{{ route("laporan.gaji.bayar") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id_guru: id_guru,
                    month: month,
                    year: year,
                    gaji: gaji,
                },
                beforeSend: function () {
                    button.prop('disabled', true).text('Memproses...');
                },
                success: function (response) {
                    if (response.success) {
                        Swal.fire({
                            position: 'top-center',
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });

                        // Reload halaman setelah 1.5 detik (setelah SweetAlert ditutup)
                        setTimeout(() => location.reload(), 1500);
                    }
                },
                error: function (xhr) {
                    Swal.fire({
                        position: 'top-center',
                        icon: 'error',
                        title: errorMsg,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    
                    button.prop('disabled', false).text('Bayar');
                }
            });
        }
    });
</script>
@endsection