@extends('layouts.app')

@section('content')
<style>
    .report-table {
        font-size:11px;
    }
</style>
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Data Report Payroll</h3>
                
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Report Payroll</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section" x-data="main" @reload-table.window="table.draw()">
		<div class="card">
            <div class="card-header">
                Data Report Payroll
                 
                <div class="clearfix"></div>
            </div>
            <div class="card-body">
                <form id="form-search">
                    <div class="form-group row">
                        <div class="col-md-3">
                            <label>Bulan</label>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" name="bulan">
                                @foreach(getAllMonths() as $k=>$v)
                                <option value="{{ $k }}" @if(request()->bulan == $k) selected @endif>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <label>Tahun</label>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" name="tahun">
                                @for($year=date('Y');$year >= date('Y',strtotime('-2 years'));$year--)
                                <option>{{ $year }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                        
                        <div class="form-group row">
                            <label class="col-md-3">Manager Area</label>
                            <div class="col-md-4">
                                <select class="form-select" name="area" id="area-id" onchange="onAreaChange(this.value)" required>
                                    <option value="">-- All Manager Area --</option>
                                    @foreach(listArea() as $row)
                                    <option value="{{ $row->id }}" @if(request()->area == $row->id) selected @endif>{{ $row->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3">Cabang</label>
                            <div class="col-md-4">
                                <select class="form-select" name="lokasi" id="lokasi">
                                    <option value="">-- All Cabang --</option>
                                   
                                </select>
                            </div>
                        </div>
                    </div>
                </form>	
            </div>
            <div class="card-footer">
                <button class="btn btn-success" onclick="prosess()"><i class="fa fa-file"></i> LIHAT</button>
            </div>
        </div>

        @if(request()->has('tahun'))
        <div class="card">
            <div class="card-header">
                Data Payroll Percabang
                <button class="btn btn-success float-end" onclick="prosesReportPayroll()"><i class="fa fa-download"></i> DOWNLOAD</button>
                <div class="clearfix"></div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            @include('pages.exports.payroll-cabang')
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
        @endif

    </section>
@endsection

@push('scripts')
<script>
    @if(request()->has('area'))
        onAreaChange('{{ request()->area }}')
    @endif
    function onAreaChange(value) {
        $.get("{{ url('payroll/list-lokasi') }}",{area_id:value}).done(resp => {
            $('#lokasi').empty();
            if(resp.length > 0) {
                $('#lokasi').append(`<option value="">-- All Cabang --</option>`)
                
                resp.forEach(row => {
                    let selected = ""
                    if( '{{ request()->lokasi }}' == row.id) {
                        selected = 'selected';
                    }
                    $('#lokasi').append(`<option value="${row.id}" ${selected}>${row.nama}</option>`);
                })
            }
        })
    }
    
    function filterCheck()
    {
        if ($('#area-id').val() == '') {
            alert("Area Belum dipilih");
            return false;
        }

        if ($('#lokasi').val() == '') {
            alert("Cabang Belum dipilih");
            return false;
        }

        return true;
    }

    function prosess()
    {
        if(!filterCheck()) {
            return;
        }
        $('#form-search').submit()
    }

    function prosesReportPayroll()
    {
       if(!filterCheck()) {
            return;
        }

        window.open(`{{ url('report/payroll-report-cabang') }}?${$('#form-search').serialize()}`);
    }    
</script>
@endpush