@extends('app.dashboard')

@section('content')

<div class="page-wrapper">
    <!-- Page Content-->
    <div class="page-content pr-5 pl-5">
        <style>
            .nav-tabs .nav-link.active,
            .nav-tabs .nav-item.show .nav-link {
                color: #fff;
                background-color: #f68c1e !important;
                border-color: #f68c1e !important;
            }

            label {
                font-weight: 500;
            }

            .even {
                background-color: #F5F5F5 !important;
            }

            .odd {
                background-color: #fff !important;
            }

            .dataTables_filter {
                margin-left: 10px;
                float: right;
            }

            .dataTables_length {
                margin-right: 20px;
                float: left;
            }

            .dtr-title, .dtr-data {
                width: 160px;
            }

            .dtr-data {
                width: 200px;
            }

        </style>
        <div class="container-fluid mt-2">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <form id="uploadform">
                                                @csrf
                                                <h4 class="pt-0 mt-0"> Upload Orders </h4>
                                                <div class="card">
                                                    <div class="card-body" style="border-top:3px solid #7680ff">
                                                        <div class="form-group row mb-3 pb-0">
                                                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                                                <label>Customer</label>
                                                                <select class="form-control"
                                                                    name="customerid" id="customerid">
                                                                    <option selected disabled value=""> Select Customer </option>
                                                                    @foreach ($customers as $customer)
                                                                    <option value="{{ $customer->id }}">
                                                                        {{ $customer->customer_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-4 mb-0 pb-0 mt-1">
                                                                <label> File</label>
                                                                <input type="file" name="docs"
                                                                    id="docs" class="form-control">
                                                            </div>
                                                            <div class="form-group col-lg-1 mb-0 pb-0" style="margin-top:32px !important">
                                                                <input type="button" name="Upload" value="Upload" id="submit"
                                                                class="btn btn-md btn-success" onclick="saveData();">
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="p-4 table-responsive" id="batchdiv">
                                            <table id="myTable" class="table table-bordered nowrap"
                                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                <thead>
                                                    <tr>
                                                        <th>Customer </th>
                                                        <th>File</th>
                                                        <th>Uploaded By </th>
                                                        <th>Uploaded On </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                                                                    </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#myTable').DataTable( {
            responsive: true
    } );
});
    function saveData()
    {
        if ($("#uploadform").parsley())
        {
            if ($("#uploadform").parsley().validate())
            {
                event.preventDefault();
                if ($("#uploadform").parsley().isValid())
                {
                    $.ajax({
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ route('bulkuploadorders') }}",
                        data: new FormData($("#uploadform")[0]),
                        processData: false,
                        contentType: false,
                        success: function(html)
                            {
                                location.href = location.href;
                                // setTimeout(function(){  location.reload(); }, 800);
                            }
                    });
                }
            }
        }
    }
</script>
@endsection