@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="">
            <input type="hidden" name="editid" id="editid" value="{{$editid}}">
                    <div class="form-group  row mb-2">
                        <label class="col-sm-1 col-form-label addmateriallabel">Name : </label>
                        <div class="col-sm-5"><input type="text" name="name" id="name" class="form-control" value="{{$materialdelivery->name}}" required></div>
                        <label class="col-sm-1 col-form-label addmateriallabel">Delivery Date : </label>
                        <div class="col-sm-5" >

                            <input type="text" class="form-control" id="deliverydate" name="deliverydate" value="{{$materialdelivery->delivery_date}}" required>

                        </div>
                    </div>
                    <div class="form-group row mb-2">
                            <label class="col-sm-1 col-form-label addmateriallabel">Owner Detail : </label>
                            <div class="col-sm-5">
                                <textarea name="ownerdetail" id="ownerdetail" cols="30" rows="5" class="form-control">{{$materialdelivery->owner_detail}}</textarea>
                            </div>
                            <label class="col-sm-1 col-form-label addmateriallabel">Note : </label>
                            <div class="col-sm-5">
                                <textarea name="sendnote" id="sendnote" cols="30" rows="5" class="form-control">{{$materialdelivery->delivery_note}}</textarea>
                            </div>
                    </div>
                    <div class="form-group row">
                        <span id="error"></span>

                        <table class="table table-bordered" id="item_table">
                                <tr>
                                    <th>Material</th>
                                    <th>Quantity</th>
                                    <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="fa fa-plus"></span></button></th>
                                </tr>
                                @foreach ($ordermaterial as $main)
                                <tr>
                                        <td>
                                            <select name="material[]" class="form-control item_name chosen-select" tabindex="2">
                                                <option value="">Select Material</option>
                                                @foreach ($material as $item)
                                                <option value="{{$item->id}}"{{$main->material_id == $item->id ? 'selected' : null}}>{{$item->material_name}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><input type="text" name="quantity[]" pattern="^[0-9,]*$" min="0" max="214748360" class="form-control item_quantity"   value="{{$main->material_send_amount}}"/></td>
                                        <td></td>
                                </tr>
                                @endforeach

                        </table>
                    </div>
                    <div class="form-group row">
                            <div class="col-sm-5"></div>
                            <a href="{{route('materialdelivery')}}" class="btn btn-default col-sm-1" >Cancel</a>
                            <button type="submit" name="submit" class="btn btn-info col-sm-1">Confirm</button>
                    </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="fa fa-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('submitreorderdelivery')}}",
                method:"POST",
                data:form_data,
                success:function(data){

                    Swal.fire({
                    title: 'Succes?',
                    text: 'Add new Delivery: '+$('#name').val(),
                    icon: 'success',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'Go back.'
                    }).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