@extends('layouts.promoter')
@section('content')

<form method="POST" action="{{ route("promoter.promoter-task-lists.updateDataDetails", $promoterTaskList->id) }}" id="promoterTaskListForm" enctype="multipart/form-data">
    @method('PUT')
    @csrf
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    Update {{ trans('cruds.promoterTaskList.title_singular') }} Detail
                </div>

                <div class="card-body">
                    <div class="row">
                        {{-- <div class="col-12 col-md-6">
                           <div id="map" style="width: 100%; height: 500px;"></div>
                           <input type="hidden" name="lat" id="lat" value="{{ old('lat', $storeAudit->lat) }}" />
                           <input type="hidden" name="lng" id="lng" value="{{ old('lng', $storeAudit->lng) }}" />
                        </div> --}}
                        <div class="col-12 col-md-12">
                            <table class="table table-bordered table-striped">
                                <tbody>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.id') }}
                                        </th>
                                        <td>
                                            {{ $promoterTaskList->id }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.date_from') }}
                                        </th>
                                        <td>
                                            {{ $promoterTaskList->date_from }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.date_to') }}
                                        </th>
                                        <td>
                                            {{ $promoterTaskList->date_to }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.available_store') }}
                                        </th>
                                        <td>
                                            {{ $promoterTaskList->availableStore ? $promoterTaskList->availableStore->store_name : '' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.state') }}
                                        </th>
                                        <td>
                                            {{ $promoterTaskList->state ? $promoterTaskList->state->province_name : '' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.city') }}
                                        </th>
                                        <td>
                                            {{ $promoterTaskList->city ? $promoterTaskList->city->city_name : '' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            {{ trans('cruds.promoterTaskList.fields.status') }}
                                        </th>
                                        <td>
                                            {{ \App\Models\PromoterTaskList::STATUS_SELECT[$promoterTaskList->status] ?? '' }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="form-group row">
                        {{-- <div class="col-12 col-md-4">
                            <label class="required" for="state_id">{{ trans('cruds.storeAudit.fields.state') }}</label>
                            <select class="form-control select2 {{ $errors->has('state_id') ? 'is-invalid' : '' }}" name="state_id" id="state_id" required>
                                @foreach($states as $id => $entry)
                                    <option value="{{ $id }}" {{ (old('state_id') ? old('state_id') : $storeAudit->state_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                @endforeach
                            </select>
                            @if($errors->has('state_id'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('state_id') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.storeAudit.fields.state_helper') }}</span>
                        </div>
                        <div class="col-12 col-md-4">
                            <label for="city_id">{{ trans('cruds.storeAudit.fields.city') }}</label>
                            <select class="form-control select2 {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id" id="city_id">
                                @foreach($cities as $id => $entry)
                                    <option value="{{ $id }}" {{ (old('city_id') ? old('city_id') : $storeAudit->city_id ?? '') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                @endforeach
                            </select>
                            @if($errors->has('city_id'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('city_id') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.storeAudit.fields.city_helper') }}</span>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    Store Location
                </div>
                <div class="card-body">
                    <iframe
                      width="100%"
                      height="390"
                      id="google-iframe"
                      loading="lazy"
                      frameborder="0" style="border:0"
                      src="https://maps.google.com/maps?q=Sans+Wellness+Taman+Sutera&t=&z=13&ie=UTF8&iwloc=&output=embed" allowfullscreen>
                    </iframe>
                    <input type="hidden" name="google_map_parameter" id="google_map_parameter" value="" />
                </div>
            </div>
        </div> --}}
    </div>

    @if (request()->get('clockIn') == 1)
        <input type="hidden" name="clockIn" value="1">
        <div class="card">
            <div class="card-header">
                {{ trans('global.edit') }} {{ trans('cruds.promoterTaskList.title_singular') }} Record (Products)
            </div>
            <div class="card-body">
                <div class="form-group">
                    <div class="table-responsive">
                        <table class="table table-bordered vertical-responsive promoterTaskList-responsive-dataTable">
                            <thead>
                                <th>Name</th>
                                <th>Opening Qty</th>
                                <th>Sales Qty</th>
                                <th>Balance Qty</th>
                             </thead>    
                            <tbody>
                                @forelse ($taskListRecords as $key => $taskListRecord)
                                    <tr>
                                        <td data-name="Name">{{ $taskListRecord->product_name }}</td>
                                        <td data-t-qty="Opening Qty" data-t-qty-value="0">
                                            <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$taskListRecord->id.'.t_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $taskListRecord->id }}][t_qty]" id="promoterTaskListProducts.{{ $taskListRecord->id }}.t_qty" value="{{ old('promoterTaskListProducts.'.$taskListRecord->id.'.t_qty', 0) }}">
                                            @error('promoterTaskListProducts.'.$key.'.t_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                        <td data-o-qty="Sales Qty" data-o-qty-value="0">
                                            <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$taskListRecord->id.'.o_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $taskListRecord->id }}][o_qty]" id="promoterTaskListProducts.{{ $taskListRecord->id }}.o_qty" value="{{ old('promoterTaskListProducts.'.$taskListRecord->id.'.o_qty', 0) }}">
                                            @error('promoterTaskListProducts.'.$taskListRecord->id.'.o_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                        <td data-l-qty="Balance Qty" data-l-qty-value="0">
                                            <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$taskListRecord->id.'.l_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $taskListRecord->id }}][l_qty]" id="promoterTaskListProducts.{{ $taskListRecord->id }}.l_qty" value="{{ old('promoterTaskListProducts.'.$taskListRecord->id.'.l_qty', 0) }}">
                                            @error('promoterTaskListProducts.'.$taskListRecord->id.'.l_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" align="center">No data available in table</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                {{ trans('global.edit') }} {{ trans('cruds.promoterTaskList.title_singular') }} Record (Gifts)
            </div>
            <div class="card-body">
                <div class="form-group">
                    <div class="table-responsive">
                        <table class="table table-bordered vertical-responsive promoterTaskList-responsive-dataTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Opening Qty</th>
                                    <th>Sales Qty</th>
                                    <th>Balance Qty</th>
                                </tr>
                             </thead>    
                            <tbody>
                                @forelse ($taskListRecordGifts as $key => $taskListRecordGift)
                                    <tr>
                                        <td data-name="Name">{{ $taskListRecordGift->product_name }}</td>
                                        <td data-t-qty="Opening Qty" data-t-qty-value="{{ $taskListRecordGift->t_qty }}">
                                            <span id="promoter-task-list-gifts-{{ $taskListRecordGift->id }}-t_qty">{{ $taskListRecordGift->t_qty }}</span>
                                        </td>
                                        <td data-o-qty="Sales Qty" data-o-qty-value="{{ $taskListRecordGift->o_qty }}">
                                            <input class="form-control {{ $errors->has('promoter-task-list-gifts.'.$taskListRecordGift->id.'.o_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoter-task-list-gifts[{{ $taskListRecordGift->id }}][o_qty]" id="promoter-task-list-gifts.{{ $taskListRecordGift->id }}.o_qty" value="{{ old('promoter-task-list-gifts.'.$taskListRecordGift->id.'.o_qty', 0) }}">
                                            @error('promoter-task-list-gifts.'.$key.'.o_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                        <td data-l-qty="Balance Qty" data-l-qty-value="{{ $taskListRecordGift->l_qty }}">
                                            <input class="form-control {{ $errors->has('promoter-task-list-gifts.'.$taskListRecordGift->id.'.l_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoter-task-list-gifts[{{ $taskListRecordGift->id }}][l_qty]" id="promoter-task-list-gifts.{{ $taskListRecordGift->id }}.l_qty" value="{{ old('promoter-task-list-gifts.'.$taskListRecordGift->id.'.l_qty', $taskListRecordGift->l_qty) }}">
                                            @error('promoter-task-list-gifts.'.$key.'.l_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" align="center">No product gift available in table</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @else
        <input type="hidden" name="clockOut" value="1">
        <div class="card">
            <div class="card-header">
                {{ trans('global.edit') }} {{ trans('cruds.promoterTaskList.title_singular') }} Record (Products)
            </div>
            <div class="card-body">
                <div class="form-group">
                    <div class="table-responsive">
                        <table class="table table-bordered vertical-responsive promoterTaskList-responsive-dataTable">
                            <thead>
                                <th>Name</th>
                                <th>Opening Qty</th>
                                <th>Sales Qty</th>
                                <th>Balance Qty</th>
                             </thead>    
                            <tbody>
                                @forelse ($taskListRecords as $key => $taskListRecord)
                                    <tr>
                                        <td data-name="Name">{{ $taskListRecord->product_name }}</td>
                                        <td data-t-qty="Opening Qty" data-t-qty-value="{{ $taskListRecord->o_qty }}">
                                            <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$taskListRecord->id.'.t_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $taskListRecord->id }}][t_qty]" id="promoterTaskListProducts.{{ $taskListRecord->id }}.t_qty" value="{{ old('promoterTaskListProducts.'.$taskListRecord->id.'.t_qty', $taskListRecord->o_qty) }}">
                                            @error('promoterTaskListProducts.'.$key.'.t_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                        <td data-o-qty="Sales Qty" data-o-qty-value="{{ $taskListRecord->s_qty }}">
                                            <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$taskListRecord->id.'.o_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $taskListRecord->id }}][o_qty]" id="promoterTaskListProducts.{{ $taskListRecord->id }}.o_qty" value="{{ old('promoterTaskListProducts.'.$taskListRecord->id.'.o_qty', $taskListRecord->s_qty) }}">
                                            @error('promoterTaskListProducts.'.$taskListRecord->id.'.o_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                        <td data-l-qty="Balance Qty" data-l-qty-value="{{ $taskListRecord->b_qty }}">
                                            <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$taskListRecord->id.'.l_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $taskListRecord->id }}][l_qty]" id="promoterTaskListProducts.{{ $taskListRecord->id }}.l_qty" value="{{ old('promoterTaskListProducts.'.$taskListRecord->id.'.l_qty', $taskListRecord->b_qty) }}">
                                            @error('promoterTaskListProducts.'.$taskListRecord->id.'.l_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" align="center">No data available in table</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                {{ trans('global.edit') }} {{ trans('cruds.promoterTaskList.title_singular') }} Record (Gifts)
            </div>
            <div class="card-body">
                <div class="form-group">
                    <div class="table-responsive">
                        <table class="table table-bordered vertical-responsive promoterTaskList-responsive-dataTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Opening Qty</th>
                                    <th>Sales Qty</th>
                                    <th>Balance Qty</th>
                                </tr>
                             </thead>    
                            <tbody>
                                @forelse ($taskListRecordGifts as $key => $taskListRecordGift)
                                    <tr>
                                        <td data-name="Name">{{ $taskListRecordGift->product_name }}</td>
                                        <td data-t-qty="Opening Qty" data-t-qty-value="{{ $taskListRecordGift->t_qty }}">
                                            <span id="promoter-task-list-gifts-{{ $taskListRecordGift->id }}-t_qty">{{ $taskListRecordGift->t_qty }}</span>
                                        </td>
                                        <td data-o-qty="Sales Qty" data-o-qty-value="{{ $taskListRecordGift->o_qty }}">
                                            <input class="form-control {{ $errors->has('promoter-task-list-gifts.'.$taskListRecordGift->id.'.o_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoter-task-list-gifts[{{ $taskListRecordGift->id }}][o_qty]" id="promoter-task-list-gifts.{{ $taskListRecordGift->id }}.o_qty" value="{{ old('promoter-task-list-gifts.'.$taskListRecordGift->id.'.o_qty', 0) }}">
                                            @error('promoter-task-list-gifts.'.$key.'.o_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                        <td data-l-qty="Balance Qty" data-l-qty-value="{{ $taskListRecordGift->l_qty }}">
                                            <input class="form-control {{ $errors->has('promoter-task-list-gifts.'.$taskListRecordGift->id.'.l_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoter-task-list-gifts[{{ $taskListRecordGift->id }}][l_qty]" id="promoter-task-list-gifts.{{ $taskListRecordGift->id }}.l_qty" value="{{ old('promoter-task-list-gifts.'.$taskListRecordGift->id.'.l_qty', $taskListRecordGift->l_qty) }}">
                                            @error('promoter-task-list-gifts.'.$key.'.l_qty')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" align="center">No product gift available in table</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
    

    <div class="card">
        <div class="card-header">
            Upload Images
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="upload_images">{{ trans('cruds.promoterTaskList.fields.upload_images') }}</label>
                <div class="needsclick dropzone {{ $errors->has('upload_images') ? 'is-invalid' : '' }}" id="upload-images-dropzone">
                </div>
                @if($errors->has('upload_images'))
                    <div class="invalid-feedback">
                        {{ $errors->first('upload_images') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.upload_images_helper') }}</span>
                <div id="remove-dropzone-images"></div>
            </div>
            <div class="form-group">
                {{-- <button class="btn btn-danger" type="submit">
                    Update
                </button> --}}
                <button class="btn btn-success" type="submit">
                    Submit
                </button>
            </div>
        </div>
    </div>
</form>


@endsection

@section('scripts')
<script>
var acceptedFileLength = 0;

Dropzone.options.uploadImagesDropzone = {
    url: '{{ route('promoter.promoter-task-list-pictures.uploadImages') }}',
    maxFilesize: 2, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif',
    addRemoveLinks: true,
    maxFiles: 100,
    parallelUploads: 100,
    uploadMultiple: true,
    autoProcessQueue: false,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    init: function () {
        myDropzone = this;

        @if(isset($promoterTaskList) && $promoterTaskList->promoterTaskListPictures)
            $.ajax({
                url: '{{ route('promoter.promoter-task-list-pictures.getDropZoneImage', $promoterTaskList) }}',
                type: 'GET',
                data: {request: 'fetch'},
                dataType: 'json',
                success: function(response){
                    $.each(response, function(key,value) {
                        var mockFile = { name: value.name, size: value.size, id: value.id};

                        myDropzone.emit("addedfile", mockFile);
                        myDropzone.emit("thumbnail", mockFile, value.path)
                        {
                            $('[data-dz-thumbnail]').css('height', '120');
                            $('[data-dz-thumbnail]').css('width', '120');
                            $('[data-dz-thumbnail]').css('object-fit', 'cover');
                        };
                        myDropzone.emit("complete", mockFile);
                        myDropzone.emit("success", mockFile);
                        $(mockFile.previewElement).attr('data-id', value.id); //add data-id to preview div
                        myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
                        myDropzone.files.push(mockFile);
                        acceptedFileLength++;
                    });
                }
            });
        @endif

        this.on("addedfile", function (file) {
        });

        this.on("addedfiles", function (file) {
        });

        document.querySelector("button[type=submit]").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            if(myDropzone.getQueuedFiles().length === 0)
            {
                $('#promoterTaskListForm').submit();
            }
            else
            {
                myDropzone.processQueue();
            }
        });

        this.on("successmultiple", function (file, response) {
            $(response).each(function(key, item){
                $('form').append('<input type="hidden" name="upload_picture[' + acceptedFileLength + ']" value="' + item.name + '">')
                acceptedFileLength++;
            });

            $('#promoterTaskListForm').submit();
        });

        this.on("removedfile", function(file){
            let id = $(file.previewElement).data('id');
            $("#remove-dropzone-images").append('<input type="hidden" name="remove_picture[]" value="' + id + '">');
            file.previewElement.remove();
            if (file.status !== 'error') {
            }
            acceptedFileLength--;
            this.options.maxFiles = this.options.maxFiles - 1
        });
      
        this.on("errormultiple", function(file, message){
            console.log(message);
        })
    },        
}
    $(function(){
        $("#state_id").change(function(){
            $.ajax({
                url: "{{ route('promoter.promoter-task-lists.get_by_state') }}?state_id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#city_id').html(data.html);
                    $('#available_store_id').html(data.availableStoresHTML);
                }
            });
        });

        $("#city_id").change(function(){
            $.ajax({
                url: "{{ route('promoter.promoter-task-lists.get_by_city') }}?city_id=" + $(this).val(),
                data: { state_id: $('#state_id').val(), city_id : $(this).val()},
                method: 'GET',
                success: function(data) {
                    $('#available_store_id').html(data.html);
                }
            });
        });

        $("#available_store_id").change(function(e){
            if(!$(this).val())
            {
                $("#lat").val('');
                $("#lng").val('');
            }
            else
            {
                $.ajax({
                    url: "{{ route('available-stores.google-map.search') }}?available_store_id=" + $(this).val(),
                    method: 'GET',
                    success: function(data) {
                        $('#google-iframe').attr('src', data.url);
                    }
                });
            }
        });

        $("#submit-btn").on('click', function() {
            Swal.fire({
                title: 'Are you sure want to submit the changes?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Submit it!'
            }).then((result) => {
              if (result.isConfirmed) {
                    let url = '{{ route("promoter.promoter-task-lists.submitConfirmation", ":id") }}';
                    url = url.replace(':id', {{ $promoterTaskList->id }});

                    $.ajax({
                        url: url,
                        method: 'PUT',
                        data: {
                            "_token": "{{ csrf_token() }}",
                        },
                        success: function(data) {
                            Swal.fire(
                                'Well Done!',
                                data.message,
                                'success'
                            )

                            window.location.href = "{{ route('promoter.promoter-task-lists.index') }}";

                        },
                        error: function(res) {
                            console.log(res);
                        }
                    });
              }
            })
        });

        $("[id$='t_qty']").change(function(e) {
            let id = $(this).attr('id');

            let t_qty = Number.parseInt($(this).val());
            let o_qty = Number.parseInt($(this).parent().next('td').find('input').val());
            let l_qty = t_qty - o_qty;

            $(this).parent().attr('data-t-qty-value', $(this).val());

            $(this).parent().next('td').next('td').attr('data-l-qty-value', l_qty);
            $(this).parent().next('td').next('td').find('input').val(l_qty);

            document.getElementById(id).setAttribute('value', $(this).val());
        });

        $("[id$='o_qty']").keyup(function(e){
            let t_qty = Number.parseInt($(this).parent().prev('td').data('t-qty-value'));
            let o_qty = Number.parseInt($(this).val());
            let l_qty = Number.parseInt($(this).parent().next('td').data('l-qty-value'));

            $(this).parent().attr('data-o-qty-value', $(this).val());

            if(o_qty > t_qty)
            {
                Swal.fire({
                    icon: 'error',
                    title: 'The out quantity cannot exceed the take quantity!',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });

                $(this).val(t_qty);

                $(this).parent().next('td').find('input').val(0);
            }
            else
            {
                if(!isNaN(o_qty))
                {
                    l_qty = t_qty - o_qty;

                    $(this).parent().next('td').find('input').val(l_qty);
                }
            }
        });

        $("[id$='l_qty']").keyup(function(e){
            let t_qty = Number.parseInt($(this).parent().prev('td').prev('td').data('t-qty-value'));
            let o_qty = Number.parseInt($(this).parent().prev('td').data('o-qty-value'));
            let cur_l_qty = Number.parseInt($(this).val());

            $(this).parent().attr('data-l-qty-value', $(this).val());

            if((t_qty - o_qty) < cur_l_qty)
            {
                Swal.fire({
                    icon: 'error',
                    title: 'The balance quantity cannot exceed the left quantity!',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });

                $(this).val((t_qty - o_qty));
            }
        });

        let getLocationPromise = new Promise((resolve, reject) => {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {

                    // console.log(position.coords.latitude, position.coords.longitude) //test...

                    let lat = position.coords.latitude
                    let long = position.coords.longitude

                    // console.log("LATLONG1: ", lat, long) //test...

                    // Resolving the values which I need
                    resolve({latitude: lat, 
                            longitude: long})
                })

            } else {
                reject("your browser doesn't support geolocation API")
            }
        });

        function enableCamera(constraints) {
            navigator.mediaDevices.getUserMedia(constraints)
                .then((stream) => {
                promoterTaskListPlayer.srcObject = stream;
            })
            .catch(function(error){
                if (error.name === 'ConstraintNotSatisfiedError') {
                    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
                        constraints.video.height.exact + ' px is not supported by your device.');
                } else if (error.name === 'PermissionDeniedError') {
                    errorMsg('Permissions have not been granted to use your camera and ' +
                      'microphone, you need to allow the page access to your devices in ' +
                      'order for the demo to work.');
                }
                errorMsg('getUserMedia error: ' + error.name, error);
            });
        }

        function clockInOut(id) {
            (async () => {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Please ensure you are within the available store!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#2eb85c',
                    cancelButtonColor: '#e03232',
                    confirmButtonText: 'Yes!'
                }).then((result) => {
                    if(result.isConfirmed)
                    {
                        let curDate = moment().format("YYYY-MM-DD");

                        Swal.fire({
                            title: 'Take a store outlet selfie',
                            html: '<video id=\"promoterTaskListPlayer\" width=\"100%\" autoplay></video><canvas id=\"promoterTaskListCanvas\" width=440 height=300></canvas><button id="capture" class="btn btn-info mr-2">Snap</button><button id="recapture" class="btn btn-warning d-none">Snap Again</button>',
                            showCancelButton:true,
                            showConfirmButton:true,
                            allowOutsideClick:true,
                            backdrop:true,
                            cancelButtonText: 'Cancel',
                            confirmButtonText: 'Submit',
                            willOpen : () => {
                                const promoterTaskListPlayer = document.getElementById('promoterTaskListPlayer');
                                const promoterTaskListCanvas = document.getElementById('promoterTaskListCanvas');
                                const context = promoterTaskListCanvas.getContext('2d');
                                const captureButton = document.getElementById('capture');
                                const reCaptureButton = document.getElementById('recapture');

                                const constraints = {
                                    video: true,
                                };

                                captureButton.addEventListener('click', () => {
                                    // Draw the video frame to the canvas.
                                    context.drawImage(promoterTaskListPlayer, 0, 0, promoterTaskListCanvas.width, promoterTaskListCanvas.height);

                                    reCaptureButton.classList.remove("d-none");
                                    reCaptureButton.classList.add("d-inline-block");

                                    let blob = promoterTaskListCanvas.toDataURL('image/png')
                                    formData.append("image", blob);
                                    formData.append("_token", $('meta[name="csrf-token"]').attr('content'));

                                    // Stop all video streams.
                                    promoterTaskListPlayer.srcObject.getVideoTracks().forEach(track => track.stop());
                                });

                                reCaptureButton.addEventListener('click', () => {
                                    reCaptureButton.classList.add("d-none");
                                    reCaptureButton.classList.remove("d-inline-block");
                                    context.clearRect(0, 0, promoterTaskListCanvas.width, promoterTaskListCanvas.height);
                                    enableCamera(constraints);
                                });

                                enableCamera(constraints);
                            }
                        }).then((result) => {
                            if(result.isConfirmed)
                            {
                                getLocationPromise.then((location) => {
                                    let lat = location.latitude;
                                    let long = location.longitude;

                                    formData.append('promoterTaskList', id);
                                    formData.append('lat', lat);
                                    formData.append('long', long);
                                    formData.append('curDate', curDate);

                                    $.ajaxSetup({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        }
                                    });

                                    $.ajax({
                                        method: "POST",
                                        processData: false,
                                        contentType: false,
                                        url: "{{ route('promoter.time-entries.updateCurrent') }}",
                                        data: formData,
                                        success: (data) => {
                                            switchWorkStatus(data);
                                            window.location.reload();
                                        },
                                        error: (res) => console.log(res)
                                    });
                                });
                            }
                            else if(result.isDismissed)
                            {
                                const promoterTaskListPlayer = document.getElementById('promoterTaskListPlayer');

                                // DETECT CAMERA IS ACTIVATED OR NOT
                                if(promoterTaskListPlayer.srcObject.active)
                                {
                                    // Stop all video streams.
                                    promoterTaskListPlayer.srcObject.getVideoTracks().forEach(track => track.stop());
                                }
                            }
                        });
                    }
                });
            })()
        }
    });
</script>

@endsection