@extends('layouts.master')

@section('content')
    <div class="container-xxl">

        <x-breadcrumb listRoute="{{ route('admin.teams.index') }}" model="Team" item="Create"></x-breadcrumb>

        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="product-detail-tab" data-bs-toggle="tab"
                            data-bs-target="#createTabContent" type="button" role="tab" aria-controls="product-detail"
                            aria-selected="true">Team</button>
                    </li>

                </ul>
                <x-form.wrapper action="{{ route('admin.teams.store') }}" method="POST" enctype="multipart/form-data">
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Name" :req="true" id="name"
                            name="name" value="{{ old('name') }}" />
                        <x-form.input type="text" col="6" label="Slug" :req="true" id="slug"
                            name="slug" value="{{ old('slug') }}" />
                    </x-form.row>
                    <x-form.row>
                        <div class="col-lg-6">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*" onchange="previewThumb(this,'featured-thumb')" />
                            <x-form.preview id="featured-thumb" />
                        </div>

                        <div class="col-lg-6">
                            <x-form.select label="Team Category" :req="true" :options="$teamCategories" name="category_id">
                            </x-form.select>
                        </div>
                    </x-form.row>

                    <x-form.row>

                        <x-form.input type="text" :req="true" col="4" label="Post" id="post"
                            name="post" />
                        <x-form.input :req="true" type="number" col="4" label="Order No." id="slug"
                            name="order" />
                        <x-form.input type="text" col="4" label="Phone Number" id="ph_number" name="phone"
                            value="{{ old('phone') }}" />
                    </x-form.row>
                    <x-form.row>

                        <x-form.input type="text" col="4" label="Email" :req="true" id="email"
                            name="email" value="{{ old('email') }}" />
                        <x-form.input type="text" col="4" label="Fb Link" id="fb_link" name="fb_link"
                            value="{{ old('fb_link') }}" />

                        <x-form.input type="text" col="4" label="Instagram Link" id="insta_link" name="insta_link"
                            value="{{ old('insta_link') }}" />

                        <x-form.input type="text" col="4" label="Twitter Link" id="x_link" name="x_link"
                            value="{{ old('x_link') }}" />
                        <x-form.input type="text" col="4" label="Linkedin Link" id="linkedin_link"
                            name="linkedin_link" value="{{ old('linkedin_link') }}" />

                    </x-form.row>

                    <br />
                    <x-form.textarea isEditor="true" label="Description" :req="true" id="description"
                        name="description" value="{!! old('description') !!}" rows="5" cols="5" />
                    <div class="px-1 mt-3">
                        <x-form.row>
                            <div class="col-2">
                                <x-form.checkbox label="Is Expert" id="is_expert" name="is_expert" value="1"
                                    class="form-check-input" />
                            </div>
                            <div class="col-2">
                                <x-form.checkbox label="Status" id="status" name="status" value="1"
                                    class="form-check-input" />
                            </div>
                        </x-form.row>
                    </div>
                    <x-form.button class="btn btn-sm btn-dark" type="submit"><i class='bx bx-save bx-xs'></i> Save
                    </x-form.button>
                </x-form.wrapper>
            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    @include('_helpers.slugify', ['title' => 'name'])
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.ck_editor', ['textarea_id' => 'content'])
    @include('_helpers.ajax_form')
@endpush