@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .flatpickr-clear{display: none}
    .flatpickr-clear {
        cursor: pointer;
        position: absolute;
        right: 30px;
        top: 13px;
        font-size: 20px;
    }
</style>
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm">
        <h4 class="mb-1 mt-0 font-weight-medium">Visitor log</h4>
    </div>
    <div class="col-sm-auto">
        <button class="btn btn-success btn-add-visitor">Add visitor details</button>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card mb-0">
            <div class="card-body">
                <div class="font-size-16 pb-3 table-title" style="display: none">All logs</div>
                <table id="datatable" class="table table-striped dt-responsive">
                    <thead>
                        <tr>
                            <th>Name of person</th>
                            <th>Date</th>
                            <th>Time in</th>
                            <th>Time out</th>
                            <th>Description</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="AddVisitorModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route('visitor.log.save') }}" method="POST" class="form-horizontal visitor-log-form">
        @csrf
        <input type="hidden" name="recordId" class="recordId" value="">
        <div class="modal-dialog modal-medium modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1 font-size-22 mt-2 font-weight-700 add">Add visitor details</h3>
                    <h3 class="modal-title mb-1 font-size-22 mt-2 font-weight-700 edit" style="display:none">Edit visitor details</h3>
                    <p class="text-danger add">When checking in, add your <b class="font-weight-bold">Time In</b> and a brief description, then save the record. The <b class="font-weight-bold">Time Out</b> is only added when you are checking out. To add your check out time, select your specific visitor log, and using the three grey dots, select edit. Add your Out time, only when leaving.</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label class="">Name of person</label>
                                        <input type="text" class="form-control name" name="name" placeholder="Name of person" value="">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="">Date</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-date visit-date" name="date" placeholder="Select date" value="" data-error="date-error">
                                        </div>
                                        <div class="date-error"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row time-group">
                                    <div class="col-md-6 form-group">
                                        <label>Time in</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-time fromTime" name="fromTime" value="" placeholder="">
                                            <span class="flatpickr-clear">&times;</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label>Time out</label>
                                        <div class="position-relative">
                                            <span class="flatpickr-arrow"></span>
                                            <input type="text" class="form-control flatpickr flatpickr-time toTime" name="toTime" value="" placeholder="">
                                            <span class="flatpickr-clear">&times;</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label>Description</label>
                                <textarea type="text" class="form-control description" name="description" value="" placeholder="Start typing here…" rows="4"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success add">Done</button>
                    <button type="submit" class="btn btn-success edit" style="display: none">Save changes</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script-bottom')
<script type="text/javascript"> 
var viewUrl = "{{ route('visitor.log') }}", 
removeUrl = "{{ route('visitor.log.remove') }}";
</script>
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/visitor-log.js') }}?v={{time()}}" type="text/javascript"></script>
@endsection