@extends('backend.template.layout')
@section('title',__('Nouvelle compétition'))
@section('content_container', 'kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid')
@section('head')
    <link rel="stylesheet" href="{{ url(mix('assets/backend/css/competition.css')) }}">
@endsection
@section('content')
    <div class=row id=competition-create-app>
        <div class=col-lg-12>
            <!--begin::Portlet-->
            <div class="kt-portlet kt-portlet--last kt-portlet--head-lg kt-portlet--responsive-mobile" id=kt_page_portlet>
                <div class="kt-portlet__head kt-portlet__head--lg">
                    <div class=kt-portlet__head-label>
                        <h3 class=kt-portlet__head-title>@lang('Nouvelle compétition')</h3>
                    </div>
                    <div class=kt-portlet__head-toolbar>
                        <a href="{{route('competitions.index')}}" class="btn btn-clean kt-margin-r-10">
                            <i class="la la-arrow-left"></i>
                            <span class=kt-hidden-mobile>@lang('Arrière')</span>
                        </a>
                        <div class=btn-group>
                            <button type=button class="btn btn-brand" id=save-btn>
                                <i class="la la-check"></i>
                                <span class=kt-hidden-mobile>@lang('Sauvegarder')</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class=kt-portlet__body>
                    <form class=kt-form id=competition_add_form action="{{ route('competitions.store') }}" data-url-success="{{ route('competitions.index') }}">
                        <div class=row>
                            <div class=col-xl-12>
                                <div class="kt-section kt-section--first">
                                    <div class=kt-section__body>
                                        <div class="form-group row">
                                            <label class="col-12 col-form-label" for=name>@lang('Nom')</label>
                                            <div class=col-12>
                                                <input class=form-control type=text name=name id=name dir=rtl>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class=row>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="col-3 col-form-label">@lang('Statut')</label>
                                    <div class=col-3>
                                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
                                    <label>
                                        <input type=checkbox checked=checked name=status id=status>
                                        <span></span>
                                    </label>
                                </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="col-3 col-form-label">@lang('Plusieurs groupes')</label>
                                    <div class=col-3>
                                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--danger">
                                    <label>
                                        <input type=checkbox name=groups id=groups>
                                        <span></span>
                                    </label>
                                </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label class="col-3 col-form-label">@lang('Aller-retour')</label>
                                    <div class=col-3>
                                <span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--info">
                                    <label>
                                        <input type=checkbox name=roundtrip id=roundtrip>
                                        <span></span>
                                    </label>
                                </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3 col-sm-12" for=type_id>@lang('Type')</label>
                            <div class="col-lg-4 col-md-9 col-sm-12">
                                <select class="form-control" id=type_id name=type_id required dir=rtl>
                                    @foreach (\App\Models\NewsType::whereStatus(1)->where('has_competitions',1)->get() as $news_type)
                                        <option value="{{ $news_type->id }}">{{ $news_type->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-last row">
                            <label class="col-3 col-form-label">@lang('Équipes')</label>
                            <div class=col-9>
                                <vue-select-sides
                                    type=mirror
                                    v-model=selected
                                    :list=list
                                    :search=props.search
                                    :total=props.total
                                    :toggle-all=props.toggleAll
                                    :required=props.required
                                    :order-by=props.order
                                ></vue-select-sides>
                                <input type=hidden name=teams required>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--end::Portlet-->
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ url(mix('assets/backend/js/competition-add.js')) }}"></script>
    <script>
        CompetitionCreateApp.setTeams(@json(\App\Models\Team::whereStatus(1)->get(['id as value','name as label'])));
    </script>
@endsection