@extends('layouts.app')
@section('title')
Add Delivery
@endsection
@push('styles')
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="../assets/plugins/chosen-select/bootstrap-chosen.css" rel="stylesheet">
<link href="../assets/custom.css">
@endpush

@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Add Delivery</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        @can('add-materialdelivery')
        <form action="" method="post" role="form" id="insert_form" class="">
            <div class="row mb-2">
                <label class="col-md-1  ">Name : <span style="color:red;">*</span></label>
                <div class="col-md-5"><input type="text" name="name" id="name" class="form-control" required></div>
                <label class="col-md-1  ">Delivery Date : <span style="color:red;">*</span></label>
                <div class="col-md-5">
                        <input type="text" class="form-control" id="deliverydate" name="deliverydate" required>
                </div>
            </div>

            <div class="row mb-2">
                <label class="col-md-1  ">Owner Detail : <span style="color:red;">*</span></label>
                <div class="col-md-5">
                    <textarea name="ownerdetail" id="ownerdetail" cols="auto" rows="5" class="form-control"></textarea>
                </div>
                <label class="col-md-1  ">Note : </label>
                <div class="col-md-5">
                    <textarea name="sendnote" id="sendnote" cols="auto" rows="5" class="form-control"></textarea>
                </div>
            </div>
            <div class="row">

                <span id="error"></span>

                <table class="table table-bordered w-100 nowrap" id="item_table">
                    <thead>
                        <tr>
                            <th>Material <span style="color:red;">*</span></th>
                            <th>Quantity <span style="color:red;">*</span></th>
                            <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="fa fa-plus"></span></button></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                                <td>
                                    <select name="material[]" class="form-control item_name chosen-select" >
                                        <option value="">Select Material</option>
                                        @foreach ($material as $item)
                                            <option value="{{$item->id}}">{{$item->material_code}} {{$item->material_name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="text" name="quantity[]" pattern="^[0-9,]*$" class="form-control item_quantity"  /></td>
                                <td></td>
                        </tr>
                    </tbody>
                </table>

            </div>


            <div class="row text-center">
                    <div class="">
                        <a href="{{route('materialdelivery')}}" class="btn btn-default ">Cancel</a>
                        <button type="submit" name="submit" class="btn btn-info">Confirm</button>
                    </div>
            </div>

        </form>
        @endcan
    </div>
</div>
<!-- END panel -->


@endsection

@push('scripts')
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="../assets/plugins/chosen-select/chosen.jquery.js"></script>
<script>
$(document).ready(function(){
    $('.chosen-select').chosen({width: "100%",display_disabled_options:false});

    var curretdate = new Date();
    curretdate.setDate(curretdate.getDate());
    var mem = $('#deliverydate').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true,
        format: "yyyy-mm-dd",
        startDate:curretdate
    });

    curretdate = new Date();
    mem.datepicker('setDate', curretdate );

    $(document).on('click', '.add', function(){
        var html = '';
        html += '<tr>';
        html += '<td><select name="material[]" class="form-control item_name chosen-select" onchange="HandleOptions()" tabindex="2"><option value="">Select Material</option>@foreach ($material as $item) <option value="{{$item->id}}">{{$item->material_code}} {{$item->material_name}}</option> @endforeach </select></td>';
        html += '<td><input type="text" name="quantity[]" pattern="^[0-9,]*$" min="0" max="214748360" class="form-control item_quantity"  /></td>';
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
        $('.chosen-select').chosen({width: "100%",display_disabled_options:false});
        HandleOptions();
    });

    $(document).on('click', '.remove', function(event){
        $(this).closest('tr').remove();
    });
    $(document).on('keypress', '.item_quantity', function(){
        if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
            event.preventDefault(); //stop character from entering input
        }
    });
    $(document).on('change', '.item_quantity', function (event) {
        if($(this).val()){
            var x =  ('' + parseInt($(this).val())).replace(/(\d)(?=(?:\d{3})+(?:\.|$))|(\.\d\d?)\d*$/g,function(m, s1, s2){
                return s2 || (s1 + ',');
            }
            );
            $(this).val(x);
        }

    });

    $('#insert_form').on('submit', function(event){
        event.preventDefault();
        var error = '';
        var count = 1;
        $('.item_name').each(function(){

            if($(this).val() == '')
            {
                error += "<p>Select Material at Row "+count+"</p>";
                return false;
            }
            count = count + 1;
        });
        count = 1;
        $('.item_quantity').each(function(){

            if($(this).val() == '')
            {
                error += "<p>Enter Item Quantity at Row "+count+"</p>";
                return false;
            }
            count = count + 1;
        });

        var form_data = $(this).serialize();
        if(error == ''){
            Swal.fire({
                            title: 'Please Wait..!',
                            text: 'Is working..',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            allowEnterKey: false,
                            didOpen: () => {
                                swal.showLoading()
                            }
                        })
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url:"{{route('submitadddelivery')}}",
                method:"POST",
                data:form_data,
                success:function(data){
                    Swal.fire({
                    title: 'Succes?',
                    text: 'Add new Delivery: '+$('#name').val(),
                    icon: 'success',
                    showCancelButton: false,
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.value) {
                            window.location="{{route('materialdelivery')}}";
                        }
                    })
                },
                error:function(response){
                    Swal.fire(
                        'Error!!',
                        'Contract Admin',
                        'error'
                        )
                }
            });
        }else{
            $('#error').html('<div class="alert alert-danger">'+error+'</div>');
        }
    });



});

function HandleOptions() {
    $('option').removeAttr('disabled'); //reset all the options to be available
    $.each($('select.item_name:hidden'), function() { //loop from top to bottom and disable the options one by one.
        var value = $(this).val();
        if(value != '' && value != null){
            $('option[value="'+value+'"]:not(:selected)').attr('disabled','disabled');
        }
    });
    $('select').trigger("chosen:updated");
}
</script>
@endpush