@extends('admin.layout.master')
@section('content')
    @include('flash-message')
    <div class="card sina-card">
        <div class="card-header d-flex justify-content-between align-items-center ">
            <h5 class="font-weight-bold mb-0">{{ __('obs.create_advance') }} </h5>
            <a class="btn btn-sm btn-primary text-end"
                href="{{ route('payroll.payroll.manage_loan.bulk_advance') }}">{{ __('obs.bulk_advance') }}</a>
        </div>
        <div class="card-body">
            <form class="advance-form" id="resetForm" action="{{ route('payroll.payroll.manage_loan.advance_store') }}"
                method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <input type="hidden" name="emp_total_salary" id="emp_total_salary">
                        <input type="hidden" name="type" value="1">

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.name') }}/{{ __('obs.id') }}</label>
                            </div>
                            <div class="col-md-7">
                                <select class="form-control name_code_live_search" name="employee_id" id="employee_id">
                                    <option value="">{{ __('obs.select_one') }}</option>
                                    {{-- @foreach ($employees as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->emp_name }}
                                        </option>
                                    @endforeach --}}
                                </select>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="labels">{{ __('obs.amount') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input required name="amount" class="form-control" type="number">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="">{{ __('obs.deduct') }} {{ __('obs.month') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input name="start_month" class="form-control datepicker_month" type="text">
                            </div>
                        </div>


                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="">{{ __('obs.apply_date') }}</label>
                            </div>
                            <div class="col-md-7">
                                <input name="application_date" id="application_date" class="form-control datepicker"
                                    type="text">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="">{{ __('obs.purpose') }}</label>
                            </div>
                            <div class="col-md-7">
                                <textarea required placeholder="enter your advance reason" class="form-control" name="purpose" id=""
                                    cols="30" rows="3"></textarea>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-6">
                        <table class="table" id="resultApplist">
                            <thead>
                                <tr>
                                    <th colspan="4"><span id="emp_nam">{{ __('obs.employee') }} </span>
                                        {{ __('obs.advance_history') }}</th>
                                </tr>
                                <tr>
                                    <th scope="col">{{ __('obs.date') }}</th>
                                    <th scope="col">{{ __('obs.amount') }}</th>
                                    <th scope="col">{{ __('obs.due') }}</th>
                                    <th scope="col">{{ __('obs.status') }}</th>
                                </tr>
                            </thead>
                            <tbody id="advance_body">
                                <tr>
                                    {{-- <td colspan="4">{{__('obs.select_employee_to_see_history')}}</td> --}}
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="form-group col-12 text-center">
                        <input class="btn btn-success " type="submit" value="{{ __('obs.submit') }}">
                    </div>
                </div>

        </form>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('payroll_assets/payroll_common.js') }}"></script>
    <script>
        $("#employee_id").change(function() {
            var id = $('#employee_id option:selected').attr('value');
            var emp_nam = $('#employee_id option:selected').text();

            $.ajax({
                type: "GET",
                url: "/payroll/get-emp-advance-history/" + id,
                dataType: "json",
                beforeSend: function() {
                    $('#advance_body').html("please wait...");
                    $('#emp_nam').html(emp_nam);

                },
                success: function(response) {
                    $("#emp_total_salary").val(response.emp_info.gross_salary);
                    let adv_sett =
                        '<option selected disabled value=""> {{ __('obs.select_employee') }}</option>';
                    if (response.adv_policy.length != 0) {
                        $.each(response.adv_policy, function(ad_key, ad_value) {
                            adv_sett += '<option value="' + ad_value.id + '">' + ad_value.name +
                                '</option>';
                        });
                        $("#adv_policy").html(adv_sett);
                    }
                    if (response.adv_history.length == 0) {
                        var data = "<tr><td colspan='4' class='text-center'>No Data Found</td></tr>";
                    } else {
                        var data = "";
                        $.each(response.adv_history, function(key, value) {
                            let due = value.amount - value.total_installment_amount;
                            let approve_status = '';
                            if (value.approve_status == 2) {
                                approve_status =
                                    '<span class="badge badge-success" >{{ __('obs.active') }}</span>';
                            } else if (value.approve_status == 1) {
                                approve_status =
                                    '<span class="badge badge-warning" >{{ __('obs.pending') }}</span>';
                            } else if (value.approve_status == 3) {
                                approve_status =
                                    '<span class="badge badge-danger" >{{ __('obs.rejected') }}</span>';
                            } else if (value.approve_status == 4) {
                                approve_status =
                                    '<span class="badge badge-danger" >{{ __('obs.completed') }}</span>';
                            } else if (value.approve_status == 5) {
                                approve_status =
                                    '<span class="badge badge-secondary" >{{ __('obs.paused') }}</span>';
                            } else {
                                approve_status = 'unknown'
                            }
                            data = data + '<tr>' +
                                '<td>' + value.application_date + '</td>' +
                                '<td>' + value.amount + '</td>' +
                                '<td>' + due + '</td>' +
                                '<td> ' + approve_status + ' </td>' +
                                '</tr>';
                        })
                    }
                    $('#advance_body').html(data);
                },
            });
        });
        $('.js-example-basic-single').select2();
    </script>
@endsection