<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="input-daterange input-group" id="quotationDateRange">
            <input type="text" class="input-sm form-control" name="startDate" id="startDate"
                   placeholder="Start date" value="<?php echo e(date('d/m/Y', strtotime($startDate))); ?>">
            <span class="input-group-addon">to</span>
            <input type="text" class="input-sm form-control" name="endDate" id="endDate" placeholder="End date"
                   value="<?php echo e(date('d/m/Y', strtotime($endDate))); ?>">
        </div>
    </div>
</div>

<br/>
<div class="panel-group" id="accordion-quotation">

    <div class="panel">
        <div class="panel-heading text-center">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-quotation"
               href="#panelQuotationNew">
                Add New Quotation
            </a>
        </div>
        <!-- / .panel-heading -->
        <div id="panelQuotationNew" class="panel-collapse collapse">
            <div class="panel-body" id="formAddQuotation">
            </div>

            <input type="hidden" id="addQuotationId"/>
            <!-- / .panel-body -->
        </div>
        <!-- / .collapse -->
    </div>

    <div class="panel">
        <div class="panel-heading text-center">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-quotation"
               href="#panelQuotationRequired">
                Outstanding Quote Requests
            </a>
        </div>
        <div id="panelQuotationRequired" class="panel-collapse collapse">
            <div class="panel-body no-padding" id="quoteRequestJobList">
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-quotation"
               href="#panelQuotationList">
                Quotation List
            </a>
        </div>
        <!-- / .panel-heading -->
        <div id="panelQuotationList" class="panel-collapse in">
            <div class="panel-body no-padding">
                <select id="filterQuotationStatus" multiple="multiple" data-placeholder="Select a status"
                        class="form-control">
                    <option></option>
                    <?php foreach($quotationStatus as $aStatus): ?>
                        <option value="<?php echo e($aStatus['value']); ?>"><?php echo e($aStatus['value']); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="panel-body no-padding panelOverFlow" id="quotationList">
                <div id="delete-confirmation" class="modal modal-alert modal-danger fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <i class="fa fa-times-circle"></i>
                            </div>
                            <div class="modal-title" id="confirmDeletionTitle"></div>
                            <div class="modal-body">Confirm to delete this quotation</div>
                            <div class="modal-footer">
                                <a id="confirmDeletionLink"
                                   class="btn btn-danger" data-dismiss="modal">Confirm Deletion</a>
                            </div>
                        </div>
                        <!-- / .modal-content -->
                    </div>
                    <!-- / .modal-dialog -->
                </div> <!-- / .modal -->

                <div class="panel-body no-padding">
                    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped"
                           id="quotationsTable">
                        <thead>
                        <tr>
                            <th><i class="fa fa-pencil"></i></th>
                            <th>Quotation Ref</th>
                            <th>Client</th>
                            <th>Building</th>
                            <th>Total £</th>
                            <th>Creator</th>
                            <th>Date</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>


<div id="quotationJobEditPanel" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <i class="fa fa-info-circle"></i> Job Detail
            </div>
            <div class="modal-title"></div>
            <div class="modal-body">
                <div id="quotationJobEditPanelContent"></div>
            </div>
        </div>
    </div>
</div>

