<?php

// clients/create.blade.php

@extends('layouts.default')

@section('content')
{!! Form::open(['route' => ['app.retailer.clients.store', $retailer->slug], 'novalidate', 'class' => 'validate']) !!}
<div class="row">
    <div class="col-lg-6">
        <div class="form-group{{ $errors->first('name', ' has-error') }}">
            {!! Form::label('name', 'Nome', ['class' => 'control-label col-sm-4']) !!}
            <div class="col-sm-8">
                {!! Form::text('name', null, ['class' => 'form-control', 'required', 'minlength' => 10, 'maxlength' => 100]) !!}
                {!! $errors->first('name', '<span class="help-block">:message</span>') !!}
            </div>
        </div>
    </div>

    <div class="col-lg-12 contacts">
        <table class="table">
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>Contacto</th>
                    <th>Descrição</th>
                    <th width="53px"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="form-group{{ $errors->first('notes', ' has-error') }}">
                        {!! Form::select('contacts[0][type]', App\Models\Contact::getOptions(), null, ['class' => 'form-control', 'required']) !!}
                    </td>
                    <td class="form-group{{ $errors->first('notes', ' has-error') }}">
                        {!! Form::text('contacts[0][value]', null, ['class' => 'form-control', 'placeholder' => 'Contacto', 'required', 'minlength' => 5, 'maxlength' => 100]) !!}
                    </td>
                    <td class="form-group{{ $errors->first('notes', ' has-error') }}">
                        {!! Form::text('contacts[0][value]', null, ['class' => 'form-control', 'placeholder' => 'Descrição', 'minlength' => 3, 'maxlength' => 30]) !!}
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger remove-contact"><i class="fa fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" id="add-contact" class="btn btn-default"><i class="fa fa-plus"></i> Adicionar contacto</button>
    </div>

    <div class="col-sm-12">
        <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Guardar</button>
    </div>
</div>
{!! Form::close() !!}

<script type="template" id="add-contact-template">
    <tr>
        <td class="form-group{{ $errors->first('notes', ' has-error') }}">
            {!! Form::select('contacts[index][type]', App\Models\Contact::getOptions(), null, ['class' => 'form-control', 'required']) !!}
        </td>
        <td class="form-group{{ $errors->first('notes', ' has-error') }}">
            {!! Form::text('contacts[index][value]', null, ['class' => 'form-control', 'placeholder' => 'Contacto', 'required', 'minlength' => 5, 'maxlength' => 100]) !!}
        </td>
        <td class="form-group{{ $errors->first('notes', ' has-error') }}">
            {!! Form::text('contacts[index][value]', null, ['class' => 'form-control', 'placeholder' => 'Descrição', 'minlength' => 3, 'maxlength' => 30]) !!}
        </td>
        <td>
            <button type="button" class="btn btn-danger remove-contact"><i class="fa fa-trash"></i></button>
        </td>
    </tr>
</script>
@endsection

@section('footer')
<script>
    (function () {
        $('.contacts').each(function (i, el) {
            var contact = $('script#add-contact-template').html(),
                nrContacts = $('tbody > tr', el).size();

            $('button#add-contact', el).on('click', function(e) {
                e.preventDefault();
                $('tbody', el).append(contact.replace(new RegExp('index', 'g'), nrContacts++));
            });

            $(el).on('click', 'button.remove-contact', function(e) {
                e.preventDefault();
                $(this).parents('tr').remove();
            });
        });
    })();
</script>
@endsection