@extends('layouts.app')

@section('pageStyle')
<!-- chosen -->
<link href="{{ url('public/css/plugins/chosen/chosen.css') }}" rel="stylesheet">
@endsection

@section('content')

<div id="page-wrapper" class="gray-bg">      
    <!------------Content Area Start-------------------------->
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-12">
            <h2>{{ $title }}</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                </li>
                <li>
                    <a href="{{ url('project/all-projects') }}">Projects</a>
                </li>
                <li class="active">
                    <strong>{{ $title }}</strong>
                </li>
            </ol>
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">
                        {{ all_errors($errors) }}

                        @include('layouts.flash')

                        {{ Form::open(['url' => 'project/update/'.$project->id, 'method' => 'patch', 'class' => 'form-horizontal', 'role' => 'form' ]) }}

                        <div class="col-lg-8 col-lg-offset-2 col-sm-12 clearfix">

                            <div class="row">

                                <div class="form-group">

                                    {{ Form::label('project_identifier', 'Project ID *', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        <div class="input-group m-b">

                                            {{ Form::text('project_identifier', $project->project_identifier, ['class' => 'form-control', 'id' => 'project_id', 'placeholder' => 'Project ID']) }}

                                            <span class="input-group-btn">
                                                <button class="btn btn-warning" type="button" onclick="check_availability()">Check Availability</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">

                                    {{ Form::label('name', 'Project Name *', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::text('name', $project->name, ['required', 'class' => 'form-control', 'placeholder' => 'Project Name']) }}
                                    </div>

                                </div>

                                <div class="form-group">

                                    {{ Form::label('city', 'City Name *', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::text('city', $project->city, ['required', 'class' => 'form-control', 'placeholder' => 'City Name']) }}
                                    </div>
                                </div>

                                <div class="form-group">

                                    {{ Form::label('zipcode', 'Zip Code *', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::text('zipcode', $project->zipcode, ['required', 'class' => 'form-control', 'placeholder' => 'Zip Code']) }}
                                    </div>

                                </div>

                                <div class="form-group">

                                    {{ Form::label('state', 'State *', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::text('state', $project->state, ['required', 'class' => 'form-control', 'placeholder' => 'State']) }}
                                    </div>
                                </div>

                                <div class="form-group">

                                    {{ Form::label('client_name', 'Client Name', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::text('client_name', $project->client_name, ['required', 'class' => 'form-control', 'placeholder' => 'Client Name']) }}
                                    </div>
                                </div>

                                <div class="form-group">

                                    {{ Form::label('no_of_scenario', 'No of Scenario *', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-4">
                                        {{ Form::number('no_of_scenario', $project->no_of_scenario, ['required', 'class' => 'form-control add_Scenario', 'min' => 1, 'autocomplete' => 'off']) }}
                                    </div>
                                </div>

                                <div class="row ">
                                    <div class="col-lg-12">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered Scenario_wrapper">
                                                <thead>
                                                    <tr>
                                                        <th>Action</th>
                                                        <th>Scenario Name</th>
                                                        <th>Scenario Description</th>
                                                        <th>List of year</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($project->scenarios as $key => $scenario)
                                                    <tr>
                                                        <td><button type="button" class="btn btn-danger btn-xs remove_field"><i aria-hidden="true" class="fa fa-times"></i></button></td>
                                                        <td>
                                                            <input class="form-control" value="{{ $scenario->name }}" name="scenario_name[]" type="text">
                                                        </td>
                                                        <td>
                                                            <input class="form-control" value="{{ $scenario->description }}" name="description[]" type="text">
                                                        </td>
                                                        <td>
                                                            <table class="add_field">
                                                                <tbody>
                                                                    <tr>
                                                                        <td></td>
                                                                        <td>
                                                                            <button type="button" class="btn btn-primary btn-xs add_year"><i aria-hidden="true" class="fa fa-plus"></i></button>
                                                                        </td>
                                                                        @forelse(explode('||',$scenario->year) as $year)
                                                                        <td>
                                                                            <div class="input-group m-b">
                                                                                <input class="form-control" value="{{ $year }}" placeholder="2016" type="text" name="year{{ ($key+1) }}[]">
                                                                                <a class="input-group-addon remove_tr"><i aria-hidden="true" class="fa fa-times"></i></a>
                                                                            </div>
                                                                        </td>
                                                                        @empty

                                                                        @endforelse
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                    @empty

                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label text-left">Project Location</label>
                                    <div class="col-sm-9">
                                        <div class="input-group m-b">
                                            <input class="form-control" type="text" name="location" id="location" value="{{ $project->location }}">
                                            <span class="input-group-btn">
                                                <button class="btn btn-warning" data-toggle="modal" data-target="#myModal2" type="button">Add Location</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">

                                    <label class="col-sm-3 control-label text-left">Assign User</label>
                                    <div class="col-sm-9">
                                        <select class="form-control chosen-select" name="users[]" multiple="">
                                            @forelse($users as $user)
                                            <option value="{{ $user->id }}" {{ (in_array($user->id, $project_users)) ? 'selected' : '' }}>{{ $user->name }}</option>
                                            @empty
                                            <option value="" disabled="" selected="">Create a user first</option>
                                            @endforelse
                                        </select>
                                    </div>

                                </div>

                                <div class="form-group">

                                    {{ Form::label('desc', 'Project Description', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::textarea('desc', $project->desc, ['rows' => 5, 'class' => 'form-control']) }}
                                    </div>

                                </div>

                                {{ Form::submit('submit', ['class' => 'btn btn-primary pull-right']) }}
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div> 

                    <div class="clear-list"></div>
                </div>

            </div>
        </div>
    </div>        
</div>

<!------------Map Modal----------------->
<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Google Map</h6>
            </div>
            <div class="modal-body" style="min-height: 400px;">
                <div id="mapCanvas" style="width: 100%; height: 400px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('pageScript')

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9tDYdgORNidG8nQ4OkJM96LukDJMUU5U&callback=initialize">
</script>

<script src="{{ url('public/js/plugins/chosen/chosen.jquery.js') }}"></script>
<script>
    var map;

    function initialize(lat, lon) {
        
        var gmarkers = [];
            
        var mapOptions = {
            center: new google.maps.LatLng(lat, lon),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("mapCanvas"),
                mapOptions);
        
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lon),
          map: map,
        });
        
        gmarkers.push(marker);
        
        map.addListener('click', function (e) {
            removeMarkers();
            placeMarkerAndPanTo(e.latLng, map);
        });
        
        function removeMarkers(){
            for(i=0; i<gmarkers.length; i++){
                gmarkers[i].setMap(null);
            }
        }

    }

    function placeMarkerAndPanTo(latLng, map) {

        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
        map.panTo(latLng);

        $('#location').val(latLng);
    }


    $(document).ready(function () {

        var APP_URL = '