@extends('workshops.jobcards.includes.jobcard_tabs')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Workshops</a> <span class="divider">/</span></li>
        <li><a href="{{route('workshops.jobs_cards.index')}}">Job-cards</a> <span class="divider">/</span></li>
        <li><a  href="{{route('workshops.jobs_cards.show',['id'=>$job_card->id])}}">{{$job_card_number}}</a> <span class="divider">/</span></li>
        <li class="active">Spares Parts & Materials</li>
    </ul>
@stop
@section('jobcards')

    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <h4 class="widgettitle form-inline">

        <button type="button" id="request_button" class="add_category btn pull-right"><span class=""></span> Request </button>

        <form method="POST" ACTION="{{ route('workshops.jobs_cards.spares_parts.store') }}">
            {{ csrf_field() }}
            <button type="submit" class="add_category btn pull-right"><span class="icon-plus"></span> Add Item</button>
            <input type="hidden" value="{{$job_card->id}}" name="job_card_id">
            <select style="width: 20%" name="item_id" class="searchable" required>
                <option value=""></option>
                <optgroup label="As Spare Parts, Tools & Equipments">
                    @foreach($items as $item)
                        <option value="SPARES_{{$item->id}}">{{$item->name }}</option>
                    @endforeach
                </optgroup>
                <optgroup label="As Materials">
                    @foreach($items as $item)
                        <option value="MATERIALS_{{$item->id}}">{{$item->name }}</option>
                    @endforeach
                </optgroup>

            </select>
            <input style="width: 20%" type="text" name="quantity" id="quantity" value=""
                   placeholder="Enter Quantity" required class="span2"/>
            <select style="width: 20%" name="job_card_service_id" class="searchable" >
                <option value="">Select Jobcard Service</option>
                @foreach($job_card_services as $job_card_service)
                    <option value="{{$job_card_service->id}}">{{$job_card_service->service->name }}</option>
                @endforeach
            </select>
        </form>
    </h4>
    <table class="table table-bordered table-condensed logistics_table"
           id="job_card_requred_item_list">
        <colgroup>
            <col class="con0" style="align: center; width: 4%"/>
            <col class="con1"/>
            <col class="con0"/>
            <col class="con1"/>
            <col class="con0"/>
            <col class="con1"/>
            <col class="con0"/>
        </colgroup>
        <thead>
        <tr>
            <th class="head0 nosort"></th>
            <th class="head0">Items</th>
            <th class="head0">Type</th>
            <th class="head0">Required</th>
            <th class="head0">Requested</th>
            <th class="head0">Approved</th>
            <th class="head0">Rejected</th>
            <th class="head0">Issued</th>
            <th class="head0">Condition</th>
            <th class="head0">Services</th>
            <th class="head1" width="20">Action</th>
        </tr>
        </thead>
    </table>

    <div id="ch"></div>
    <script>

        jQuery('.searchable').select2();

        var oTable = jQuery('#job_card_requred_item_list').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any item records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('workshops.jobs_cards.spares_parts.datatable',array('id'=>$job_card->id))}}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "lengthMenu": [100, 200, 300, 400, 500],
                "pageLength": 100,
                "columns": [

                    {data: 'checkbox'},
                    {"class": "link", data: 'item'},
                    {"class": "link", data: 'type'},
                    {"class": "link", data: 'quantity'},
                    {"class": "link", data: 'requested'},
                    {"class": "link", data: 'approved'},
                    {"class": "link", data: 'rejected'},
                    {"class": "link", data: 'issued'},
                    {"class": "link", data: 'condition'},
                    {"class": "link", data: 'service'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });


        jQuery('#request_button').each(function () {
            if (jQuery(this).attr('initialized') != 'true') {
                jQuery(this).click(function () {
                    generateItemRequest();
                });
                jQuery(this).attr('initialized', 'true');
            }
        });
        function generateItemRequest() {

            var job_card_requisition_item_id = [];
            var job_card_requisition_item_quantity = [];
            var job_card_item_id = [];
            jQuery('.job_card_requisition_item_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    var quantity = jQuery(this).closest('tr').find('input[name="quantity[]"]').val();
                    var job_c_item_id = jQuery(this).closest('tr').find('input[name="job_card_item_id[]"]').val();
                    job_card_requisition_item_id.push(jQuery(this).val());
                    job_card_requisition_item_quantity.push(quantity);
                    job_card_item_id.push(job_c_item_id);

                }
            });
            if(job_card_requisition_item_id.length < 1) {
                logistics_alert('Select at least one row to continue', 'SELECTION DIALOG');
                return;
            }

            jQuery.ajax({
                type: "GET",
                cache: false,
                url: "{{route('hse.incidents-jobscards.job_card_requisition_items_show')}}",
                data: {
                    ids: job_card_requisition_item_id,
                    job_card_id: '{{$job_card->id}}',
                    item_quantity: job_card_requisition_item_quantity,
                    job_card_item_ids: job_card_item_id
                },

                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#job_card_requred_item_list').DataTable().draw('page');
                    onAjaxSuccess(data, 'POST');
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });

            return false;
        }

    </script>


@stop