@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">

    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Compensations Off</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/leaves' }}">Leaves</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Add Compensations Off
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-md-8">
                <div class="card new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">Apply Compensations Off</h4>
                    </div>
                    <div class="card-body">
                        <form class="form" role="post-data" enctype='multipart/form-data' redirect="{{ $orgUrl . '/compensations' }}" method="POST" action="{{ $orgUrl . '/compensations/request' }}">
                            <input type="hidden" name="organization_id" value="{{ $organization->id }}">
                            <input type="hidden" name="attendance_summary_id" value="{{ $attendanceSummary ? $attendanceSummary->id : '' }}">
                            <input type="hidden" name="app_type" value="web">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                    
                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Request Date <span class="text-danger">*</span></label>
                                                <input type="text" name="request_date" id="request_date" readonly value="{{ $attendanceSummary ? $attendanceSummary->attendance_date : '' }}"
                                                    class="form-control" placeholder="YYYY-MM-DD">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12" id="todate">
                                            <div class="mb-1">
                                                <label class="form-label">Start Time <span class="text-danger">*</span>
                                                </label>
                                                <input type="text" name="start_time" id="start_time" readonly value="{{ $attendanceSummary ? $attendanceSummary->in_time : '' }}"
                                                    class="form-control" placeholder="hh:mm:ss">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12" id="todate">
                                            <div class="mb-1">
                                                <label class="form-label">End Time <span class="text-danger">*</span>
                                                </label>
                                                <input type="text" name="end_time" id="end_time" readonly value="{{ $attendanceSummary ? $attendanceSummary->out_time : '' }}"
                                                    class="form-control" placeholder="hh:mm:ss">
                                            </div>
                                        </div>

                                        {{-- <div class="col-md-3 col-12" id="daycount">
                                            <div class="mb-1">
                                                <label class="form-label">Day Count <span class="text-danger">*</span>
                                                </label>
                                                <input type="text" readonly value="{{ $attendanceSummary ? $attendanceSummary->day_count : '' }}"
                                                    class="form-control">
                                            </div>
                                        </div> --}}

                                        
                                        <div class="col-md-12 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Task Performed <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" placeholder="Enter task performed here..." name="task_performed"></textarea>
                                            </div>
                                        </div>

                                        <div class="col-md-12 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Task Achieved <span class="text-danger">*</span></label>
                                                <textarea class="form-control" placeholder="Enter task achieved here..." name="task_achieved"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Remarks (if any) </label>
                                                <textarea class="form-control" placeholder="Enter remarks here..." name="remarks"></textarea>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <button type="button" data-request="ajax-submit"
                                                data-target="[role=post-data]"
                                                class="btn btn-primary me-1 waves-effect waves-float waves-light">Submit</button>
                                            <button type="reset" onclick="this.form.reset()"
                                                class="btn btn-outline-secondary waves-effect">Reset</button>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-2">
                <div class="card h-100 new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">Employee Details</h4>
                    </div>
                    <div class="card-body mt-0">
                        <div class=" ">
                            <div class="row invoice-spacing">
                                <div class="col-md-3 col-4 mb-0 leavedetailhead">Name :</div>
                                <div class="col-md-9 col-8 mb-0 leavedetailtxt">
                                    {{ auth()->user()->name }} ({{ auth()->user()->employee_code }})
                                </div>
                                @if (auth()->user()->hod)
                                    <div class="col-md-3 col-4 leavedetailhead">HOD :</div>
                                    <div class="col-md-9 col-8 leavedetailtxt">
                                        {{ auth()->user()->hod->name }} ({{ auth()->user()->hod->employee_code }})
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="card-header newheader px-0 pb-25 pt-0 border-bottom mb-1">
                            <h4 class="card-title mt-2">Leave Details</h4>
                        </div>

                        <table class="table table-bordered leavetable">
                            <tbody>
                                <tr>
                                    <th>Leave Type</th>
                                    <th class="text-primary">Opening Balance</th>
                                    <th>Carry Forword</th>
                                    <th class="text-danger">Taken</th>
                                    <th class="text-success">Total Balance</th>
                                </tr>
                                @foreach ($employeeLeaves as $employeeLeave)
                                    <tr>
                                        <td><strong>{{ isset($employeeLeave->leaveType->name) ? $employeeLeave->leaveType->name : '' }}</strong>
                                        </td>
                                        <td class="text-primary">{{ $employeeLeave->opening_leaves }}</td>
                                        <td>{{ $employeeLeave->carry_forwarded_leaves }}</td>
                                        <td class="text-danger">{{ $employeeLeave->taken_leaves }}</td>
                                        <td class="text-success">{{ $employeeLeave->balance_leaves }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    </form>
    <!-- Basic Floating Label Form section end -->

@endsection

@section('scripts')

    @push('footer-script')
        <!-- BEGIN: Page Vendor JS-->
        <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
        <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
        <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
        <!-- END: Page Vendor JS-->

        <!-- BEGIN: Page JS-->
        <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
        <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
        <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
        <!-- END: Page JS-->

        <script src="{{ asset('js/common-script.js') }}"></script>
        <script src="{{ asset('js/sweetalert.js') }}"></script>

        <script>
            $("#leave_duration").change(function() {
                var durationName = $(this).find(":selected").data("duration");

                if (durationName !== 'Multiple') {
                    $("#to_date").attr('disabled', true);
                    $("#todate").addClass('hidden');
                    if (durationName == 'Single') {
                        $("#no_of_leaves").val(1);
                    } else {
                        $("#no_of_leaves").val(.5);
                    }
                } else {
                    $("#to_date").attr('disabled', false);
                    $("#todate").removeClass('hidden');
                    $("#no_of_leaves").val('');

                }
            });

            $("#to_date").change(function() {
                var start = new Date($("#from_date").val());
                var end = new Date($("#to_date").val());

                $("#to_date").attr('max', start)

                if (end < start) {
                    $("#to_date").val('');
                    Swal.fire("Warning!", "To Date must be less than From Date.", "danger");
                }
                // end - start returns difference in milliseconds
                var diff = new Date(end - start);
                // get days
                var days = (diff / 1000 / 60 / 60 / 24) + 1;
                $("#no_of_leaves").val(days);
            })

            jQuery(".flatpickr-basic").flatpickr({
                dateFormat: "Y-m-d",
                defaultDate: "today",
            });
        </script>
    @endpush