<div id="quotationItemDetailModal" class="modal modal-alert modal-success fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <i class="fa fa-info-circle"></i>
            </div>
            <div class="modal-title">Update Quotation Item</div>
            <div class="modal-body">
                <br/>

                <div class="row form-group">
                    <label class="col-xs-4 control-label">Item Quantity:</label>

                    <div class="col-xs-8">
                        <input id="updateQuotationItemQuantity" type="text" class="form-control" value="1"/>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">Item Name:</label>

                    <div class="col-xs-8">
                        <input id="updateQuotationItemName" type="text" class="form-control"
                               placeholder="item name"/>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">Unit Price:</label>

                    <div class="col-xs-8">
                        <input id="updateQuotationItemUnitPrice" type="text" class="form-control" value="0"/>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">Unit Mark Up &percnt;:</label>

                    <div class="col-xs-8">
                        <input id="updateQuotationItemUnitMargin" type="text" class="form-control" value="0"/>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">Unit Time:</label>

                    <div class="col-xs-8">
                        <input id="updateQuotationItemDuration" type="text" class="form-control" value="1"/>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">Item Type:</label>

                    <div class="col-xs-8">
                        <select id="updateQuotationItemType" class="form-control"
                                data-placeholder="Select a type...">
                            <option></option>
                            <option value="Labour">Labour</option>
                            <option value="Material">Material</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">Description:</label>

                    <div class="col-xs-8">
                            <textarea id="updateQuotationItemDescription" class="form-control"
                                      placeholder="description"></textarea>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-4 control-label">sub total:</label>

                    <div class="col-xs-8">
                        <input id="updateQuotationItemTotalPrice" type="text" class="form-control" value="0"/>
                    </div>
                </div>
                <input id="updateQuotationItemId" type="hidden" class="form-control" value="0"/>

                <div class="row form-group">
                    <label class="col-xs-4 control-label"></label>

                    <div class="col-xs-8">
                        <a id="updateQuotationItemButton" onclick="javascript:updateQuotationItem()"
                           class="btn btn-success col-xs-12"><i
                                    class="fa fa-refresh"></i> UPDATE</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var $_token = "<?php echo e(csrf_token()); ?>",
            quotationTable;

    $(document).on('click', '.edit-quotation', function () {
        generateQuotationDetail($(this).data('url'), $(this).data('id'), $_token);
    });

    $(document).on('click', '.delete-quotation', function () {
        confirmDeletionInitPost($(this).data('url'), $(this).data('id'), $(this).data('name'), $_token, refreshQuotations);
    });

    $('#startDate').datepicker({
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (ev) {
        refreshQuotations();
    });
    $('#endDate').datepicker({
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (ev) {
        refreshQuotations();
    });

    $('#filterQuotationStatus').selectize();
    $('#filterQuotationStatus').change(function () {
        refreshQuotations();
    });

    quotationTable = $('#quotationsTable').dataTable({
        processing: true,
        serverSide: true,
        bProcessing: true,
        order: [[1, "desc"]],
        ajax: {
            "url": "<?php echo e(URL::action("QuotationController@generateQuotationList")); ?>",
            "type": "POST",
            "data": function (data) {
                data._token = $_token;
                data.startDate = changeDateFormatToISO($('#startDate').val());
                data.endDate = changeDateFormatToISO($('#endDate').val());
                data.status = $('#filterQuotationStatus').val();
            }
        },
        columns: [
            {data: 'edit', name: 'edit', orderable: false, searchable: false},
            {data: 'quotationRef', name: 'quotationRef'},
            {data: 'clientName', name: 'clientName'},
            {data: 'siteName', name: 'siteName'},
            {data: 'quotationTotal', name: "quotationTotal"},
            {data: 'creator', name: 'creator'},
            {data: 'quotationDate', name: 'quotationDate'},
            {data: 'status', name: 'status'}
        ],
        iDisplayLength: 25,
        drawCallback: function (data) {
            $('#quotationsTable_wrapper').find('.table-caption').text('Total (' + data._iRecordsDisplay + ')');
            $('#quotationsTable').find('.tr-danger').closest('tr').addClass('danger');
            $('#quotationsTable').find('.tr-warning').closest('tr').addClass('warning');
        }
    });

    $('#quotationsTable_wrapper .table-caption').text('Quotations');
    $('#quotationsTable_wrapper .dataTables_filter input').attr('placeholder', 'Search...');

    function refreshQuotations() {
        quotationTable.api().ajax.reload();
    }

    generateFormAddQuotation('<?php echo e(URL::action("QuotationController@generateFormAddQuotation")); ?>', '<?php echo e(csrf_token()); ?>');
    //generateQuotationList('<?php echo e(URL::action("QuotationController@generateQuotationList")); ?>', '<?php echo e(csrf_token()); ?>');
    generateQuoteRequestJobs('<?php echo e(URL::action("QuotationController@generateQuoteRequestJobs")); ?>', '<?php echo e(csrf_token()); ?>');

    <?php /*popupIwsInitNotification('<?php echo e(URL::action("NotificationController@popupIwsInitNotification")); ?>', 'quotation', '<?php echo e(csrf_token()); ?>');*/ ?>
    <?php /*popupIwsNotification('<?php echo e(URL::action("NotificationController@popupIwsNotification")); ?>', 'quotation', '<?php echo e(csrf_token()); ?>');*/ ?>
</script>