@extends('layouts.main_without_top_button')
@section('title')
    Maintenance Configurations
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Settings</a> <span class="divider">/</span></li>
        <li class="active">Su services</li>
    </ul>
@stop
@section('master_services')
    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>
    <style>
        .table-1 thead tr, .table-1 thead tr th {
            border: 0;
            color: #0b4073;
            font-size: 14px;
        }
        .sortlist > li div.label .showcnt-1 {
            position: absolute;
            display: block;
            top: 9px;
            right: 30px;
            opacity: 1;
        }
        .sortlist > li div.label .showcnt-1:hover {
            opacity: 0.6;
            cursor: pointer;
        }
        .sortlist > li div.label .showcnt-2 {
            position: absolute;
            display: block;
            top: 9px;
            right: 5px;
            opacity: 1;
        }
        .sortlist > li div.label .showcnt-2:hover {
            opacity: 0.6;
            cursor: pointer;
        }
        .table-1 tr {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
        }
        .table-1 tr th {
            text-transform: uppercase;
            text-align: center;
        }
    </style>

    <div class="tabbable">
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">

                        <div class="mediamgr">
                            <div class="mediamgr_left">
                                @include('settings.maintenance.trucks.includes.mediamgr_category')

                                <h4 class="widgettitle form-inline ">
                                    <a href="javascript:;">Sub Services</a>
                                    <button onclick="modelShow('addService')" class="btn pull-right">
                                        <span class="icon-plus"></span> ADD MASTER SERVICE</button>
                                </h4>
                                <table class="table  table-striped table-condensed" id="dyntable">
                                    <thead>
                                    <tr>
                                        <th class="head0">S/N</th>
                                        <th class="head1">Description</th>
                                        <th class="head1">Service Frequency</th>
                                        <th class="head0">Create Remainder</th>
                                        <th class="head1">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($services as $index=> $service)
                                        <tr>
                                            <td class="head0">{{++$index}}</td>
                                            <td class="head1">{{$service->description}}</td>
                                            <td class="head1">{{$service->service_frequency}} {{$service->service_frequency_type}}
                                                /{{$service->service_frequency_odometer}} km
                                            </td>
                                            <td class="head0">{{$service->create_remainder}} {{$service->create_remainder_type}}
                                                /{{$service->create_remainder_odometer}} Km
                                            </td>
                                            <td class="head0">
                                                <div class="btn-group">
                                                    <a class="btn btn-mini">
                                                        <i class="icon-eye-open"></i>
                                                    </a>
                                                    <a class="btn btn-mini edit_master_service">
                                                        <i class="iconfa-pencil"></i>
                                                    </a>
                                                    <a class="deleterow_c btn btn-danger btn-mini"
                                                       href="{{route('master-services.destroy',['id'=>$service->id])}}">
                                                        <i class="icon-trash"></i>
                                                    </a>
                                                </div>
                                                <input type="hidden" id="master_service_id" class="master_service_id" value="{{$service->id}}">
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div><!--mediamgr_left -->

                        </div><!--mediamgr-->
                    </div><!--span12-->
                </div><!--row-fluid-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--tabbable-->

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1" id="edit_master_service">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>Add Service</h4>
        </div>
        {!! Form::open(array('class' => 'stdform','route'=>'master-service.update')) !!}
        <div class="modal-body">
            <div id="edit_master_service_body"></div>
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Submit</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        </form>
    </div>

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
        class="modal hide fade in modal-1" id="addService">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>Add Service</h4>
        </div>
        {!! Form::open(array('class' => 'stdform','route'=>'services.create')) !!}
        <div class="modal-body">
            <p>
                <label>Description:</label>
                <span class="field">
                    <input type="text" name="description" class="span4" placeholder=""/>
                </span>
            </p>
            <p>
                <label>Frequency :</label>
                <span class="formwrapper">
                    <input type="text" name="service_frequency" class="input-small" placeholder=""/>
                    <select name="service_frequency_type" id="selection2" class="uniformselect">
                        <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                        <option value="Day">Day(s)</option>
                        <option value="Month">Month(s)</option>
                        <option value="Year">Year(s)</option>
                        <option value="Trip" selected>Trip(s)</option>
                    </select>
                     <span>OR</span>
                    <input type="text" name="service_frequency_odometer" class="input-small"
                           placeholder="Odometer Unit"/>
                </span>
            </p>
            <p>
                <label>Alert When Remain :</label>
                <span class="formwrapper">
                    <input type="text" name="create_remainder" class="input-small" placeholder=""/>
                    <select name="create_remainder_type" id="selection2" class="uniformselect">
                        <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                        <option value="Day">Day(s)</option>
                        <option value="Month">Month(s)</option>
                        <option value="Year">Year(s)</option>
                        <option value="Trip" selected>Trip(s)</option>
                    </select>
                     <span>OR</span>
                    <input type="text" name="create_remainder_odometer" class="input-small" placeholder="Odometer Unit"/>
                </span>
            </p>
            <h4 class="widgettitle" style="margin-left: 30px;margin-right: 30px">Sub Service
                <i class="icon-plus-sign pull-right" style="font-size: 18px" id="add_sub_service"></i>
            </h4>

            <div class="row-fluid">
                <div class="span12">
                    <table style="margin-bottom: 3px;width: 90%" class="table table-condensed">
                        <thead>
                        <tr>
                            <th width="80%">Service Description</th>
                            <th>&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody id="sub_service_">
                            <tr>
                                <td width="80%">
                                    <span class="formwrapper span12">
                                        <select data-placeholder="Choose a On-Route Cost..."
                                                class="chzn-select" width="100%" name="service[]" class="onRoute_cost"
                                                tabindex="2">
                                            <option value=""></option>
                                            @foreach($_services as $service)
                                                <option value="{{$service->id}}">{{$service->name}}</option>
                                            @endforeach
                                        </select>
                                    </span>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>


                    <div class="widgetcontent">
                        <ul id="sortable2" class="sortlist">
                            @foreach($tm_categories as $maintenance_category)
                                <li>
                                    <div class="label">
                                        <span class="icon-align-justify"></span>
                                        <span class="icon-arrow-down showcnt-2"></span>
                                        {{--<span class="iconsweets-printer showcnt-1"></span>--}}
                                        <a href="#">{{ucwords($maintenance_category->name)}} </a>
                                    </div><!--label-->
                                    <div class="details">
                                        <table class="table" style="width: 100%">
                                            <thead>
                                            <!-- <tr>
                                                <th colspan="3">
                                                    <input type="hidden" name="truck_maintenance_category_id[]" value="{{$maintenance_category->id}}" class="truck_maintenance_category_id">
                                                </th>
                                            </tr> -->
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td colspan="3" style="font-weight: bold;" class="parameter">
                                                    <h4 style="">Select Inspection Parameters According to above {{ucwords($maintenance_category->name)}} Driver's Complaining</h4>
                                                    <table class="table table-bordered">
                                                        <thead>
                                                        <tr>
                                                            <th style="width: 10px">SNO.</th>
                                                            <th>Parameter</th>
                                                            <th style="width: 10px">&nbsp;</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="table_employee_service_{{$maintenance_category->id}}">
                                                        @foreach($maintenance_category->parameters as $index => $parameter)
                                                            <tr>
                                                                <td>{{++$index}}</td>
                                                                <td>{{$parameter->name}}</td>
                                                                <td style="text-align: right;font-weight: bold">
                                                                    <input type="checkbox" class=""
                                                                           name="truck_maintenance_parameter_id[{{$maintenance_category->id}}][]"
                                                                           value="{{$parameter->id}}"
                                                                            >
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div><!--details-->
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Submit</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        </form>
    </div>

    <table style="width: 90%" class="fade">
        <tbody id="add_sub_service_details">
        <tr>
            <td>
                <input type="hidden" name="master_service_list_ids[]" value="">
            <span class="formwrapper">
                <select placeholder="Choose a On-Route Cost..." name="service[]" class="onRoute_cost">
                    <option value=""></option>
                    @foreach($_services as $service)
                        <option value="{{$service->id}}">{{$service->name}}</option>
                    @endforeach
                </select>
            </span>
            </td>
            <td>
                <a class="remove_sub_service"><i class="icon-minus-sign" style="font-size: 18px;color: red"></i></a>
            </td>
        </tr>
        </tbody>
    </table>

    <script>
        jQuery('.edit_master_service').click(function () {
            var tr_p = jQuery(this).parents('tr');
            var master_service_id = tr_p.find('.master_service_id').val();
            jQuery('#edit_master_service').appendTo("body").modal('toggle');
            jQuery.ajax({
                type: "get",
                url: "{{route('master-service.edit')}}",
                data: {
                    master_service_id: master_service_id
                },
                success: function (data) {
                    jQuery('#edit_master_service_body').empty().append(data);
                },
                error: function (data) {

                }
            });
            return false;
        });

        jQuery('.remove_sub_service').on('click', function () {
            jQuery(this).parent().parent().remove();
            var sum = 0;
            jQuery('.sub_service').each(function () {
                if (this.value != '') {
                    sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                }
            });
        });
        jQuery('#add_sub_service').on('click', function () {
            var addRow = jQuery('#add_sub_service_details').html();
            jQuery('#sub_service_').prepend(addRow);

            jQuery('.remove_sub_service').on('click', function () {
                jQuery(this).parent().parent().remove();
                var sum = 0;
                jQuery('.sub_service').each(function () {
                    if (this.value != '') {
                        sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                    }
                });
            });
            jQuery('.number').keyup(function (event) {
                // skip for arrow keys
                if (event.which >= 37 && event.which <= 40) return;
                // format number
                jQuery(this).val(function (index, value) {
                    return value
                            .replace(/\D/g, "")
                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                });
            });
        });

        // sortable list with content
        // jQuery('.showcnt-2').parents('li').find('.details').slideDown();
        if (jQuery('#sortable2').length > 0) {
            jQuery("#sortable2").sortable();
            jQuery('.showcnt-2').click(function () {
                var t = jQuery(this);
                var det = t.parents('li').find('.details');
                if (!det.is(':visible')) {
                    det.slideDown();
                    t.removeClass('icon-arrow-down').addClass('icon-arrow-up');
                } else {
                    det.slideUp();
                    t.removeClass('icon-arrow-up').addClass('icon-arrow-down');
                }
            });
        }
    </script>

@stop