@extends('panel.components.sidbar')
@section('content')
<div class="uk-width-larg-1">
    <div class="md-card" data-uk-grid-margin>
        <div class="md-card-content">
            <ul class="uk-tab" data-uk-tab="{connect:'#tabs_anim5', animation:'slide-right'}">

                <li><a href="#">
                        <p @if($errors->has('about_en')|| $errors->has('about_ar')) class="md-color-red-400"
                            @endif>About</p>
                    </a></li>

                <li><a href="#">
                        <p @if($errors->has('intro_en')|| $errors->has('intro_ar')) class="md-color-red-400"
                            @endif>Intro</p>
                    </a></li>
                <li><a href="#">
                        <p @if($errors->has('terms_en')|| $errors->has('terms_ar')) class="md-color-red-400"
                            @endif>Terms And Conditions</p>
                    </a></li>
                <li><a href="#">
                        <p @if($errors->has('privacy_policy_ar')|| $errors->has('privacy_policy_en') )
                            class="md-color-red-400" @endif>Privacy And Policy</p>
                    </a></li>

                <li><a href="#">
                        <p @if($errors->has('video')) class="md-color-red-400" @endif>Video</p>
                    </a></li>
            </ul>
            <form action="{{ route('panel.settings.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <ul id="tabs_anim5" class="uk-switcher uk-margin">

                    {{-- start of about us --}}
                    <li>
                        <div class="md-card-content" style="margin-left:-15%;">
                            <div class="uk-grid uk-grid-divider" data-uk-grid-margin>
                                <div class="uk-width-large-1-2">
                                    <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                                        <div class="uk-width-1-3">
                                            <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_6'}">
                                                <li><a href="#">En</a></li>
                                                <li><a href="#">Ar</a></li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-2-3">
                                            <ul id="tabs_6" class="uk-switcher uk-margin-small-top">
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="about_en" cols="30" rows="4" required
                                                            class="md-input">{{old('about_en',optional(@$settings)->getTranslation('about','en'))}}</textarea>
                                                        @error('about_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="about_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('about_arr',optional(@$settings)->getTranslation('about','ar'))}}</textarea>
                                                        @error('about_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{-- end of about us --}}
                    {{-- start of intro --}}
                    <li>
                        <div class="md-card-content" style="margin-left:-15%;">
                            <div class="uk-grid uk-grid-divider" data-uk-grid-margin>
                                <div class="uk-width-large-1-2">
                                    <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                                        <div class="uk-width-1-3">
                                            <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_1'}">
                                                <li><a href="#">En</a></li>
                                                <li><a href="#">Ar</a></li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-2-3">
                                            <ul id="tabs_1" class="uk-switcher uk-margin-small-top">
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="intro_en" cols="30" rows="4" required
                                                            class="md-input">{{old('intro_en',optional(@$settings)->getTranslation('intro','en'))}}</textarea>
                                                        @error('intro_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="intro_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('intro_arr',optional(@$settings)->getTranslation('intro','ar'))}}</textarea>
                                                        @error('intro_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{-- end of intro --}}
                    {{-- start of terms and conditions --}}
                    <li>
                        <div class="md-card-content" style="margin-left:-15%;">
                            <div class="uk-grid uk-grid-divider" data-uk-grid-margin>
                                <div class="uk-width-large-1-2">
                                    <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                                        <div class="uk-width-1-3">
                                            <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_7'}">
                                                <li><a href="#">En</a></li>
                                                <li><a href="#">Ar</a></li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-2-3">
                                            <ul id="tabs_7" class="uk-switcher uk-margin-small-top">
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="terms_en" cols="30" rows="4" required
                                                            class="md-input">{{old('terms_en',optional(@$settings)->getTranslation('terms','en'))}}</textarea>
                                                        @error('terms_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="terms_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('terms_ar',optional(@$settings)->getTranslation('terms','ar'))}}</textarea>
                                                        @error('terms_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{-- end of terms and conditions --}}
                    {{-- privacy and policy start --}}
                    <li>
                        <div class="md-card-content" style="margin-left:-15%;">
                            <div class="uk-grid uk-grid-divider" data-uk-grid-margin>
                                <div class="uk-width-large-1-2">
                                    <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                                        <div class="uk-width-1-3">
                                            <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_8'}">
                                                <li><a href="#">En</a></li>
                                                <li><a href="#">Ar</a></li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-2-3">
                                            <ul id="tabs_8" class="uk-switcher uk-margin-small-top">
                                                <li>
                                                    <div class="uk-form-row">

                                                        <textarea name="privacy_en" cols="30" rows="4" required
                                                            class="md-input">{{old('privacy_en',optional(@$settings)->getTranslation('privacy','en'))}}</textarea>
                                                        @error('privacy_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="privacy_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('privacy_ar',optional(@$settings)->getTranslation('privacy','ar'))}}</textarea>
                                                        @error('privacy_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>


                    {{-- start of video --}}
                    <li>

                        <div class="uk-width-larg-1-3" style="margin-top: 10px;">
                            <div class="md-card" data-uk-grid-margin>
                                <div class="md-card-content" style="text-align: center">
                                    <video width="400" controls>
                                        <source src="@isset($settings){{asset($settings->video)}}@endisset"
                                            type="video/mp4">
                                        Your browser does not support HTML video.
                                    </video>


                                    <div class="md-card">
                                        <div class="md-card-content">
                                            <h3 class="heading_a" style="text-align: center">
                                                By Uploading A New Video That Will Remove The Old One
                                            </h3>
                                            <div class="uk-grid">
                                                <div class="uk-width-1-1">
                                                    <div id="file_upload-drop" class="uk-file-upload">
                                                        <p class="uk-text">Drop file to upload</p>
                                                        <p class="uk-text-muted uk-text-small uk-margin-small-bottom">or
                                                        </p>
                                                        <a class="uk-form-file md-btn">choose file<input
                                                                id="file_upload-select" type="file" name="video" /></a>
                                                        @error('video')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                    <div id="file_upload-progressbar" class="uk-progress uk-hidden">
                                                        <div class="uk-progress-bar" style="width:0">0%</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{-- video end --}}
                </ul>
        </div>
        <div style="text-align:center;padding-bottom:10px;">

            <button type="submit"
                class="md-btn md-btn-primary md-btn-large md-btn-wave-light waves-effect waves-button waves-light">Submit</button>
        </div>
    </div>

    </form>
</div>
@endsection