@extends('layout.main')
@section('content')

    <section>
        <span id="form_result_home"></span>
        <div class="container-fluid">
            <div class="card mb-4">
                <div class="card-header with-border">
                    <h3 class="card-title text-center"> {{ __(' Attendance') }} </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <form method="post" id="filter_form" class="form-horizontal">
                                @csrf
                                <div class="row">
                                    @if (Auth::user()->can('attendances'))
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{{ trans('file.Company') }} *</label>
                                                <select name="company_id" id="company_id"
                                                    class="form-control selectpicker dynamic" required
                                                    data-live-search="true" data-live-search-style="contains"
                                                    data-first_name="first_name" data-last_name="last_name"
                                                    data-dependent="department_name"
                                                    title='{{ __('Selecting', ['key' => trans('file.Company')]) }}...'>
                                                    @php($i = 0)
                                                    @foreach ($companies as $company)
                                                        <option value="{{ $company->id }}" @if($i == 0) selected @endif>{{ $company->company_name }}
                                                        </option>
                                                    @php($i++)
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label>{{ trans('file.Department') }}</label>
                                            <select name="department_id" id="department_id"
                                                class="selectpicker form-control department_wise_employees"
                                                data-live-search="true" data-live-search-style="contains"
                                                data-first_name="first_name" data-last_name="last_name"
                                                title="{{ __('Selecting', ['key' => trans('file.Department')]) }}...">
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" name="employee_id" id="employee_id"
                                            value="{{ Auth::user()->id }}">
                                    @endif

                                    <div class="col-md-6 form-group">
                                        <label>{{ __('Month Year') }} *</label>
                                        <input class="form-control month_year" id="month_year" name="month_year"
                                            type="text">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-actions">
                                                <button type="submit" class="filtering btn btn-primary">
                                                    <i class="fa fa-search"></i> {{ trans('file.Search') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <button id="btn-add" class="btn btn-success">
                                <i class="fa fa-plus"></i> {{ __('Add Raw Attendances') }}
                            </button>
                            <button id="btn-process" class="btn btn-info">
                                <i class="fa fa-wrench"></i> {{ __('Process Raw Attendances') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table id="raw_attendance-table" class="table">
                <thead>
                    <tr>
                        <th></th>
                        <th>{{ __('Employee') }}</th>
                        <th>{{ __('Attendance Date') }}</th>
                        <th>{{ __('Attendance Time') }}</th>
                        <th>{{ __('Location') }}</th>
                        <th>{{ __('Photo') }}</th>
                        <th class="not-exported">{{ trans('file.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </section>

    <div id="formModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="exampleModalLabel" class="modal-title">{{ __('Add Raw Attendance') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <span id="form_result"></span>
                    <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>{{ trans('file.Company') }}</label>
                                    <select name="company_id" id="company_add_id"
                                        class="form-control selectpicker dynamic_add" data-live-search="true"
                                        data-live-search-style="contains" data-dependent="department_name"
                                        title='{{ __('Selecting', ['key' => trans('file.Company')]) }}...'>
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>{{ trans('file.Department') }}</label>
                                    <select name="department_id" id="department_add_id"
                                        class="selectpicker form-control employee" data-live-search="true"
                                        data-live-search-style="contains" data-first_name="first_name"
                                        data-last_name="last_name"
                                        title='{{ __('Selecting', ['key' => trans('file.Department')]) }}...'>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>{{ trans('file.Employee') }}</label>
                                    <select name="employee_id" id="employee_add_id" class="selectpicker form-control"
                                        data-live-search="true" data-live-search-style="contains"
                                        title='{{ __('Selecting', ['key' => trans('file.Employee')]) }}...'>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('Attendance Date') }}</label>
                                <input class="form-control date" id="attendance_date" name="attendance_date" type="text">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('Attendance Time') }}</label>
                                <input type="text" name="attendance_time" id="attendance_time"
                                    class="form-control time" placeholder="{{ __('Attendance Time') }}">
                            </div>

                            <div class="container">
                                <div class="form-group" align="center">
                                    <input type="hidden" name="action" id="action" />
                                    <input type="hidden" name="hidden_id" id="hidden_id" />
                                    <input type="submit" name="action_button" id="action_button"
                                        class="btn btn-warning w-100" value="{{ trans('file.Add') }}" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        (function($) {
            "use strict";

            $(document).ready(function() {
                $('.date').datepicker({
                    format: '{{ env('Date_Format_JS') }}',
                    autoclose: true,
                    todayHighlight: true,
                    endDate: new Date()
                });

                $('.time').clockpicker({
                    placement: 'top',
                    align: 'left',
                    donetext: 'done',
                    twelvehour: true,
                });

                fill_datatable();
            });

            function fill_datatable(company_id = '', department_id = '', filter_month_year = '') {
                let table_table = $('#raw_attendance-table').DataTable({
                    responsive: true,
                    fixedHeader: true,
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('raw_attendances.index') }}",
                        data: {
                            filter_month_year: filter_month_year,
                            company_id: company_id,
                            department_id: department_id,
                            "_token": "{{ csrf_token() }}"
                        }
                    },
                    columns: [
                        { data: null, orderable: false, searchable: false },
                        { data: 'employee_name', name: 'employee_name' },
                        { data: 'attendance_date', name: 'attendance_date' },
                        { data: 'attendance_time', name: 'attendance_time' },
                        {
                            data: null,
                            name: 'location',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, row) {
                                if (row.lat && row.long && row.lat != '0' && row.long != '0') {
                                    let mapUrl = 'https://maps.google.com/?q=' + row.lat + ',' + row.long;
                                    if (row.address) {
                                        return '<a href="' + mapUrl + '" target="_blank" style="color: #007bff; font-weight: bold;"><i class="fa fa-map-marker"></i> ' + row.address + '</a>';
                                    }
                                    return '<a href="' + mapUrl + '" target="_blank" style="color: #007bff; font-weight: bold;"><i class="fa fa-map-marker"></i> <span class="geo-address" data-lat="' + row.lat + '" data-long="' + row.long + '">Fetching...</span></a>';
                                }
                                return '<span class="badge badge-secondary">No Location</span>';
                            }
                        },
                        {
                            data: 'photos',
                            name: 'photos',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, row) {
                                if (data) {
                                    let photoUrl = '{{ asset("uploads/attendance_photos") }}/' + data;
                                    return '<a href="' + photoUrl + '" target="_blank">' +
                                           '<img src="' + photoUrl + '" width="50" height="50" ' +
                                           'style="object-fit:cover; border-radius:5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">' +
                                           '</a>';
                                }
                                return '<span class="badge badge-secondary">No Photo</span>';
                            }
                        },
                        { data: 'action', name: 'action', orderable: false }
                    ],
                    drawCallback: function() {
                        $('.geo-address:not(.fetched)').each(function(index) {
                            let el = $(this);
                            let lat = el.data('lat');
                            let lon = el.data('long');
                            el.addClass('fetched');
                            
                            setTimeout(function() {
                                $.ajax({
                                    url: 'https://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lon,
                                    type: 'GET',
                                    success: function(res) {
                                        if (res && res.display_name) {
                                            el.text(res.display_name);
                                        } else {
                                            el.text(lat + ', ' + lon);
                                        }
                                    },
                                    error: function() {
                                        el.text(lat + ', ' + lon);
                                    }
                                });
                            }, index * 600);
                        });
                    },
                    order: [],
                    language: {
                        lengthMenu: '_MENU_ {{ __('records per page') }}',
                        info: '{{ trans('file.Showing') }} _START_ - _END_ (_TOTAL_)',
                        search: '{{ trans('file.Search') }}',
                        paginate: {
                            previous: '{{ trans('file.Previous') }}',
                            next: '{{ trans('file.Next') }}'
                        }
                    },
                    columnDefs: [
                        {
                            targets: 0,
                            render: function(data, type, row, meta) {
                                if (type == 'display') {
                                    data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                                }
                                return data;
                            },
                            checkboxes: {
                                selectRow: true,
                                selectAllRender: '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            }
                        }
                    ],
                    select: { style: 'multi', selector: 'td:first-child' },
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    dom: '<"row"lfB>rtip',
                    buttons: [
                        {
                            extend: 'pdf',
                            text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
                            exportOptions: { columns: ':visible:Not(.not-exported)', rows: ':visible' },
                            footer: true
                        },
                        {
                            extend: 'csv',
                            text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
                            exportOptions: { columns: ':visible:Not(.not-exported)', rows: ':visible' },
                            footer: true
                        },
                        {
                            extend: 'print',
                            text: '<i title="print" class="fa fa-print"></i>',
                            exportOptions: { columns: ':visible:Not(.not-exported)', rows: ':visible' },
                            footer: true
                        },
                        {
                            extend: 'colvis',
                            text: '<i title="column visibility" class="fa fa-eye"></i>',
                            columns: ':gt(0)'
                        }
                    ]
                });
                new $.fn.dataTable.FixedHeader(table_table);
            }

            $('#sample_form').on('submit', function(event) {
                event.preventDefault();
                let url = $('#action').val() == '{{ trans('file.Add') }}' 
                    ? "{{ route('raw_attendances.store') }}" 
                    : "{{ route('raw_attendances.update') }}";

                $.ajax({
                    url: url,
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function(data) {
                        let html = '';
                        if (data.errors) {
                            html = '<div class="alert alert-danger">';
                            for (let count = 0; count < data.errors.length; count++) {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if (data.success) {
                            html = '<div class="alert alert-success">' + data.success + '</div>';
                            if ($('#action').val() == '{{ trans('file.Edit') }}') {
                                setTimeout(function() {
                                    $('#formModal').modal('hide');
                                    $('#raw_attendance-table').DataTable().ajax.reload();
                                }, 2000);
                            } else {
                                $('#sample_form')[0].reset();
                                $('select').selectpicker('refresh');
                                $('#raw_attendance-table').DataTable().ajax.reload();
                            }
                        }
                        $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                    }
                });
            });

            $(document).on('click', '.edit', function() {
                let id = $(this).attr('id');
                $('#form_result').html('');
                $.ajax({
                    url: "{{ url('timesheet/raw_attendances') }}/" + id,
                    dataType: "json",
                    success: function(html) {
                        $('#company_add_id').selectpicker('val', html.data.employee.company_id).attr('disabled', true);
                        
                        let all_departments = '';
                        $.each(html.departments, function(index, value) {
                            all_departments += '<option value=' + value['id'] + '>' + value['department_name'] + '</option>';
                        });
                        $('#department_add_id').empty().append(all_departments).selectpicker('refresh').selectpicker('val', html.data.employee.department_id).attr('disabled', true);

                        let all_employees = '';
                        $.each(html.employees, function(index, value) {
                            all_employees += '<option value=' + value['id'] + '>' + value['first_name'] + ' ' + value['last_name'] + '</option>';
                        });
                        $('#employee_add_id').empty().append(all_employees).selectpicker('refresh').selectpicker('val', html.data.employee_id).attr('disabled', true);

                        $('#attendance_date').val(html.data.attendance_date).attr('disabled', true);
                        $('#attendance_time').val(html.data.formatted_attendance_time);
                        $('#hidden_id').val(html.data.id);
                        
                        $('.modal-title').text('{{ trans('file.Edit') }}');
                        $('#action_button').val('{{ trans('file.Edit') }}');
                        $('#action').val('{{ trans('file.Edit') }}');
                        $('#formModal').modal('show');
                    }
                });
            });

            $('#filter_form').on('submit', function(e) {
                e.preventDefault();
                $('#raw_attendance-table').DataTable().destroy();
                fill_datatable($('#company_id').val(), $('#department_id').val(), $('#month_year').val());
            });

            $('.dynamic, .dynamic_add').change(function() {
                let value = $(this).val();
                let targetId = $(this).attr('id') === 'company_id' ? '#department_id' : '#department_add_id';
                if (value !== '') {
                    $.ajax({
                        url: "{{ route('dynamic_department') }}",
                        method: "POST",
                        data: { value: value, _token: "{{ csrf_token() }}", dependent: 'department_name' },
                        success: function(result) {
                            $(targetId).html(result).selectpicker('refresh');
                        }
                    });
                }
            });

            $('.employee').change(function() {
                let value = $(this).val();
                if (value !== '') {
                    $.ajax({
                        url: "{{ route('dynamic_employee_department') }}",
                        method: "POST",
                        data: { value: value, _token: "{{ csrf_token() }}", first_name: 'first_name', last_name: 'last_name' },
                        success: function(result) {
                            $('#employee_add_id').html(result).selectpicker('refresh');
                        }
                    });
                }
            });

            $('.month_year').datepicker({
                format: "MM-yyyy",
                startView: "months",
                minViewMode: 1,
                autoclose: true,
            }).datepicker("setDate", new Date());

            $('#btn-process').click(function() {
                $.ajax({
                    url: "{{ route('raw_attendances.process') }}",
                    method: "POST",
                    data: { date: $('#month_year').val(), company_id: $('#company_id').val(), _token: "{{ csrf_token() }}" },
                    success: function(result) {
                        let html = '<div class="alert alert-success">' + result['success'] + '</div>';
                        $('#form_result_home').html(html).slideDown(300).delay(2000).slideUp(300);
                    }
                });
            });

            $('#btn-add').click(function() {
                $('.modal-title').text('{{ __('Add Raw Attendance') }}');
                $('#action_button').val('{{ trans('file.Add') }}');
                $('#action').val('{{ trans('file.Add') }}');
                $('#sample_form')[0].reset();
                $('#company_add_id, #department_add_id, #employee_add_id, #attendance_date').attr('disabled', false);
                $('select').selectpicker('refresh');
                $('#formModal').modal('show');
            });

        })(jQuery);
    </script>
@endsection