@extends('layouts.master')

@section('page_title', 'Order Assign')
@section('title', 'Order Assign')
@section('main_item', 'Orders')
@section('sub_item', 'Manage Your Orders')
@section('content')

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-4">
                        <h3 id="txt_unsign_orders">{{ $unsign_orders }} Oders available</h3>
                        <input type="text" id="unsign_orders" value="{{ $unsign_orders }}" hidden>
                    </div>
                </div><br>
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="">Assign From*</label>
                            <input class="form-control" type="number" value="1" id="asign_to" readonly>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="">Assign To*</label>
                            <input class="form-control" type="number" id="asign_from">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label style="font-weight: bold" for="unit">Assignee*</label>
                            <select class="form-control select2" id="asign_user" name="">
                                <option value="">Select</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->username }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8"></div>
                    <div class="col-md-2">
                        <button class="btn btn-primary" id="btn_asign_user">Save</button>
                    </div>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            //save asigns
            $(document).on('click', '#btn_asign_user', function() {
                var asign_to = $('#asign_to').val();
                var asign_from = $('#asign_from').val();
                var select_user = $('#asign_user').val();
                if (parseFloat($('unsign_orders').val()) != 0) {
                    //check if not empay
                    if (asign_to != '' && select_user != '') {
                        //check input values
                        if (parseFloat(asign_from) >= parseFloat(asign_to)) {
                            $.ajax({
                                type: "post",
                                url: '/order/asign/user',
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    asign_from: asign_from,
                                    asign_to: asign_to,
                                    select_user: select_user
                                },
                                success: function(response) {
                                    $.toast({
                                        heading: 'Success',
                                        text: response.msg,
                                        position: 'top-right',
                                        bgColor: '#1ecab8',
                                        // icon: 'success',
                                        showHideTransition: 'fade',
                                        loaderBg: '#ecf0f1'
                                    });

                                    $('#txt_unsign_orders').text(response.data +
                                        " Oders available");
                                    $('#unsign_orders').val(response.data);
                                }
                            });
                        } else {
                            $.toast({
                                heading: 'Error',
                                text: "Input values incorrect..!",
                                position: 'top-right',
                                bgColor: '#b30000',
                                icon: 'error',
                                showHideTransition: 'fade',
                                loaderBg: '#ecf0f1'
                            });
                        }
                    } else {
                        $.toast({
                            heading: 'Error',
                            text: "Fill all required fields..!",
                            position: 'top-right',
                            bgColor: '#b30000',
                            icon: 'error',
                            showHideTransition: 'fade',
                            loaderBg: '#ecf0f1'
                        });
                    }
                } else {
                    $.toast({
                        heading: 'Error',
                        text: "No pending orders found..!",
                        position: 'top-right',
                        bgColor: '#b30000',
                        icon: 'error',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                }
            });
        });
        $(document).ready(function() {
            let clicks = 0;
            $('#btn_asign_user').click(function() {
                clicks++;
                if (clicks === 2) {
                    $(this).prop('disabled', true);
                }

            });
        });
        setTimeout(function() {
            $('#btn_asign_user').prop('disabled', false);
        }, 10000);
    </script>
@endsection