@extends('layouts_old.main')

@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/forms.css')}}"/>
@endsection

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div class="main-wrapper">
    <div id="modules">
        <div class="row justify-content-between Header mb-5">
            <div class="col-md-8 d-flex flex-column justify-content-center justify-content-md-start Header-breadcrumbs">

                {{ Breadcrumbs::render('createunit') }}
                <h2 class="page-title">Create New Unit</h2>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end Header-buttons">
                <a href="{{route('units.list')}}" class="Header-buttons--button">
                    <img src="{{asset('images/button_back.svg')}}" class="homeHeader-buttons--button--img">
                    <p class="Header-buttons--button--text Header-buttons--button--back">Back</p>
                </a>
            </div>
        </div>
        <div class="row Content">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form action="{{ route('units.store') }}" method="POST">
                <div class="form-inner-container">
                    @csrf
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" name="name" class="form-control name" placeholder="Name">
                    </div>

                    <div class="form-group">
                        <label>English Name:</label>
                        <input type="text" name="name_en" class="form-control english-name" placeholder="English Name">
                    </div>

                    <div class="form-group">
                        <label>Acronym:</label>
                        <input type="text" name="acronym" class="form-control acronym" placeholder="Acronym">
                    </div>

                    <div class="form-group">
                        <label>English Acronym:</label>
                        <input type="text" name="acronym_en" class="form-control english-acronym"
                               placeholder="English Acronym">
                    </div>

                    <div class="form-group">
                        <label for="cars">Choose a unit category:</label>

                        <select class="form-select" name="unit_category_id" id="cars">
                            @foreach($categories as $category)
                                <option value="{{$category->id}}">{{$category->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" data-tick-icon=" ">
                        <label for="buildings" >Buildings:</label>

                        <select class="form-select selectpicker" id="buildings" multiple data-live-search="true" name="building_ids[]" >
                            @foreach($buildings as $building)
                                <option value="{{$building->id}}">{{$building->name_en}} {{$building->description_en ? ' | ' . $building->description_en : ''}}</option>
                            @endforeach
                        </select>
                    </div>
                    <h2>Microservices & Unit Code</h2>
                    @foreach($microservices as $microservice)
                        <div class="form-group">
                            <label>{{$microservice->view_name}}</label>
                            <input type="text" name="{{$microservice->name}}"
                                   class="form-control english-acronym"
                                   placeholder="unit code">
                        </div>
                    @endforeach
                    <div class="btn-container">
                        <button type="submit" class="btn">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </div>
    </div>
@endsection