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

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

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        @can('add-statement')
        <form action="" method="post" role="form" id="insert_form" enctype="multipart/form-data">
            <div class="row">
                <div class="col-md-6">
                    <div class="row mb-2">
                        <label class="col-2  text-bold">Job Type : <span style="color:red;">*</span></label>
                        <div class="col-10 ">
                            <select name="jobtype" id="jobtype" class="form-control">
                                <option value="1" selected>Statement</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2  text-bold">Name : <span style="color:red;">*</span></label>
                        <div class="col-10"><input type="text" class="form-control" name="jobname" id="jobname" required></div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2  text-bold ">Owner Name : <span style="color:red;">*</span></label>
                        <div class="col-10"><input type="text" class="form-control" name="ownername" id="ownername" required></div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2  text-bold ">Network : <span style="color:red;">*</span></label>
                        <div class="col-10"><input type="text" class="form-control" name="network" id="network" required></div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2 text-bold">Deliver Frequency : <span style="color:red;">*</span></label>
                        <div class="col-2"><input type="number" class="form-control" name="shippingfrequency" id="shippingfrequency" value="1" required></div>
                        <label class="col-2  text-bold ">Unit :<span style="color:red;">*</span> </label>
                        <div class="col-2 ">
                            <select class="form-control" name="sfunit" id="sfunit">
                                <option value="day">Day</option>
                                <option value="Week">Week</option>
                                <option value="Month">Month</option>
                                <option value="Year">Year</option>
                            </select>
                        </div>
                        <label class="col-2  text-bold ">Shipping Method : <span style="color:red;">*</span></label>
                        <div class="col-2">
                            <select class="form-control" name="shippingmethod" id="shippingmethod">
                                <option value="1">{{trans('custom.quotation.shipping.1')}}</option>
                                <option value="2">{{trans('custom.quotation.shipping.2')}}</option>
                                <option value="3">{{trans('custom.quotation.shipping.3')}}</option>
                                <option value="4">{{trans('custom.quotation.shipping.4')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2 text-bold ">Response Date : <span style="color:red;">*</span></label>
                        <div class="col-4">
                            <input type="text" class="form-control" id="dxp_response_sla_date" name="dxp_response_sla_date" style="background-color:white;" required readonly>
                        </div>
                        <label class="col-2 text-bold ">Response Time : <span style="color:red;">*</span></label>
                        <div class="col-4">
                            <input type="text" class="form-control" name="dxp_response_sla_time" id="dxp_response_sla_time" style="background-color:white;" readonly required>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2  ">Description : </label>
                        <div class="col-10">
                            <textarea name="jobdescription" id="jobdescription" cols="auto" rows="5" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row mb-2">
                        <label class="col-2  text-bold ">Start - End : <span style="color:red;">*</span></label>
                        <div class="col-10" id="data_5">
                            <div class="input-daterange input-group date" id="datepicker">
                                <input type="text" class="form-control-sm form-control" name="start" id="start" style="background-color:white;" required readonly/>
                                <span class="input-group-addon">to</span>
                                <input type="text" class="form-control-sm form-control" name="end" id="end" style="background-color:white;" required readonly/>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2  text-bold ">Estimate <br> Quantity : <span style="color:red;">*</span></label>
                        <div class="col-10">
                            <input type="number" class="form-control" name="estimateq" id="estimateq" required>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2 text-bold ">Department : <span style="color:red;">*</span></label>
                        <div class="col-10">
                            <input type="text" class="form-control" name="department" id="department" required>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2 text-bold ">Cost Center : <span style="color:red;">*</span></label>
                        <div class="col-10">
                            <input type="text" class="form-control" name="costcenter" id="costcenter" required>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2 text-bold ">Document : </label>
                        <div class="col-10">
                            <input id="logo" type="file" class="form-control" name="document" id="document">
                        </div>
                    </div>
                    <div class="row mb-2">
                        <label class="col-2  ">Other : </label>
                        <div class="col-10">
                            <textarea name="other" id="other" cols="auto" rows="5" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" style="background-color:aliceblue;">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a href="#process" data-bs-toggle="tab" class="nav-link active">Process</a>
                    </li>
                    <li class="nav-item">
                      <a href="#material" data-bs-toggle="tab" class="nav-link">Material</a>
                    </li>

                </ul>
                <div class="tab-content panel p-3 rounded-0 rounded-bottom">

                    <div class="tab-pane fade " id="material">

                        <table class="table table-bordered" id="item_table">
                                <tr>
                                    <th>Material <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>
                                <tr>
                                    <td>
                                        <select class="selectpicker form-control item_material" name="material[]" onchange="HandleOptions()">
                                            <option value="">Select Material </option>
                                            @foreach ($material as $item)
                                                <option value="{{$item->id}}">{{$item->material_code.' '.$item->material_name}}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td></td>
                            </tr>
                        </table>
                    </div>
                    <div class="tab-pane fade active show" id="process">
                        <span id="error"></span>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="process_table">
                                    <tr>
                                     <th>Process Name <span style="color:red;"> * </span><button type="button" name="add" class="btn btn-success btn-xs pnadd"> <span class="fa fa-plus"></span></button></th>
                                     <th>Process Detail <span style="color:red;"> * </span><button type="button" name="add" class="btn btn-success btn-xs padd"> <span class="fa fa-plus"></span></button> </th>
                                     <th></th>
                                    </tr>
                                    <tr>
                                            <td> <input type="hidden" name="processnumber[]" id="processnumber11"  class="form-control item_number" value="1">
                                                <input type="name" name="processname[]" id="processname11" class="form-control item_name" value="">
                                            </td>
                                            <td>
                                                <textarea name="process[]" id="process11" cols="auto" rows="auto" class="form-control item_process"></textarea>
                                            </td>
                                            <td></td>
                                    </tr>
                            </table>
                     </div>
                    </div>
                </div>

            </div>


                <div class="row text-center mt-3">
                    <div class="form-group">
                        <a href="{{route('quotations')}}" class="btn btn-default">Back</a>
                        <button type="submit" name="submit" class="btn btn-info">Confirm</button>
                    </div>
                </div>

        </form>
        @endcan
        @cannot('add-statement')
            <div class="col-sm-12" style="text-align:center;">
                    <h1>No permission</h1>
            </div>

        @endcannot

    </div>
</div>
<!-- END panel -->


@endsection

@push('scripts')
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="../assets/plugins/select2/dist/js/select2.min.js"></script>
<script src="../assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="../assets/plugins/select-picker/dist/picker.min.js"></script>
<script>
$(document).ready(function(){
    var curretdate = new Date();
        curretdate.setDate(curretdate.getDate());

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



    $("#dxp_response_sla_time").timepicker({
        defaultTime: DisplayCurrentTime(),
        timeFormat: 'h:mm p',
        startTime: '00:00',
        showMeridian: false
    });


    $('#start').on('change', function() {
        $('#end').val($(this).val());
    });

    $('.selectpicker').picker({ search: true });

    $(document).on('click', '.add', function(){
        var html = '';
        html += '<tr>';
        html += '<td><select class="selectpicker form-control item_material" name="material[]" onchange="HandleOptions()"><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><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);
        $('.selectpicker').picker({ search: true });
        HandleOptions();
    });
        var run = 1;
        var run2 = 1;
        $(document).on('click', '.padd', function(){
            var count1 = 0;
            var error = "";
            $('#error').html('');
            $('.item_name').each(function(){

                if($(this).val() == '')
                {
                    error += "<p>Please enter Process Name at Row "+count1+"</p>";
                    return false;
                }
                count1 = count1 + 1;
            });
            if(error == ""){
                var namedata = $('#processname' + run2 + run).val();
                run++;
                var count1 = 0;
                var html = '';
                html += '<tr>';
                html += '<td><input type="hidden" name="processnumber[]" id="processnumber'+run2+''+run+'" class="form-control item_number" value="'+run2+'"><input type="hidden" name="processname[]" id="processname'+run2+''+run+'" class="form-control item_name" value="'+namedata+'"></td>';
                html += '<td><textarea name="process[]" id="process'+run2+''+run+'" class="form-control item_process" cols="auto" rows="auto" class="form-control"></textarea></td>';
                html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm premove"><span class="fa fa-minus"></span></button></td></tr>';
                $('#process_table').append(html);

            }else{
                $('#error').html('<div class="alert alert-danger">'+error+'</div>');
            }



        });
        $(document).on('click', '.pnadd', function(){

            var count1 = 0;
            var error = "";
            $('#error').html('');
            $('.item_name').each(function(){

                if($(this).val() == '')
                {
                    error += "<p>Please enter Process Name at Row "+count1+"</p>";
                    return false;
                }
                count1 = count1 + 1;
            });
            if(error == ""){
                run2++;
                run=1;
                var html = '';
                html += '<tr>';
                html += '<th><input type="hidden" name="processnumber[]" id="processnumber'+run2+''+run+'" class="form-control item_number" value="'+run2+'"><input type="text" name="processname[]" id="processname'+run2+''+run+'" class="form-control item_name" value=""></th>';
                html += '<td><textarea name="process[]" id="process'+run2+''+run+'" class="form-control item_process" cols="auto" rows="auto" class="form-control"></textarea></td>';
                html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm pnremove"><span class="fa fa-minus"></span></button></td></tr>';
                $('#process_table').append(html);

            }else{
                $('#error').html('<div class="alert alert-danger">'+error+'</div>');
            }



        });

        $(document).on('click', '.remove', function(event){
            $(this).closest('tr').remove();

        });
        $(document).on('click', '.premove', function(event){
            $(this).closest('tr').remove();
            if(run == 1){
            }else{
                if(run2 == 1){

                }else{

                    run--;
                }
            }

        });
        $(document).on('click', '.pnremove', function(event){
            $(this).closest('tr').remove();
            if(run2 == 1 && run >= 1){
                run--;
            }else{
                if(run == 1){
                    run2--
                }else{
                    run2--;
                    run--;
                }

            }
        });

        $('#insert_form').on('submit', function(event){
            event.preventDefault();
            var error = '';
            var count = 1;
            var count1 = 1;
            var count2 = 0;
            var array = [];
            $('.item_material').each(function(){
                array[count2] = $(this).val();
                for (let index = 0; index < array.length-1; index++) {
                    if($(this).val() == array[index])
                    {
                        error += "<p>Duplicate material at Row "+(count2+1)+"</p>";
                        return false;
                    }

                }

                count2++;
            });
            $('.item_name').each(function(){

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

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


            if(error == ''){
                var form = $('#insert_form')[0];
                var form_data = new FormData(form);
                Swal.fire({
                                title: 'Please Wait..!',
                                text: 'Is working..',
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                allowEnterKey: false,
                                onOpen: () => {
                                    swal.showLoading()
                                }
                            })
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url:"{{route('submitaddstatement')}}",
                    method:"POST",
                    enctype: 'multipart/form-data',
                    data:form_data,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend:function(){

                    },
                    success:function(data){
                        Swal.fire({
                            title: 'Success!!',
                            text: 'Press OK to continuous.',
                            icon: 'success',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            allowEnterKey: false,
                        }).then((result) => {
                            if (result.value) {
                                window.location="{{route('quotations')}}";
                            }
                        })
                    },
                    error:function(response){
                        Swal.fire(
                            'Error!!',
                            'Contract Admin',
                            'error'
                            )
                    }
                });
            }else{
                $('#error').html('<div class="alert alert-danger">'+error+'</div>');
            }
        });

});
function setstartenddate(){
    var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();

        if (dd < 10) {
        dd = '0' + dd;
        }

        if (mm < 10) {
        mm = '0' + mm;
        }

        today = yyyy + '-' + mm + '-' + dd;
        $('#start').val(today)
        $('#end').val(today)
}
function DisplayCurrentTime() {
    var date = new Date();
    var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
    var am_pm = date.getHours() >= 12 ? "PM" : "AM";
    hours = hours < 10 ? "0" + hours : hours;
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    time = hours + ":" + minutes;
    //time = hours + ":" + minutes + am_pm;
    return time;
};

function HandleOptions() {
    $('option').removeAttr('disabled'); //reset all the options to be available
    $.each($('select.item_material'), 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