@extends('member-new')

@push('head-script')
<!-- BEGIN: Page 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/css/plugins/forms/form-wizard.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/ui-feather.css">
<!-- END: Page CSS-->

@endpush
@section('content')
<h4 class="mb-3 text-center bill-heading card-title ">Holiday List of <span id="selected_year">{{date('Y')}}</span> </h4>
<!-- Vertical Wizard -->
<section class="vertical-wizard">
    <div class="card p-2">
        <div class="row">
            <div class="mb-1 col-md-4">
                <label class="form-label" for="vertical-country">Year</label>
                <select onchange="showData()" class="select2 w-100 form-control" data-placeholder="@lang('app.menu.projects') @lang('app.status')" id="year">
                    @forelse($years as $yr)
                        <option @if($yr == $year) selected @endif value="{{ $yr }}">{{ $yr }}</option>
                    @empty
                    @endforelse
                </select>
            </div>
            <div class="mb-1 col-md-4">
                <label class="form-label" for="vertical-country">Holiday List</label>
                <select onchange="showData()" class="select2 w-100 form-control" data-placeholder="@lang('app.menu.projects') @lang('app.status')" id="holidayList">
                    <option  value="0">Select List</option>
                    @forelse($holidayLists as $holidayList)
                        <option value="{{ $holidayList->id }}">{{ $holidayList->name }}</option>
                    @empty
                    @endforelse
                </select>
            </div>
            <div class="mb-1 col-md-4">
                <label class="form-label" for="vertical-country">Employee Name</label>
                <select onchange="showData()" class="select2 w-100 form-control" data-placeholder="@lang('app.menu.projects') @lang('app.status')" id="employee">
                    <option  value="0" selected>Select Employee</option>
                    @forelse($employees as $employee)
                        <option value="{{ $employee->id }}">{{ $employee->name }} ({{$employee->employee_code}})</option>
                    @empty
                    @endforelse
                </select>
            </div>
        </div>
    </div>
    <div class="row" id="holidaySectionData" >

    </div>
</section>
<!-- /Vertical Wizard -->
@endsection

@push('footer-script')

<script src="/app-assets/js/scripts/forms/form-wizard.min.js"></script>
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>

<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>


<script>
    @if($number_of_sundays>$holidays_in_db)
            $('.markHoliday').show();
    @endif

    showData();
    // Delete Holiday
   
    // Show Holiday
    function showData() {
        var year = $('#year').val();
        $('#selected_year').text(year);
        var employee = $("#employee").val()||'';
        var holidayList = $("#holidayList").val()||'';
        var url = "{{ route('member.holidays.view-holiday',['slug'=>$alias,'year'=>':year']) }}?employeeId="+employee+"&holidayList="+holidayList
        url = url.replace(':year', year);
        $('.select-year').text(year);
        $.ajax({
            type: 'GET',
            url: url,
            container: '#holidaySectionData',
            success: function (response) {
                $('#holidaySectionData').html(response.view);
                if(response.number_of_sundays > response.holidays_in_db){
                    $('.markHoliday').show();
                }
                else{
                    $('.markHoliday').hide();
                }
                $.getScript("/app-assets/vendors/js/forms/wizard/bs-stepper.min.js");
                $.getScript("/app-assets/js/scripts/forms/form-wizard.min.js");
                $('.bs-stepper-calender-icon').html(feather.icons['calendar'].toSvg());
            }
        });
    }

</script>
<!-- END: Page JS-->


@endpush