@extends('layouts.management')

@section('content')
    <style>
        .js-accordion-body {
            display: none;
        }
    </style>

    <section class="header-page management-header-bg" style="height: 350px">
        <div class="tag-header">Management</div>
        <h2 class="title-header">Manage projects : New</h2>
    </section>

    <section class="tree-details">
        <div class="container-tree">
            <div class="tree-text">
                <div class="tree-arbo">
                    <a href="{{ route('management') }}">Management</a> &gt; <a
                        href="{{ route('management.projects') }}">Projets</a>
                    > <span
                        class="tree-arbo-current">New</span></div>
            </div>
        </div>
    </section>

    <section class="content management">
        <form method="POST" enctype="multipart/form-data" action="#">
            @csrf

            @if($errors->any())
                <p class="error-popup"><b>Erreur</b><br>{{$errors->first()}}</p><br/>
            @endif
            <div id="w-node-d29d89b9-3f2a-e4ee-05fb-e5257e405936-b4b88694" class="management-card">
                <div class="w-form">

                    <label for="title" class="field-label first">Informations</label>
                    <div class="form-space-left">

                        <select name="categories[]" class="select-field w-select" multiple required>
                            @foreach($categories as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}</option>
                            @endforeach
                        </select>

                        <input class="management-field-input w-input" name="url" placeholder="Website URL"
                               type="url">
                    </div>

                    <label for="title-2" class="field-label">Illustrations</label>
                    <div class="form-space-left">
                        <label for="" class="option-label">Slider CTA (Format: 1480 x 1480) * :</label>
                        <input type="file" class="form-control w-file-upload" name="img_slider" required>
                        <label for="" class="option-label">Header (Format: 2220 x 1254) * :</label>
                        <input type="file" class="form-control w-file-upload" name="img_1" required>
                        <label for="" class="option-label">Content 1 (Format: 2220 x 1254) :</label>
                        <input type="file" class="form-control w-file-upload" name="img_2">
                        <label for="" class="option-label">Content 2 (Format: 2220 x 1254) :</label>
                        <input type="file" class="form-control w-file-upload" name="img_3"><br/>

                        <label for="" class="option-label">Feedback customer (Format: 2220 x 1254) :</label>
                        <input type="file" class="form-control w-file-upload" name="img_feedback">
                    </div>

                    <label for="feedback_customer" class="field-label">Feedback customer</label>
                    <div class="form-space-left">
                        <input class="management-field-input w-input" name="feedback_customer"
                               placeholder="Customer Name" type="text">
                    </div>

                    <label for="feedback_customer-2" class="field-label">Others</label>
                    <div class="form-space-left">
                        <div class="w-row">
                            <div class="w-col w-col-4">
                                <label for="" class="option-label">New project ?</label>
                                <label class="w-radio">
                                    <input type="radio" name="new_project" id="new_project_yes" data-name="new_project"
                                           required=""
                                           class="w-form-formradioinput w-radio-input" value="1">
                                    <span class="radio-label w-form-label" for="new_project_yes">Yes</span>
                                </label>

                                <label class="w-radio">
                                    <input type="radio" name="new_project" id="new_project_no"
                                           required="" checked
                                           class="w-form-formradioinput w-radio-input" value="0">
                                    <span class="radio-label w-form-label" for="new_project_no">No</span>
                                </label>
                            </div>

                            <div class="w-col w-col-4">
                                <label for="" class="option-label">Project Pinned ?</label>
                                <label class="w-radio">
                                    <input type="radio" name="pinned" id="pinned_yes"
                                           required=""
                                           class="w-form-formradioinput w-radio-input" value="1">
                                    <span class="radio-label w-form-label" for="pinned_yes">Yes</span>
                                </label>

                                <label class="w-radio">
                                    <input type="radio" name="pinned" id="pinned_no"
                                           required="" checked
                                           class="w-form-formradioinput w-radio-input" value="0">
                                    <span class="radio-label w-form-label" for="pinned_no">No</span>
                                </label>
                            </div>

                            <div class="w-col w-col-4">
                                <label for="" class="option-label">Project displayed ?</label>
                                <label class="w-radio">
                                    <input type="radio" name="displayed" id="displayed_yes"
                                           required=""
                                           class="w-form-formradioinput w-radio-input" value="1">
                                    <span class="radio-label w-form-label" for="displayed_yes">Yes</span>
                                </label>

                                <label class="w-radio">
                                    <input type="radio" name="displayed" id="displayed_no"
                                           required="" checked
                                           class="w-form-formradioinput w-radio-input" value="0">
                                    <span class="radio-label w-form-label" for="displayed_no">No</span>
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div data-ix="fade-up-1" class="accordion js-accordion">
                @foreach(config('app.language') as $k => $v)
                    <div class="accordion__item js-accordion-item">
                        <div class="accordion-header js-accordion-header">
                            <img alt=""
                                 src="{{ asset('images/flags/'.$k.'.png') }}"
                                 class="accordion_item-image">
                            <h5 class="accordion-title">{{ $v }}</h5>
                            <picture>
                                <source srcset="{{ asset('images/icons/chevron_management_w.svg') }}"
                                        media="(prefers-color-scheme: dark)">
                                <img loading="lazy"
                                     src="{{ asset('images/icons/chevron_management_b.svg') }}"
                                     alt="" class="js-accordion-icon">
                            </picture>
                        </div>

                        <div data-ix="hide-on-load" class="accordion-body js-accordion-body">
                            <input class="management-field-input w-input" maxlength="256"
                                   name="title[{{ $k }}]" placeholder="Title project *"
                                   type="text" id="title" required="">

                            <textarea placeholder="Description *" name="description[{{ $k }}]" required=""
                                      style="margin-bottom: 8px"
                                      class="contact-field-textarea w-input"></textarea>

                            <textarea placeholder="Description secondary" name="description_2[{{ $k }}]"
                                      style="margin-bottom: 8px"
                                      class="contact-field-textarea w-input"></textarea>

                            <textarea placeholder="Technology description *" name="technologie_description[{{ $k }}]"
                                      style="margin-bottom: 8px"
                                      class="contact-field-textarea w-input"></textarea>

                            <br/>

                            <input class="management-field-input w-input" name="feedback_customer_function[{{ $k }}]"
                                   placeholder="Feedback Customer Function Name" type="text">

                            <textarea placeholder="Feedback Customer Text" name="feedback_description[{{ $k }}]"
                                      class="contact-field-textarea w-input"></textarea>
                        </div>
                    </div>
                @endforeach

            </div>

            <div class="div-block-6">
                <input type="submit" class="btn-contact-submit w-button" style="margin:auto"
                       value="Add project"></div>
        </form>
    </section>

@endsection

@section('scripts')
    <script src="{{ asset('js/florianvieira.min.js')}}" type="text/javascript"></script>

@endsection