@extends('layouts.master')

@section('title', 'Faculty Services Reservation')
@section('subtitle', 'Reserve')
@section('titleicon', "icon-file-text")

@section('advancedaction')
    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 mt-1">
        <div class="btn-group float-right">
            <div class="btn-group">
                <button type="button" class="btn btn-primary">More</button>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-start" style="position: absolute; transform: translate3d(71px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a class="dropdown-item" href="{{route('reserve_service')}}" target='_blank' >Start Service Reservation</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')

    <div id="confirm_cancel" class='modal fade' tabindex='-1' role='dialog' aria-labelledby='request_service_modal' aria-hidden='true'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <div class="col-11 p-0">
                            <h5 class='modal-title text-danger' id='modal_label'>Cancel Reservation</h5>
                        </div>
                        <div class="col-1 p-0">
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                                <span aria-hidden='true'>&times;</span>
                            </button>
                        </div>
                    </div>
                    <div class='modal-body'>
                        <input type='number' id='id' name='id' class='id'/>
                        <p class='text-danger'>Do you really want to delete this request?</p>
                    </div>
                    <div>
                        <div id='progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
                    </div>
                    <div class='modal-footer'>
                        <button type='submit' class='btn btn-danger cancel_services' id='action'><span class="icon-checkmark"></span> <span id="progress_text"></span></button>
                        <button type='button' class='btn btn-light' id='close' data-dismiss='modal'><span class="icon-cross"></span></button>
                        <!-- <button type="button" class="btn btn-default" data-dismiss="modal"><span class="icon-cross"></span></button>
                            <a class="btn btn-danger btn-ok cancel_services"><span class="icon-checkmark"></span></a> -->
                    </div>
                </div>
            </div>
    </div>

    <!-- BEGIN .main-content -->
    <div class="main-content">
        <div class="card">
            <div class="card-body pb-0">
                <div class="filter-box">
                    <div class="row">
                        <div class="col-md-3">
                            {!! Form::select('faculty_service_id', array(""=>__("tr.Select Service"))+'App\FacultyServices'::serviceTypeList(), null, array('id'=> 'search_faculty_service_id', 'class'=>'selectize', 'title'=> __('tr.Facilities Services'))) !!}
                        </div>
                        <div class="col-md-2">
                            {!! Form::select('search_status', array(""=>__("tr.Select Status"))+'App\FacultyServiceReservation'::statusList() , null, array('id'=> 'search_status', 'class'=>'selectize', 'title'=> __('tr.Status'))); !!}
                        </div>
                        <div class="col-md-2">
                            {{ Form::text('text_search', null, ['id'=>'text_search', 'class'=>'form-control-sm', 'placeholder'=>'Text Search']) }}
                        </div>
                        <div class="col-md-2 float">
                            <button class="btn btn-primary" type="button" id="search_button">Search</button>
                        </div>

                        <div class="col-md-2 float">
                            <button class="btn btn-danger" type="button" id="reset_button">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--TABLE-->
        <div class="card">
            <div class="card-header">
                <span>List of Reservations</span>
            </div>
            <div class="card-body">
                <table id="data_table" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th width="20%">Service Type</th>
                        <th width="20%">Location</th>
                        <th width="15%">Date</th>
                        <th width="15%">Time</th>
                        <th width="35%">Inforamtion</th>
                        <th width="15%">Status</th>
                        <th width="5%"></th>
                    </tr>
                    </thead>
                </table> 
            </div>
        </div>

    </div> 
    <!-- END: .main-content -->
   
@endsection

@section('pagejs')

    @include('reservation.component.formatTime')

    <script type="text/javascript">

        $(document).ready(function () {
            
            var table = $('#data_table').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                ordering: false,
                stateSave: false,
                rowId: 'id',
                "ajax": {
                    "url": '{{ route('faculty_services') }}',
                    "dataSrc": "data.data"
                },
                "columns": [ 
                    {"data": "id", "name": "id"},
                    {"data": "service_type", "name": "service_type",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "";
                            if(oData.service_type == {{'App\FacultyServices'::SERVICE_TYPE_PLAYING_FIELDS}})
                                html = oData.title;

                            $(nTd).html("<span>" + html + "</span>");
                        }
                    },
                    {"data": "location_name", "name": "location_name"},
                    {"data": "date", "name": "date",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html ='';
                            var date = oData.date.split('-');
                            var monthIndex = parseInt(date[1]) -1;
                            var month= ["January","February","March","April","May","June","July",
                                        "August","September","October","November","December"];
                            html += date[2] + ' '+month[monthIndex]+' '+date[0];
                            $(nTd).html("<span>" + html + "</span>");
                        }
                    },
                    {"data": "reserved_slots", "name": "reserved_slots",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "<b>From</b>: "+getFullTime(oData.reservation_start_slot)+", <b>To</b>: "+getFullTime(oData.reservation_end_slot);
                            $(nTd).html("<span>" + html + "</span>");
                        }
                    },
                    {"data": "information", "name": "information",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = ''; 
                            if(oData.notes)
                                html += oData.notes;

                            $(nTd).html("<span>" + html + "</span>");
                        }
                    },
                    {"data": "status", "name": "status",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "";
                            
                            if(oData.status == {{'App\FacultyServiceReservation'::STATUS_SCHEDULED}})
                                html += "<span class='badge badge-pill badge-success' title='Scheduled'>@lang('tr.Scheduled')</span>";
                            else if(oData.status == {{'App\FacultyServiceReservation'::STATUS_REJECTED}})
                                html += "<span class='badge badge-pill badge-danger' title='Rejected'>@lang('tr.Rejected')</span>";
                            else
                                html += "<span class='badge badge-pill badge-primary' title='Pending'>@lang('tr.Pending')</span>";
                            
                            $(nTd).html("<span>" + html + "</span>");
                        }
                    },
                    {"data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                            var html = "";
                            if(moment().format('YYYY-MM-DD') <= oData.date && oData.status=={{'App\FacultyServiceReservation'::STATUS_PENDING}})
                                html += "<div id='"+oData.id+"' class='d-flex justify-content-center cancel_button'><a title='Cancel' href='javascript:void(0)' class='open_modal' ><button class='btn btn-danger btn-sm'>Cancel</button></a></div>";
                            
                            $(nTd).html("<span class='action-column'>" + html + "</span>");
                        }
                    },
                    
                ]
            });

            $(".dataTables_filter").hide();

            $('#search_button').on('click', function () {
                table.search($("#text_search").val());
                table.columns(1).search($("#search_status").val());
                table.columns(2).search($("#search_faculty_service_id").val());
                table.draw();
            });

            $('#text_search').keyup(function (e) {
                if (e.keyCode == 13)
                    $('#search_button').trigger('click');
            });

            $('#reset_button').on('click', function () {
                $("#text_search").val("");
                $("#search_status").val("");
                $("#search_faculty_service_id").val("");
                $('#search_button').trigger('click');
            });

            $(document).on("click", ".open_modal", function () {
                var deleteURL = '{{ route('cancel_service', ['id'=>'#id']) }}';
                var row = $(this).closest('tr');
                var data = table.row(row).data();
                var url = deleteURL.replace('#id', data.id);

                var time = data.location_name+" From: "+getFullTime(data.reservation_start_slot)+", To: "+getFullTime(data.reservation_end_slot);

                var message = "@lang('confirm.Are you sure you want to delete') (<B>"+time+"</B>) ?";
                warningBox(message, function() {
                    $.post(url, {"_token": '{{ csrf_token() }}' }, function(data, status){
                        table.row("#"+data.id).remove().draw(false);
                        infoBox('@lang('tr.DeletedSuccessfully')');
                    });
                });
            });

            $('#search_button').trigger('click');
        });
        
    </script>
@endsection