@extends('layouts.main_without_top_button')
@section('title')
    Licences / Permits & Insurance
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Licences / Permits & Insurance</li>
    </ul>
@stop
@section('contentinner')

    <style>
        #right-panel {
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #right-panel select, #right-panel input {
            font-size: 15px;
        }

        #right-panel select {
            width: 100%;
        }

        #right-panel i {
            font-size: 12px;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            float: left;
            width: 70%;
            height: 100%;
        }

        #right-panel {
            margin: 20px;
            border-width: 2px;
            width: 20%;
            height: 400px;
            float: left;
            text-align: left;
            padding-top: 0;
        }

        #directions-panel {
            margin-top: 10px;
            background-color: #FFEE77;
            padding: 10px;
            overflow: scroll;
            height: 174px;
        }

        #map_canvas {
            z-index: 99999;
        }
    </style>

    <div class="tabbable" onload="loadScript()">
        @include('routes.settings.routes.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <a class="btn" onclick="create('{{route('routes.create')}}')">CREATE NEW</a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <table class="table table-striped table-bordered table-condensed" id="route_index_datatable">
                            <thead>
                            <tr>
                                <td style="width: 3%">S/N</td>
                                <th style="width: 70%">Name</th>
                                <th style="width: 10%">Amount</th>
                                <th style="width: 10%">Currency</th>
                                <th style="width: 7%">Period(Month)</th>
                                {{--<th>On Route Cost(USD)</th>--}}
                                {{--<th>On Route Cost(TSH)</th>--}}
                                {{--<th>Action</th>--}}
                            </tr>
                            </thead>
                            @foreach($permits as $index=>$permit)
                                <tr>
                                    <td>{{++$index}}</td>
                                    <td>{{$permit->name}}</td>
                                    <td>
                                        <input type="text" name="amount[]" class="span12" value="{{$permit->budget_amount}}">
                                        <input type="hidden" name="permit_id[]" value="{{$permit->id}}">
                                    </td>
                                    <td>
                                        <select class="searchable_select" name="currency[]" style="width: 100%">
                                            <option value=""></option>
                                            <option value="TSH" @if($permit->budget_currency =='TSH') selected @endif>TSH</option>
                                            <option value="USD" @if($permit->budget_currency =='USD') selected @endif>USD</option>
                                        </select>
                                    </td>
                                    <td><input type="text" name="time_period[]" class="span12" value="{{$permit->budget_period}}"></td>
                                </tr>
                            @endforeach
                        </table>

                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>
    <script>
        jQuery('input[name="amount[]"]').on('change', function () {
            var amount_position = jQuery(this);
            var tr = amount_position.parents('tr');
            var permit_id = tr.find('input[name="permit_id[]"]').val();
            jQuery.ajax({
                url: '{{route('routes.settings.prepaid_expenses.store')}}',
                type: 'POST',
                data: {
                    amount: amount_position.val(),
                    permit_id: permit_id
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, method);
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });
        jQuery('select[name="currency[]"]').on('change', function () {
            var currency_position = jQuery(this);
            var tr = currency_position.parents('tr');
            var permit_id = tr.find('input[name="permit_id[]"]').val();
            jQuery.ajax({
                url: '{{route('routes.settings.prepaid_expenses.store')}}',
                type: 'POST',
                data: {
                    currency: currency_position.val(),
                    permit_id: permit_id
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, method);
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });
        jQuery('input[name="time_period[]"]').on('change', function () {
            var time_period_position = jQuery(this);
            var tr = time_period_position.parents('tr');
            var permit_id = tr.find('input[name="permit_id[]"]').val();
            jQuery.ajax({
                url: '{{route('routes.settings.prepaid_expenses.store')}}',
                type: 'POST',
                data: {
                    period: time_period_position.val(),
                    permit_id: permit_id
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, method);
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });
    </script>
@stop