@extends('layouts.main_without_top_button')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Job Card Services</li>
    </ul>
@stop
@section('inspection_parameters')
    current
@stop
@section('contentinner')
    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <div class="tabbable">
        @include('workshops.incidents.profile.jobs_cards.profile.includes.tabs')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">

                <table class="table" style="margin-left: 40px;">
                    @foreach($job_card->jobCardServices as $job_card_services)
                        <tr>
                            <th style="border-bottom: 0">{{$job_card_services->service->name}}</th>
                        </tr>
                        <tr>
                            <td>
                                <table style="width: 95%;margin-left: 5%;">
                                    <tr>
                                        <td style="margin-bottom: 10px;width: 60%;border: 0;vertical-align: top">
                                            <table style="width: 100%">
                                                <tr>
                                                    <td colspan="3" style="border: 0;width: 100%;font-weight: bold;background: #bebebe">
                                                       <span style="border-bottom: 1px solid">Parts:</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="border-bottom: 1px solid;border-top: 0;width: 5%;font-weight: bold">
                                                        Qnty
                                                    </td>
                                                    <td style="width: 1%;border: 0"></td>
                                                    <td style="border-bottom: 1px solid;border-top: 0;width: 94%;font-weight: bold">
                                                        Name
                                                    </td>
                                                </tr>
                                                @foreach($job_card_services->JobCardItemizedBudgetedItems as $job_card_itemized_budgeted_item)
                                                    <tr>
                                                        <td style="border: 0">{{$job_card_itemized_budgeted_item->jobCardBudgetedItem->quantity}}</td>
                                                        <td style="border: 0">&nbsp;</td>
                                                        <td style="border: 0">{{$job_card_itemized_budgeted_item->jobCardBudgetedItem->item->name}}</td>
                                                    </tr>
                                                @endforeach
                                            </table>
                                        </td>
                                        <td style="border-left: 4px solid;width: 40%;border-top: 0;vertical-align: top">
                                            <table style="width: 100%">
                                                <tr>
                                                    <td style="border-bottom: 1px solid;border-top: 0;;font-weight: bold;background: #bebebe">Labours</td>
                                                </tr>
                                                @foreach($job_card_services->jobCardItemizedEmployees as $job_card_itemized_employees)
                                                    <tr>
                                                        <td style="border: 0">{{$job_card_itemized_employees->jobCardEmployee->employee->full_name}}</td>
                                                    </tr>
                                                @endforeach
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    @endforeach
                    <tbody>
                </table>


            </div><!--tab-pane-->
        </div>
    </div>


    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1"
         id="addJobCardService">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>JOB CARD SERVICE FORM</h4>
        </div>
        <form method="POST" action="{{ route('hse.jobscard-service.store') }}" accept-charset="UTF-8"
              autocomplete="off">
            {{ csrf_field() }}
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span12">

                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th> Sevice Name</th>
                                <th> Description</th>
                                <th></th>
                            </tr>
                            <tr style="display: none" class="job_card_service_row_template">
                                <td class="span4">
                                    <select style="width: 100%" class="service_id" id="" name="service_id[]">
                                        <option value="">Select Service</option>
                                        @foreach($services as $service)
                                            <option value="{{$service->id}}">{{$service->name}}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="{{$job_card->id}}" name="job_card_id">
                                </td>
                                <td class="span8">
                                    <textarea class="span12 form-control" rows="1" name="description[]"></textarea>
                                </td>
                                <td>
                                    <button title="Remove Row" type="button"
                                            class="btn btn-sm btn-danger service_row_remover">
                                        <i class="fa fa-close"></i></button>
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="span4">
                                    <select style="width: 100%" class="select2" name="service_id[]" required>
                                        <option value="">Select Service</option>
                                        @foreach($services as $service)
                                            <option value="{{$service->id}}">{{$service->name}}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="{{$job_card->id}}" name="job_card_id">
                                </td>
                                <td class="span8">
                                    <textarea class="span12 form-control" rows="1" name="description[]"></textarea>
                                </td>
                                <td>
                                    <button title="Remove Row" type="button"
                                            class="btn btn-sm btn-danger service_row_remover">
                                        <i class="fa fa-close"></i></button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="8">
                                    <button type="button"
                                            class="btn btn-default btn-xs job_card_service_row_adder pull-right">Add Row
                                    </button>
                                    <span class="pull-right">&nbsp;</span>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn " data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>

    <script>
        jQuery('.select2').select2();

        jQuery('.job_card_service_row_adder').each(function () {
            jQuery(this).click(function () {
                var tbody = jQuery(this).closest('table').find('tbody');
                var new_row = tbody.closest('table').find('.job_card_service_row_template').clone().removeAttr('style')
                    .removeClass('job_card_service_row_template').addClass('service_artificial_row').appendTo(tbody);
                new_row.find('.service_id').select2();

                new_row.find('.service_row_remover').click(function () {
                    jQuery(this).closest('tr').remove();
                });
            });
        });

        jQuery('.service_row_remover').click(function () {
            jQuery(this).closest('tr').remove();
        });

    </script>

@stop