@extends('admin.layout.master')
@section('home')
    <div class="col-12">
        @if (session('success'))
            <div class="alert alert-success" id="hide-alert">
                {{ session('success') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger" id="hide-alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="font-weight-bold mb-0">Late Edit</h5>
            </div>
            <div>
                <a href="{{ route('late.list') }}" class="btn btn-sm btn-primary">Late list</a>
            </div>
        </div>
        <div class="card-body">
            <div class="d-flex flex-wrap">
                <form class="leave-form col-12" action="{{ route('late.update') }}" method="post">
                    @csrf
                    <div class="d-flex flex-wrap">
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Employee Name</label>
                            <input readonly type="text" class="form-control" value="{{ $late->empinfo->emp_name }}">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Employee Dept.</label>
                            <input readonly type="text" class="form-control"
                                value="{{ $late->empinfo->fetch_department->name }}">
                        </div>

                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Policy type</label>
                            <select class="form-control" name="policy_type">
                                <option selected disabled value="">Select Type</option>
                                @foreach ($policies as $p)
                                    <option {{ $late->policy_type == $p->id ? 'selected' : '' }}
                                        value="{{ $p->id }}">{{ $p->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-12 col-md-6">
                            <label for="">Date</label>
                            <input required value="{{ $late->date }}" name="date" class="form-control" type="date">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="">In Time</label>
                            <input required value="{{ $late->expected_in_time }}" name="expected_in_time"
                                class="form-control" type="time">
                        </div>


                        <div class="form-group col-12">
                            <label for="exampleInputEmail1">Purpose</label>
                            <textarea required placeholder="enter your loan reason" class="form-control" name="purpose"
                                id="" cols="30" rows="3">{{ $late->purpose }}</textarea>
                        </div>

                        <input type="hidden" name="id" value="{{ $late->id }}">
                        <div class="form-group col-12">
                            <input class="btn btn-success px-4" type="submit" value="Update">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        $("#emp_select").change(function() {
            var id = $('#emp_select option:selected').attr('value');
            var emp_nam = $('#emp_select option:selected').text();
            $.ajax({
                type: "GET",
                url: "/get-emp-late-history/" + id,
                dataType: "json",
                beforeSend: function() {
                    $('#loan_body').html("please wait...");
                    $('#emp_nam').html(emp_nam);

                },
                success: function(response) {
                    if (response.length == 0) {
                        var data = "<tr><td colspan='3'>employee has no history</td></tr>";
                    } else {
                        var data = "";
                        $.each(response, 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" >Approve</span>';
                            } else if (value.approve_status == 3) {
                                approve_status = '<span class="badge badge-warning" >Rejected</span>';
                            } else if (value.approve_status == 1) {
                                approve_status = '<span class="badge badge-warning" >Pending</span>';
                            } else {
                                approve_status = 'unknown'
                            }
                            data = data + '<tr>' +
                                '<td>' + value.date + '</td>' +
                                '<td>' + value.expected_in_time + '</td>' +

                                '<td> ' + approve_status + ' </td>' +
                                '</tr>';
                        })
                    }
                    $('#loan_body').html(data);
                },
            });
        });


        $('.js-example-basic-single').select2();

    </script>
@endsection