@extends('layouts.backend')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/modules/questionnaires/style.css') }}">
    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">
                    @if(empty($data)){{ __('Create device') }}@else{{ __('Edit device') }}@endif
                </h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item" aria-current="page">{{ __('Devices') }}</li>
                        <li class="breadcrumb-item active" aria-current="page">@if(empty($data)){{ __('Create item') }}@else{{ __('Edit item') }}@endif</li>

                    </ol>
                </nav>
            </div>
       </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">

        <form action="@if(empty($data)){{ route('DevicesStore') }}@else{{ route('DevicesUpdate', ['devices' => $data->id]) }}@endif" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- Default INPUTS -->

            <!-- Dynamic Table with Export Buttons -->
            <div class="block block-rounded block-bordered">
                <div class="block-header block-header-default">
                    <h3 class="block-title"></h3>
                    <a href="{{ Route('DevicesIndex') }}" class="btn btn-info mr-1 mb-3">{{ __('Back to listing') }}</a>
                    <button type="submit" class="btn btn-success mr-1 mb-3">{{ __('Save item') }}</button>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="block-content block-content-full">
                            <div class="form-group">
                                <label for="serialNumber">{{ __('RMS module - Serial number') }}</label>
                                <input type="text" class="form-control" data-search="macAddress" id="serialNumber" name="serialNumber" placeholder="{{ __('RMS module - Serial number') }}" aria-describedby="serialNumber-error" aria-invalid="true" value="@if(!empty($data->serialNumber)){{ $data->serialNumber }}@endif">
                                <div id="serialNumber-error" class="invalid-feedback animated fadeIn">{{ __('Needed field') }} </div>
                            </div>
                            <div class="form-group">
                                <label for="clientId">{{ __('Client') }}</label>
                                <select class="js-select2 form-control" id="clientId" name="clientId" style="width: 100%;" data-placeholder="{{ __('Choose one..') }}" aria-describedby="clientId-error" aria-invalid="true">
                                    <option></option>
                                    @foreach ($clients as $key => $value)
                                        <option value="{{ $key }}" @if(!empty($data)) @if($key == $data->clientId) selected="selected" @endif @endif>{{ $value }}</option>
                                    @endforeach
                                </select>
                                <div id="clientId-error" class="invalid-feedback animated fadeIn">{{ __('Needed field') }} </div>
                            </div>
                            <div class="form-group">
                                <label for="projectId">{{ __('Project ID') }}</label>
                                <input type="text" class="form-control" id="projectId" name="projectId" placeholder="{{ __('Project ID') }}" aria-describedby="projectId-error" aria-invalid="true" value="@if(!empty($data->projectId)){{ $data->projectId }}@endif">
                                <div id="projectId-error" class="invalid-feedback animated fadeIn">{{ __('Needed field') }} </div>
                            </div>
                            <div class="form-group">
                                <label for="installationPlace">{{ __('Installation place') }}</label>
                                <input type="text" class="form-control" id="installationPlace" name="installationPlace" placeholder="{{ __('Installation place') }}" aria-describedby="installationPlace-error" aria-invalid="true" value="@if(!empty($data->installationPlace)){{ $data->installationPlace }}@endif">
                                <div id="installationPlace-error" class="invalid-feedback animated fadeIn">{{ __('Needed field') }} </div>
                            </div>
                            <div class="form-group">
                                <label>{{ __('Status') }}</label>
                                <div class="custom-control custom-switch mb-1">
                                    <input type="checkbox" class="custom-control-input" id="status" name="status" value="1" checked="">
                                    <label class="custom-control-label" for="status">{{ __('Active') }}</label>
                                </div>
                            </div>
                            <h2 class="content-heading">{{ __('Equipments') }}</h2>
                            <div class="form-group">
                                @if(!empty($equipments) && count($equipments)>0)
                                    @foreach ($equipments as $key => $value)
                                        <div class="equipments form-input-group mb-3">
                                            <input readonly type="text" class="col-3 form-control" name="equipments[serialNumber][]" placeholder="{{ __('Serial number') }}" aria-describedby="name-error" aria-invalid="true" value="{{ $value->serialNumber }}">
                                            <input type="text" class="col-3 form-control" name="equipments[name][]" placeholder="{{ __('Name') }}" aria-describedby="name-error" aria-invalid="true" value="{{ $value->name }}">
                                            <button type="button" class="btn btn-outline-success mr-1 addEquipments">
                                                <i class="fa fa-fw fa-plus mr-1"></i>{{ __('Add') }}
                                            </button>
                                            <button type="button" class="btn btn-outline-danger mr-1 deleteEquipments" style="display: none;">
                                                <i class="fa fa-fw fa-times mr-1"></i>{{ __('Delete') }}
                                            </button>
                                        </div>
                                        <div id="equipment-error" class="invalid-feedback animated fadeIn">{{ __('Needed field') }} </div>
                                    @endforeach
                                @else
                                    <div class="equipments form-input-group mb-3">
                                        <input type="text" class="col-3 form-control" name="equipments[serialNumber][]" placeholder="{{ __('Serial number') }}" aria-describedby="name-error" aria-invalid="true">
                                        <input type="text" class="col-3 form-control" name="equipments[name][]" placeholder="{{ __('Name') }}" aria-describedby="name-error" aria-invalid="true">
                                        <button type="button" class="btn btn-outline-success mr-1 addEquipments">
                                            <i class="fa fa-fw fa-plus mr-1"></i>{{ __('Add') }}
                                        </button>
                                        <button type="button" class="btn btn-outline-danger mr-1 deleteEquipments" style="display: none;">
                                            <i class="fa fa-fw fa-times mr-1"></i>{{ __('Delete') }}
                                        </button>
                                    </div>
                                    <div id="equipment-error" class="invalid-feedback animated fadeIn">{{ __('Needed field') }} </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Dynamic Table with Export Buttons -->
        </form>
    </div>
    <!-- END Page Content -->

    <script>
        $(document).ready(function() {
            if($(".equipments").length > 1) {
                $(".addEquipments").hide();
                $(".deleteEquipments").show();
                $(".addEquipments").last().show();
            }
            else {
                $(".deleteEquipments").hide();
                $(".addEquipments").show();
            }

            $(document).on("click", ".deleteEquipments", function() {
                let formGroup = $(this).closest("div.form-group");
                $(this).closest("div.form-input-group").remove();

                showButton(formGroup);
            });

            $(document).on("click", ".addEquipments", function() {
                let clone = $(this).closest("div.form-input-group").clone();
                let formGroup = $(this).closest("div.form-group");

                clone.find("input").val('');
                clone.appendTo(formGroup);
                clone.find("input").removeAttr('readonly');
                formGroup.find(".addEquipments").hide();

                showButton(formGroup);
            });
        });

        function showButton(formGroup) {
            if($(".equipments").length > 1) {
                formGroup.find(".deleteEquipments").show();
                formGroup.find(".addEquipments").last().show();
            }
            else {
                formGroup.find(".deleteEquipments").hide();
                formGroup.find(".addEquipments").show();
            }
        }
    </script>
@endsection