@extends('admin.adminlayouts.adminlayout')

@section('head')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" href="{{asset('assets/global/plugins/select2/select2.css')}}">
    <link rel="stylesheet" href="{{asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')}}">
    <!-- END PAGE LEVEL STYLES -->
@stop

@section('mainarea')
<style>
.ui-menu-item{list-style-type: none !important;}
</style>

			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			{{$pageTitle}}
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{route('admin.dashboard.index')}}">Home</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">Leave Applications</a>
						<i class="fa "></i>
					</li>

				</ul>

			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
						<div class="row">
            				<div class="col-md-6">

                            </div>
            				<!--  -->
                         </div>

			<div class="row">
				<div class="col-md-12">

					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div id="load">

					  @include('admin.common.error')

					</div>
					<div class="portlet box blue">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-rocket"></i>Applications
							</div>
							<div class="tools">
							</div>
						</div>

						<div class="portlet-body">


							<table class="table table-striped table-bordered table-hover" id="application_data_leave">
                                     <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Date</th>
                                        <th>Leave Type</th>
                                        <th>Reason</th>
                                        <th>Applied on</th>
                                        <th>Status</th>
                                        <th>Action</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                         <td> {{-- ID from Contoller ajaxload------}} </td>
                                         <td> {{-- Name from Contoller ajaxload----}} </td>
                                         <td> {{-- Date from Contoller ajaxload----}} </td>
                                         <td> {{-- Leavetype from Contoller ajaxload--}} </td>
                                         <td> {{-- Reason from Contoller ajaxload----}} </td>
                                         <td> {{-- Applied on from Contoller ajaxload---}} </td>
                                         <td> {{-- Status from Contoller ajaxload----}} </td>
                                         <td> {{-- Action from Contoller ajaxload----}} </td>
                                    </tr>

                                        </tbody>

							</table>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->

				</div>
			</div>
			<!-- END PAGE CONTENT-->


{{--Leave Application view MODALS--}}
{!! Form::open(['url'=>'','id'=>'edit_form_application','method'=>'PATCH']) !!}
<div id="leaveApplicationIndex" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <span class="caption-subject font-red-sunglo bold uppercase">Leave Application</span>
                    </div>
                    <div class="modal-body" id="modal-data-application">
                        {{--Ajax data call for form--}}
                    </div>
                </div>

            </div>
        </div>
</div>
{!! Form::close() !!}
{{--Leave Application view MODALS--}}

			{{--DELETE MODAL CALLING--}}
@include('admin.include.delete-modal')
@include('include.show-modal')
            {{--DELETE MODAL CALLING END--}}
@stop



@section('footerjs')


    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="{{ asset('assets/global/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
    <!-- END PAGE LEVEL PLUGINS -->

 <script>
   var table = $('#application_data_leave').dataTable({
    "cache": true,
    "bProcessing": true,
    "bServerSide": true,
    "bDestroy": true,
    "order": [[0, "desc"]],
    "ajax": "{{ route('admin.leave_applications') }}",
    "aoColumns": [
        {'sClass': 'center', 'bSortable': true},
        {'sClass': 'center', 'bSortable': false},
        {'sClass': 'center', 'bSortable': false},
        {'sClass': 'center', 'bSortable': false},
        {'sClass': 'center', 'bSortable': false},
        {'sClass': 'center', 'bSortable': false},
        {'sClass': 'center', 'bSortable': false},
        {'sClass': 'center', 'bSortable': false},
    ],
    "fnDrawCallback": function () {
        Metronic.init();
    },
    "sPaginationType": "full_numbers",
    "language": {
        "emptyTable": "No data available"
    },
    "fnInitComplete": function (oSettings, json) {
        Metronic.init();

     $('#application_data_leave_filter input').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "{{ route('admin.leave_applications_suggestions') }}",
            type: "POST",
            data: {
                searchTerm: request.term,
                _token: $("meta[name='csrf-token']").attr('content') // CSRF token
            },
            success: function(data) {
                response(data);
            }
        });
    },
    select: function (event, ui) {
        $('#application_data_leave_filter input').val(ui.item.value); // Set selected value
        table.search(ui.item.value); // Trigger DataTable search with selected term
    }
});

    }
});



		// Show Create Department Modal
		function show_application(id) {
			var url = "{{ route('admin.leave_applications.show',':id') }}";
			url = url.replace(':id',id);
			$.ajaxModal('#leaveApplicationIndex', url);
		}
		// Show Delete Modal
		function del(id) {

			$('#deleteModal').modal('show');

			$("#deleteModal").find('#info').html('Are you sure ! You want to delete ?');

			$('#deleteModal').find("#delete").off().click(function () {

				var url = "{{ route('admin.leave_applications.destroy',':id') }}";
				url = url.replace(':id',id);

				var token = "{{ csrf_token() }}";

				$.easyAjax({
					type: 'DELETE',
					url: url,
					data: {'_token': token},
					container: "#deleteModal",
					success: function (response) {
						if (response.status == "success") {
							$('#deleteModal').modal('hide');
							table.fnDraw();
						}
					}
				});

			});
			
			$('#application_data_leave_filter input').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "{{ URL::route('admin.leave_applications_suggestions') }}",
            type: "POST",
            data: { searchTerm: request.term },
            success: function (data) {
                response(data); // Pass the suggestions to the widget
            }
        });
    },
    select: function (event, ui) {
        $(this).val(ui.item.value);
        table.search(ui.item.value).draw(); // Filter DataTable
    }
});

		}

    </script>


@stop