@extends('layouts.app')

@section('title', $customer->name)

@section('content')
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ $customer->name }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('customer.update', $customer) }}">
                            @csrf
                            @method('PUT')
                            <div class="form-row">
                                <div class="col-md-6 mb-3">
                                    <label for="name">{{ __('Customer Name') }}</label>
                                    <input id="name" type="text"
                                           class="form-control @if($errors->has('name')) is-invalid @endif"
                                           name="name"
                                           value="{{ $customer->name }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('name'))
                                            {{ $errors->first('name') }}
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="type">{{ __('Customer Type') }}</label>
                                    <input id="type" type="text"
                                           class="form-control @if($errors->has('type')) is-invalid @endif" name="type"
                                           value="{{ $customer->type }}"
                                    />
                                    <div class="invalid-tooltip">
                                        @if($errors->has('type'))
                                            {{ $errors->first('type') }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-12 mb-3">
                                    <h6 class="float-left"
                                        style="line-height: 1.5;display: inline-block;height: 28.9px;padding: 5px;margin: 0;">{{ __('Data') }}</h6>
                                    <button type="button" class="btn btn-sm btn-outline-primary float-right"
                                            onclick="addData()">{{ __('Add') }}
                                    </button>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-md-12">
                                    <div id="data-area">
                                        @foreach($customer->data as $data)
                                            <div class="data form-row mb-2">
                                                <div class="col-md-4">
                                                    <input type="text"
                                                           class="form-control @if($errors->has('data.' . $loop->index . '.name')) is-invalid @endif"
                                                           name="data[{{ $loop->index }}][name]"
                                                           value="{{ $data->name }}" placeholder="{{ __('Data') }}"
                                                    />
                                                    <div class="invalid-tooltip">
                                                        @if($errors->has('data.' . $loop->index . '.name'))
                                                            {{ $errors->first('data.' . $loop->index .'.name') }}
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <input type="text"
                                                           class="form-control @if($errors->has('data.' . $loop->index . '.description')) is-invalid @endif"
                                                           name="data[{{ $loop->index }}][description]"
                                                           value="{{ $data->description }}" placeholder="{{ __('Description') }}"
                                                    />
                                                    <div class="invalid-tooltip">
                                                        @if($errors->has('data.' . $loop->index . '.description'))
                                                            {{ $errors->first('data.' . $loop->index .'.description') }}
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-4 row">
                                                    <div class="col-11">
                                                        <select class="custom-select"
                                                                name="data[{{ $loop->index }}][type]">
                                                            <option value="Phone"
                                                                    @if($data->type == 'Phone') selected @endif>{{ __('Phone') }}</option>
                                                            <option value="Address"
                                                                    @if($data->type == 'Address') selected @endif>{{ __('Address') }}</option>
                                                            <option value="Email"
                                                                    @if($data->type == 'Email') selected @endif>{{ __('Email') }}</option>
                                                            <option value="Website"
                                                                    @if($data->type == 'Website') selected @endif>{{ __('Website') }}</option>
                                                            <option value="Location"
                                                                    @if($data->type == 'Location') selected @endif>{{ __('Location') }}</option>
                                                            <option value="Name"
                                                                    @if($data->type == 'Name') selected @endif>{{ __('Name') }}</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-1">
                                                        <button type="button" class="btn btn-danger" onclick="removeRow(event)">
                                                            <i class="fas fa-minus-circle"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-outline-success float-left">{{ __('Update') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function addData() {
            const data = document.getElementsByClassName('data');
            const data_area = document.getElementById('data-area');

            const newData = document.createElement('div');
            newData.className = 'data form-row mb-2';

            const col_first = document.createElement('div');
            col_first.className = 'col-md-4';

            const name = document.createElement('input');
            name.className = 'form-control';
            name.setAttribute('type', 'text');
            name.setAttribute('placeholder', '{{ __('Data') }}');
            name.setAttribute('name', 'data[' + (data.length) + '][name]');


            const col_middle = document.createElement('div');
            col_middle.className = 'col-md-4';

            const description = document.createElement('input');
            description.className = 'form-control';
            description.setAttribute('type', 'text');
            description.setAttribute('placeholder', '{{ __('Description') }}');
            description.setAttribute('name', 'data[' + (data.length) + '][description]');

            const col_last = document.createElement('div');
            col_last.className = 'col-md-4 row';

            const typeCol = document.createElement('div');
            typeCol.className = 'col-11';

            const type = document.createElement('select');
            type.setAttribute('name', 'data[' + (data.length) + '][type]');
            type.className = 'custom-select';


            const phoneOption = document.createElement('option');
            phoneOption.setAttribute('value', 'Phone');
            phoneOption.textContent = '{{ __('Phone') }}';

            const addressOption = document.createElement('option');
            addressOption.setAttribute('value', 'Address');
            addressOption.textContent = '{{ __('Address') }}';

            const emailOption = document.createElement('option');
            emailOption.setAttribute('value', 'Email');
            emailOption.textContent = '{{ __('Email') }}';

            const websiteOption = document.createElement('option');
            websiteOption.setAttribute('value', 'Website');
            websiteOption.textContent = '{{ __('Website') }}';

            const locationOption = document.createElement('option');
            locationOption.setAttribute('value', 'Location');
            locationOption.textContent = '{{ __('Location') }}';

            const nameOption = document.createElement('option');
            nameOption.setAttribute('value', 'Name');
            nameOption.textContent = '{{ __('Name') }}';

            type.append(phoneOption);
            type.append(addressOption);
            type.append(emailOption);
            type.append(websiteOption);
            type.append(locationOption);
            type.append(nameOption);

            const btnCol = document.createElement('div');
            btnCol.className = 'col-1';

            const btn = document.createElement('button');
            btn.className = 'btn btn-danger';
            btn.setAttribute('type', 'button');
            btn.innerHTML = '<i class="fas fa-minus-circle"></i>';
            btn.addEventListener('click', removeRow);

            col_first.append(name);

            col_middle.append(description);

            typeCol.append(type);
            btnCol.append(btn);

            col_last.append(typeCol);
            col_last.append(btnCol);

            newData.append(col_first);
            newData.append(col_middle);
            newData.append(col_last);

            data_area.append(newData);
            data_area.append(newData);
        }

        function removeRow(e) {
            let target = e.target,
                parent = $(target).parents('.data'),
                count = $(target).parents('#data-area').find('.data').length;
            if(count == 1) {
                return;
            }
            parent.remove();
        }
    </script>
@endsection