@extends('layouts.organization.app')
@section('content')
<style>
    #searchResult li:hover {
        cursor: pointer;
        background-color: #0dcaf0;
    }
    #searchResult{
    list-style: none;
    padding: 0px;
    width: 91.3%;
    position: absolute;
    margin: 0;
    z-index: 99;
    }
    #searchResult li{
        background: cadetblue;
        padding: 4px;
        color:#fff;
        margin-bottom: 1px;
    }
    #searchResult li:nth-child(even){
        background: cadetblue;
        color: white;
    }
    #searchResult li:hover{
        cursor: pointer;
        background-color: #0dcaf0;
    }
    .clear{
        clear:both;
    }
</style>
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-header">
                        <h5 class="">Manual Attendance</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{url('manual-attendance')}}" method="POST">
                            @csrf
                            <input type="hidden" id="latitude" name="latitude">
                            <input type="hidden" id="longitude" name="longitude">
                            <div class="row">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Date</label>
                                        <input type="date" class="form-control" id="start_date" name="start_date" onchange="getLocation()" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Select In Time</label>
                                        <input type="time" class="form-control" id="in_time" name="in_time" onchange="getLocation()" required>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Select Out Time</label>
                                        <input type="time" class="form-control" id="out_time" name="out_time" onchange="getLocation()" required>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea type="text" class="form-control" rows="3" id="description" name="description" placeholder="Enter Notes"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-1">
                                    <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                <div class="card-body mt-2">
                    <div class="table-responsive">
                        <table id="example" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>In Time</th>
                                    <th>Out_Time</th>
                                    <th>Total Time</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Attendance Date</th>
                                    <th>Approved By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <body>
                                @if(!empty($attendance))
                                    @foreach($attendance as $rows)
                                    <tr>
                                        <td>{{$loop->iteration}}</td>
                                        <td>{{$rows->in_time}}</td>
                                        <td>{{$rows->out_time}}</td>
                                        <td>{{$rows->total_time}}</td>
                                        <td>{{$rows->description}}</td>
                                        <td>
                                            @if($rows->status=='Pending')
                                            <span class="btn-xs btn btn-danger">{{$rows->status}}</span>
                                            @else
                                            <span class="btn-xs btn btn-success">{{$rows->status}}</span>
                                            @endif
                                        </td>
                                        <td>{{date_format(date_create($rows->created_at),"d-M-Y")}}</td>
                                        <td>{{$rows->approved_by}}</td>
                                        <td>
                                            <!-- <a href="{{url(Request::segment(1),$rows->id)}}" style="margin-right:5px;" class="text-primary"><i class="fa fa-eye"></i></a> -->
                                            <a data-value="{{$rows->id}}" class="fs-5 text-danger delete_button" class="text-danger delete-button"><i class="fa fa-trash"></i></a>
                                        </td>
                                    </tr>
                                    @endforeach
                                @endif
                            </body>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<form id="buttondelete_1" action="" method="post">
    @csrf
    @method('DELETE')
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script>
    $(document).on('click','.delete_button',function(){
        var data_id = $(this).attr('data-value');
        swal({
            title: "Are you sure?",
            text: "Do you want to delete this..?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, Delete!",
            closeOnConfirm: false
        },function (isConfirm) {
            if (isConfirm) {
                $('#buttondelete_1').attr('action',"{{url(Request::segment(1))}}/"+data_id+"");
                $('#buttondelete_1').submit();
            }
        });
    });
    var x = document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
        if($('#latitude').val()=='' && $('#longitude').val()==''){
            $('button').attr('disabled',true);
        }else{
            $('button').attr('disabled',false);
        }
    }
    function showPosition(position) {
        $('#latitude').val(position.coords.latitude);
        $('#longitude').val(position.coords.longitude);
    }
    </script>
@endsection('content')