@extends('admin.layouts.form')

@section('custom_page_style')
    <style>
        .searchable_dropdown.open .dropdown-menu.inner {
            padding-left: 30px !important;
            margin-left: 10px !important;
        }

        .bootstrap-select .bs-searchbox, .bootstrap-select .bs-actionsbox, .bootstrap-select .bs-donebutton {
            padding: 0 0 5px 10px;
            border-bottom: 1px solid #e9e9e9;
            margin-left: 37px;
        }

        .icon_of_ad_more_button {
            display: inline-block;
            margin-top: -2px;
            float: left;
            margin-left: 0px;
            margin-right: 4px;
            font-size: 16px !important;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: center;
        }

        .spinner {
            width: 40px;
            height: 40px;
            position: relative;
        }

        .double-bounce1, .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;

            animation: bounce 2.0s infinite ease-in-out;
        }

        .double-bounce2 {
            animation-delay: -1.0s;
        }

        @keyframes bounce {
            0%, 100% { transform: scale(0.0) }
            50% { transform: scale(1.0) }
        }

    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="block-header clearfix">
            <h2 class="pull-left">
                <i class="material-icons btn btn-sm btn-warning">create</i> <span> &nbsp; Create new Timesheet</span>
            </h2>
            <a href="{!! URL::to('module/timesheet/') !!}" class="pull-right">Back to List</a>
        </div>

        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="body" id="app">
                    {!! Form::open(['url' => url('module/timesheet/save_ai_generated_timesheet_data'), 'class' => 'form', 'id' => 'timesheet-form']) !!}

                    <!-- Image Upload -->
                        <div class="row clearfix">
                            <div class="col-xs-12">
                                <label for="image_upload">Upload Image</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">image</i>
                                    </span>
                                    <div class="form-line">
                                        <input type="file" id="image_upload" @change="uploadImage">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Loading Overlay -->
                        <div id="loading-overlay" class="loading-overlay">
                            <div class="spinner">
                                <div class="double-bounce1"></div>
                                <div class="double-bounce2"></div>
                            </div>
                        </div>

                        <!-- Company Name -->
                        <div class="row clearfix">
                            <div class="col-xs-12">
                                <label for="company_name">Company Name</label>
                                <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="material-icons">business</i>
                                </span>
                                    <div class="form-line">
                                        {!! Form::text('company_name', null, ['class' => 'form-control', 'placeholder' => 'Enter Company Name', 'required', 'v-model'=>'company_name']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Development -->
                        <div class="row clearfix">
                            <div class="col-xs-12">
                                <label for="development">Development</label>
                                <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="material-icons">location_city</i>
                                </span>
                                    <div class="form-line">
                                        {!! Form::text('development', null, ['class' => 'form-control', 'placeholder' => 'Enter Development', 'required', 'v-model'=>'development']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contractor -->
                        <div class="row clearfix">
                            <div class="col-xs-12">
                                <label for="contractor">Contractor</label>
                                <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="material-icons">work</i>
                                </span>
                                    <div class="form-line">
                                        {!! Form::text('contractor', null, ['class' => 'form-control', 'placeholder' => 'Enter Contractor Name', 'required', 'v-model'=>'contractor']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Work Date -->
                        <div class="row clearfix">
                            <div class="col-xs-12">
                                <label for="work_date">Work Date</label>
                                <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="material-icons">calendar_today</i>
                                </span>
                                    <div class="form-line">
                                        {!! Form::text('work_date', null, ['class' => 'form-control datepicker', 'placeholder' => 'Select Work Date', 'required', 'v-model'=>'work_date']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contract Number -->
                        <div class="row clearfix">
                            <div class="col-xs-12">
                                <label for="contract_no">Contract Number</label>
                                <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="material-icons">receipt</i>
                                </span>
                                    <div class="form-line">
                                        {!! Form::text('contract_no', null, ['class' => 'form-control', 'placeholder' => 'Enter Contract Number', 'required', 'v-model'=>'contract_no']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Employees Section -->
                        <div>
                            <div class="card">
                                <div class="header bg-info">
                                    <h4>Employee's time log</h4>
                                </div>
                                <div class="body">
                                    <div class="row clearfix" v-for="(employee, index) in employees" :key="index">
                                        <div class="col-xs-12">
                                            <label for="employee_name">Employee Name</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="material-icons">person</i>
                                                </span>
                                                <div class="form-line">
                                                    <input name="employee_name[]" type="text" class="form-control"
                                                           v-model="employee.name"
                                                           placeholder="Employee name" required>
                                                </div>
                                                <span class="input-group-btn">
                                                    <button class="btn btn-danger btn-xs" type="button"
                                                            @click="removeEmployee(index)"><i class="material-icons">remove</i></button>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="col-xs-6">
                                            <label for="work_classification">Work Classification</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="material-icons">work_outline</i>
                                                </span>
                                                <div class="form-line">
                                                    <input name="work_classification[]" type="text" class="form-control"
                                                           v-model="employee.work_classification"
                                                           placeholder="Enter Work Classification" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xs-6">
                                            <label for="ssn">SSN (Last 4 Digits)</label>
                                            <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">lock</i>
                                    </span>
                                                <div class="form-line">
                                                    <input name="ssn[]" type="text" class="form-control" v-model="employee.ssn"
                                                           placeholder="Enter SSN" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xs-6">
                                            <label for="time_in">Time In</label>
                                            <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">access_time</i>
                                    </span>
                                                <div class="form-line">
                                                    <input name="time_in[]" type="text" class="form-control" v-model="employee.time_in"
                                                           placeholder="Enter Time In" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xs-6">
                                            <label for="time_out">Time Out</label>
                                            <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">exit_to_app</i>
                                    </span>
                                                <div class="form-line">
                                                    <input name="time_out[]" type="text" class="form-control" v-model="employee.time_out"
                                                           placeholder="Enter Time Out" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row clearfix">
                                        <div class="col-xs-12">
                                            <button class="btn btn-primary" type="button" @click="addEmployee"><i
                                                    class="material-icons icon_of_ad_more_button">add</i> Add Employee
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    {!! Form::submit('Submit Timesheet', ['class'=>'btn btn-success btn-lg btn-block']) !!}
                                </div>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('custom_page_script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('.datepicker').bootstrapMaterialDatePicker({
                format: 'MM/DD/YYYY',
                clearButton: true,
                weekStart: 1,
                time: false
            });

            $('.searchable_dropdown').selectpicker({
                liveSearch: true,
                showSubtext: true
            });
        });

        var app = new Vue({
            el: '#app',
            data: {
                company_name: '',
                contractor: '',
                development: '',
                work_date: '',
                contract_no: '',
                employees: [
                    {
                        name: '',
                        work_classification: '',
                        ssn: '',
                        time_in: '',
                        time_out: ''
                    }
                ],
                structuredData: {}
            },
            methods: {
                addEmployee() {
                    this.employees.push({
                        name: '',
                        work_classification: '',
                        ssn: '',
                        time_in: '',
                        time_out: ''
                    });
                },
                removeEmployee(index) {
                    this.employees.splice(index, 1);
                },
                uploadImage(event) {
                    if (!event.target.files || event.target.files.length === 0) {
                        return;
                    }
                    // Show loading icon
                    this.resetFormFields();

                    // Show loading overlay
                    document.getElementById('loading-overlay').style.display = 'flex';

                    const formData = new FormData();
                    formData.append('image', event.target.files[0]);

                    axios.post('https://bikroytech.com/ocr_img_txt/public/api/upload_image', formData)
                        .then(response => {
                            let structuredData = response.data.structured_data;
                            console.log(structuredData);
                            this.populateFormFields(structuredData);

                            // Hide loading overlay after processing
                            document.getElementById('loading-overlay').style.display = 'none';
                        })
                        .catch(error => {
                            console.error('Error uploading image:', error);
                            // Hide loading overlay in case of error
                            document.getElementById('loading-overlay').style.display = 'none';
                        });
                },
                resetFormFields() {
                    this.company_name = '';
                    this.development = '';
                    this.contractor = '';
                    this.work_date = '';
                    this.contract_no = '';
                    this.employees = [{
                        name: '',
                        work_classification: '',
                        ssn: '',
                        time_in: '',
                        time_out: ''
                    }];
                },
                populateFormFields(data) {
                    console.log(data.contractor.name);

                    // Assuming structuredData has the structure from your example
                    this.company_name = 'NEW YORK CITY HOUSING AUTHORITY';
                    this.development = data.development_name || '';
                    this.contractor = data.contractor || '';
                    this.work_date = data.date || '';
                    this.contract_no = data.contract_no || '';

                    // Populate employees' data
                    this.employees = data.employees.map(emp => ({
                        name: emp.name || '',
                        work_classification: emp.work_classification || '',
                        ssn: emp.ssn_last_4_digits || '',
                        time_in: emp.time_in || '',
                        time_out: emp.time_out || ''
                    }));
                }
            },

        });
    </script>
@endsection