@extends('layouts.master')
@section('title', 'User')
@push('css')

@endpush

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <form method="POST" action="{{ route('user.salaryPayment.add') }}">
                @csrf
                <div class="form-horizontal">
                    <div class="col-sm-6">

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Employee</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..."  name="emp_id" class="chosen-select" id="emp_id" tabindex="2">
                                    <option value="" selected disabled>Select Employee</option>

                                @foreach($employees as $employee)
                                        <option value="{{$employee->id}}">{{$employee->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Salary</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" name="salary" id="salary"  value=""
                                       class="form-control" readonly>
                            </div>
                        </div>

                        <input type="hidden" name="name" id="name" >


                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Month </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="month" class="chosen-select" id="month" tabindex="2">
                                    @foreach($months as $month)
                                        <option value="{{$month->name}}">{{$month->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Payable Amount</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" name="payable_amount" id="payable_amount" value=""
                                       class="form-control" readonly>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Date</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="date" name="date" id="txtFirstName" placeholder="" value="2025-12-09"
                                       class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName">Payment Amount</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" name="payment_amount" id="txtFirstName" placeholder="Payment Amount" value=""
                                       class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Deduction Amount</label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" name="deducted_amount" id="txtFirstName" placeholder="Deduction Amount" value=""
                                       class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for=""> </label>
                            <label class="col-sm-1 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                                        class="btn btn-sm btn-success pull-left">
                                    Save
                                    <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>

            </form>
        </div>
        </div>
        <div class="">
            <h3 class="panel-title">Depertment Information</h3>
        </div>
        <div class="col-xl-12">

            <div class="panel">

                <div class="panel-body">
                    <table id="demo-dt-basic" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Employee ID </th>
                            <th class="min-tablet">Employee Name</th>
                            <th class="min-tablet">Month</th>
                            <th class="min-tablet">Payment Amount</th>
                            <th class="min-tablet">Deducted Amount</th>
                            <th class="min-tablet">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($salaryPayments as $salaryPayment)
                            <tr>

                                <td>{{ $salaryPayment->date }}</td>
                                <td>{{ $salaryPayment->emp_id  }}</td>
                                <td>{{ $salaryPayment->name }}</td>
                                <td>{{ $salaryPayment->month }}</td>
                                <td>{{ $salaryPayment->payment_amount }}</td>
                                <td>{{ $salaryPayment->deducted_amount }}</td>
                                <td>
                                    <a style="font-size: 7px" href="{{route('user.month.edit', $salaryPayment->id )}}" class="btn btn-mint btn-icon" ><i class="demo-psi-pen-5 icon-lg"></i></a>
                                    <a style="font-size: 7px" onclick="return confirm('Are you sure?')" href="{{route('user.month.delete', $salaryPayment->id )}}" class="btn btn-success btn-icon" ><i class="demo-psi-recycling icon-lg"></i></a>


                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#example').DataTable( {
                lengthChange: false,
                buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
            } );

            table.buttons().container()
                .appendTo( '#example_wrapper .col-md-6:eq(0)' );
        } );
    </script>

    <script>
        $("#emp_id").change(function () {
            var emp_id = this.value;
            var month = $('#month').val();
            var ttt= 'select month';
            $.ajax({
                url: '/HRPayroll/employee-info/' + emp_id + '/'+ month,
                type: 'GET',
                success:(function(response) {
                    console.log(response);
                    $('#salary').val(response[0].salary_range);
                    $('#name').val(response[0].name);
                    if(response[1].length > 0){
                        var payableAmount = parseFloat($('#salary').val()) - parseFloat(response[1][0].payment_amount);
                        $('#payable_amount').val(payableAmount);
                    }else {
                        console.log('empty');
                        $('#payable_amount').val($('#salary').val());
                    }

                })
            })
        });
    </script>
    <script>
        $("#month").change(function () {
            var month = this.value;
            var emp_id = $('#emp_id').val();

            $.ajax({
                url: '/HRPayroll/salary-payment/' + emp_id + '/' + month,
                type: 'GET',
                success:(function(response) {
                    console.log(response);
                    if(response[1].length > 0){
                        console.log($('#salary').val());
                        console.log(response[1][0].payment_amount);

                        var payableAmount = parseFloat($('#salary').val()) - parseFloat(response[1][0].payment_amount);
                        $('#payable_amount').val(payableAmount);
                    }else {
                        console.log('empty');
                        $('#payable_amount').val($('#salary').val());
                    }

                })
            })
        });
    </script>

@endpush