@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.time.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.date.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('/') }}treeview/tree_view.css"/>
@endsection
@section('content')

    <section>
        <div class="col-12 mt-4">
            <h2 class="page-title text-center">{{__('obs.create')}} {{__('obs.manual')}} {{__('obs.punch')}}</h2>
            <div class="mb-2 heading-border"></div>
        </div>
    </section>
    <section class="px-3  pt-3 pt-lg-5 row">
        <div class="col-12 mb-4">
            <div class="blu-card d-flex flex-wrap">
                <div class="col-12">
                    @if (session('message'))
                        <div class="alert {{session('icon')}}" id="hide-alert">
                            {{ session('message') }}
                        </div>
                    @endif
                </div>
                <div class="form-group col-md-12 text-center">
                    <button class="btn btn-primary" onclick="openPunch('1')">{{__('obs.in')}}</button>
                    <button class="btn btn-danger" onclick="openPunch('2')">{{__('obs.out')}}</button>
                </div>
                <hr>
                <form id="punch_form" class="leave-form col-12 col-md-12 border-right" action="{{route('employee.attendance.store')}}"
                      method="post">
                    @csrf
                    <input type="hidden" name="lat" autocomplete="off" id="latitude_id" />
                    <input type="hidden" name="lng" autocomplete="off" id="longitude_id" />
                    <div class="row">
                        <div class="form-group col-md-12 text-center" id="in_div" style="display: none">
                            <div class="row">
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <label for="exampleInputEmail1">{{__('obs.in')}} {{__('obs.time')}}</label>
                                    <input id="punch_in_time" name="punch_in_time" class="form-control " placeholder="Punch In Time" type="text" value="{{date('d-m-Y h:i:s a')}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-12 text-center" id="out_div" style="display: none">
                            <div class="row">
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <label for="exampleInputEmail1">{{__('obs.out')}} {{__('obs.time')}}</label>
                                    <input id="punch_out_time" name="punch_out_time" class="form-control" placeholder="Punch Out Time" type="text" value="{{date('d-m-Y h:i:s a')}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-12 text-center">
                            @if(empty($conveyance_info))
                                <input style="display:none;" class="btn btn-success px-4" type="submit" value="Punch">
                                <button id="btn_punch" onclick="handleSubmit(this)" class="btn btn-success px-4" type="button">Punch</button>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('script')

    <script>
        $("#latitude_id").val("");
        $("#longitude_id").val("");
        let location_status=@json(env('CURRENT_LOCATION_ENABLE'));
        function openPunch(punch_type) {
            setPunchData(punch_type);
        }
        function formatDateTime(datatime) {
            let day = String(datatime.getDate()).padStart(2, '0');
            let month = String(datatime.getMonth() + 1).padStart(2, '0'); // Months are zero-based
            let year = datatime.getFullYear();

            let hours = datatime.getHours();
            let minutes = String(datatime.getMinutes()).padStart(2, '0');
            let seconds = String(datatime.getSeconds()).padStart(2, '0');

            // Convert hours to 12-hour format and determine AM/PM
            let period = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12 || 12; // Convert 0 to 12 for midnight in 12-hour format
            hours = String(hours).padStart(2, '0'); // Ensure two digits

            return `${day}-${month}-${year} ${hours}:${minutes}:${seconds} ${period}`;
        }


        function setPunchData(punch_type) {
            // Always fetch the current date and time dynamically
            let datatime = new Date();
            let formattedDateTime = formatDateTime(datatime);

            if (punch_type == 1) {
                // Punch In
                $("#in_div").show();
                $("#out_div").hide();
                $("#punch_out_time").val("");
                $("#punch_in_time").val(formattedDateTime); 
            } else {
                // Punch Out
                $("#in_div").hide();
                $("#out_div").show();
                $("#punch_in_time").val(""); 
                $("#punch_out_time").val(formattedDateTime);
            }
        }
        function getCurrentLocation(position){
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            console.log(latitude,longitude);
            $("#latitude_id").val(latitude);
            $("#longitude_id").val(longitude);
            $('#punch_form').submit();
            $("#btn_punch").text("Punch");
            $("#btn_punch").attr("disabled",false);
        }
        function getCurrentLocationError(error){
            showLocationError(error);
            $("#btn_punch").text("Punch");
            $("#btn_punch").attr("disabled",false);
        }
        function handleSubmit(){
            console.log('punch');
            $("#btn_punch").text("Loading...");
            $("#btn_punch").attr("disabled",true);
            if(location_status)
                checkLocationPermission(getCurrentLocation,getCurrentLocationError);
            else
                {
                    $('#punch_form').submit();
                    $("#btn_punch").text("Punch");
                    $("#btn_punch").attr("disabled",false);
                }
        }
    </script>

    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/legacy.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.time.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.date.js"></script>
    <script src="{{ asset('/') }}assets/plugins/bootstrap-material-datetimepicker/js/moment.min.js"></script>

    <script>
        function total_amount() {
            let total_amount = 0;
            $(".conveyance_amount").each(function () {
                total_amount += Number($(this).val());
            });
            $("#total_conveyance_amount").val(total_amount);
        }

        today = new Date();
        days = 86400000; //number of milliseconds in a day;

        $('.datepicker').datetimepicker({ // this is used in the system
            selectMonths: true,
            selectYears: 100,
            format: 'dd-mm-yyyy',
            min: new Date(today - (7 * days)),
            firstDay: 0
        });

        $('.datepicker_month').pickadate({ // this is used in the system
            selectMonths: true,
            selectYears: true,
            format: 'mm-yyyy'
        });
        $('.timepicker').pickatime()
    </script>

@endsection