@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('fb')|| $errors->has('twitter') || $errors->has('instagram'))
                            class="md-color-red-400" @endif>Social Links</p>
                    </a></li>

                <li><a href="#">
                        <p @if($errors->has('about_us_en')|| $errors->has('about_us_ar')) class="md-color-red-400"
                            @endif>About Us</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('first_feature_en')|| $errors->has('first_feature_ar') ||
                            $errors->has('second_feature_en')|| $errors->has('second_feature_ar'))
                            class="md-color-red-400" @endif>Features</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('settings.store')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <ul id="tabs_anim5" class="uk-switcher uk-margin">
                    {{-- social links --}}
                    <li>
                        <div class="uk-grid uk-margin-medium-top" data-uk-grid-margin>
                            <div class="uk-width-medium-1-1">
                                <label>Facebook Link</label>

                                <input type="text" class="md-input uk-form-width-large"
                                    value="{{old('fb',@$settings->fb)}}" name="fb" required />
                                @error('fb')
                                <p class="md-color-red-400">{{$message}}</p>
                                @enderror
                            </div>
                            <div class="uk-width-medium-1-1">
                                <label>Twitter Link</label>
                                <input type="text" class="md-input uk-form-width-large"
                                    value="{{old('twitter',@$settings->twitter)}}" name="twitter" required />
                                @error('twitter')
                                <p class="md-color-red-400">{{$message}}</p>
                                @enderror
                            </div>
                            <div class="uk-width-medium-1-1">
                                <label>Instagram Link</label>
                                <input type="text" class="md-input uk-form-width-large" name="instagram"
                                    value="{{old('instagram',@$settings->instagram)}}" required />
                                @error('instagram')
                                <p class="md-color-red-400">{{$message}}</p>
                                @enderror
                            </div>
                        </div>
                    </li>
                    {{-- end of social links --}}
                    {{-- 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_us_en" cols="30" rows="4" required
                                                            class="md-input">{{old('about_us_en',optional($settings)->getTranslation('about_us','en'))}}</textarea>
                                                        @error('about_us_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="about_us_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('about_us_ar',optional($settings)->getTranslation('about_us','ar'))}}</textarea>
                                                        @error('about_us_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 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_policy_en" cols="30" rows="4" required
                                                            class="md-input">{{old('privacy_policy_en',optional($settings)->getTranslation('privacy_policy','en'))}}</textarea>
                                                        @error('privacy_policy_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="privacy_policy_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('privacy_policy_ar',optional($settings)->getTranslation('privacy_policy','ar'))}}</textarea>
                                                        @error('privacy_policy_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    {{-- start of features --}}
                    <li>
                        {{-- first feature --}}
                        <h5 class="heading_b uk-margin-bottom">First Feature</h5>

                        <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_9'}">
                                                <li><a href="#">En</a></li>
                                                <li><a href="#">Ar</a></li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-2-3">
                                            <ul id="tabs_9" class="uk-switcher uk-margin-small-top">
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="first_feature_en" cols="30" rows="4" required
                                                            class="md-input">{{old('first_feature_en',optional($settings)->getTranslation('first_feature','en'))}}</textarea>
                                                        @error('first_feature_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="first_feature_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('first_feature_ar',optional($settings)->getTranslation('first_feature','ar'))}}</textarea>
                                                        @error('first_feature_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- second feature --}}
                        <h5 class="heading_b uk-margin-bottom">Second Feature</h5>
                        <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_22'}">
                                                <li><a href="#">En</a></li>
                                                <li><a href="#">Ar</a></li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-2-3">
                                            <ul id="tabs_22" class="uk-switcher uk-margin-small-top">
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="second_feature_en" cols="30" rows="4" required
                                                            class="md-input">{{old('second_feature_en',optional($settings)->getTranslation('second_feature','en'))}}</textarea>
                                                        @error('second_feature_en')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="uk-form-row">
                                                        <textarea name="second_feature_ar" cols="30" rows="4" required
                                                            class="md-input">{{old('second_feature_ar',optional($settings)->getTranslation('second_feature','ar'))}}</textarea>
                                                        @error('second_feature_ar')
                                                        <p class="md-color-red-400">{{$message}}</p>
                                                        @enderror
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                    {{-- features end --}}

                    {{-- 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 required
                                                                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>

<div class="uk-width-larg-1-3" style="margin-top: 10px;">
    <div class="md-card" data-uk-grid-margin>
        <div class="md-card-content">
            <h3 class="heading_b uk-margin-bottom">
                SlideShow
            </h3>
            <form action="{{route('slide.add')}}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="md-card">
                    <div class="md-card-content">
                        <h3 class="heading_a">
                        </h3>
                        <div class="uk-grid">
                            <div class="uk-width-1-1">
                                @error('slides.*')
                                <p class="md-color-red-400">{{$message}}</p>
                                @enderror
                                <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="slides[]" multiple /></a>

                                    <div style="margin-top: 10px;">

                                        <button type="submit"
                                            class="md-btn md-btn-primary md-btn-large md-btn-wave-light waves-effect waves-button waves-light">upload</button>
                                    </div>
                                </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>
            </form>

            <div class="uk-grid" data-uk-grid-margin>
                @foreach(\App\Slide::all() as $slide)
                <div class="uk-width-large-1-4">
                    <div class="md-card">
                        <form action="{{route('slide.delete',$slide->id)}}" method="POST">
                            @csrf
                            @method('DELETE')

                            <button style="float: right;font-weight:bold;" type="submit">X</button>
                        </form>
                        <div class="md-card-content">
                            <img src="{{asset($slide->image)}}" alt="">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection