@extends('panel.components.sidbar')
@section('content')





<div class="md-card uk-margin-medium-bottom">
    <div class="md-card-content">
        @isset($whySpider)
        <form action="{{route('panel.why-spiders.update',$whySpider)}}" method="POST" enctype="multipart/form-data">
            @method('put')
            @else
            <form action="{{route('panel.why-spiders.store')}}" method="POST" enctype="multipart/form-data">
                @endisset
                @csrf
                <h3 class="heading_a">Create Why Spider</h3>



                <h5>Head</h5>
                <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="#">AR</a></li>
                                    <li><a href="#">EN</a></li>
                                </ul>
                            </div>
                            <div class="uk-width-1-2">
                                <ul id="tabs_1" class="uk-switcher uk-margin-small-top">
                                    <li>
                                        <div class="uk-width-large-1">
                                            @isset($whySpider)

                                            <input name="ar_head" placeholder="أدخل العنوان باللغه العربية"
                                                class="md-input masked_input label-fixed"
                                                value="{{old('ar_head',$whySpider->getTranslation('head','ar'))}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @else

                                            <input name="ar_head" placeholder="أدخل العنوان باللغه العربية"
                                                class="md-input masked_input label-fixed" value="{{old('ar_head')}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @endisset
                                            @error('ar_head')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                    <li>
                                        <div class="uk-width-medium-1">
                                            @isset($whySpider)

                                            <input name="en_head" placeholder="Enter The Head In English"
                                                class="md-input masked_input label-fixed"
                                                value="{{old('en_head',$whySpider->getTranslation('head','en'))}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @else

                                            <input name="en_head" placeholder="Enter The Head In English"
                                                class="md-input masked_input label-fixed" value="{{old('en_head')}}"
                                                id="masked_currency" type="text"
                                                data-inputmask="'alias': 'currency', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                                data-inputmask-showmaskonhover="false" />
                                            @endisset
                                            @error('en_head')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <h5>Body</h5>
                <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

                    <div class="uk-width-large-1">
                        <div class="uk-grid uk-grid-medium" data-uk-grid-margin>
                            <div class="uk-width-1-6">
                                <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_6'}">
                                    <li><a href="#">AR</a></li>
                                    <li><a href="#">EN</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">
                                            @isset($whySpider)

                                            <textarea name="ar_body" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="أدخل التفسير باللغه العربيه">{{old('ar_body',$whySpider->getTranslation('body','ar'))}}</textarea>
                                            @else

                                            <textarea name="ar_body" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="أدخل التفسير باللغه العربيه">{{old('ar_body')}}</textarea>
                                            @endisset

                                            @error('ar_body')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                    <li>
                                        <div class="uk-form-row">
                                            @isset($whySpider)
                                            <textarea name="en_body" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="Enter The Body In English">{{old('en_body',$whySpider->getTranslation('body','en'))}}</textarea>
                                            @else
                                            <textarea name="en_body" cols="30" rows="4" class="md-input no_autosize"
                                                placeholder="Enter The Body In English">{{old('en_body')}}</textarea>
                                            @endisset

                                            @error('en_body')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="uk-width-medium-2-3">
                    <span class="icheck-inline">
                        <input type="radio" name="direction" @isset($whySpider) @if($whySpider->direction == 'left')
                        checked @endif @endisset @if(old('direction' ) == 'left') checked @endif value="left"
                        id="direction_1" data-md-icheck />
                        <label for="direction_1" class="inline-label">Left</label>
                    </span>
                    <span class="icheck-inline">
                        <input type="radio" name="direction" @isset($whySpider) @if($whySpider->direction == 'right' )
                        checked @endif @endisset @if(old('direction' ) == 'right') checked @endif value="right"
                        id="direction_2" data-md-icheck />
                        <label for="direction_2" class="inline-label">Right</label>
                    </span>
                    @error('direction')
                    <p class="md-color-red-400">{{$message}}</p>
                    @enderror
                </div>
                <div class="uk-width-1-1">
                    <div class="uk-form-file md-btn md-btn-primary">
                        Select Icon
                        <input id="form-file" type="file" name="icon">
                    </div>
                    @isset($whySpider)
                    By Selecting Icon You Update Existing Icon
                    @endisset
                    @error('icon')
                    <p class="md-color-red-400">{{$message}}</p>
                    @enderror
                </div>

    </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">@isset($whySpider)
            Update @else Create @endisset</button>
    </div>
    </form>
</div>
</div>



<div class="md-card-list-wrapper" id="mailbox">
    <div class="uk-width-large-8-10 uk-container-center">
        <div class="md-card-list">
            <ul class="hierarchical_slide">
                @isset($whys)

                @foreach($whys as $why)

                <li>
                    <div class="md-card-list-item-menu" data-uk-dropdown="{mode:'click',pos:'bottom-right'}">
                        <form action="{{route('panel.why-spiders.destroy',$why)}}" id="delete" method="POST">
                            @csrf
                            @method('DELETE')
                            <a onclick="document.getElementById('delete').submit();"> <span
                                    class="md-icon material-icons">
                                    delete</span> </a>

                        </form>

                    </div>
                    @if(empty($whySpider) || $whySpider->id != $why->id)
                    <div class="md-card-list-item-menu" data-uk-dropdown="{mode:'click',pos:'bottom-right'}">
                        <a href="{{route('panel.why-spiders.edit',$why)}}"> <span class="md-icon material-icons">
                                edit</span>
                        </a>
                    </div>
                    @endif
                    <span class="md-card-list-item-date">{{strtoupper($why->direction)}}</span>

                    <div class="md-card-list-item-sender">
                        <img src="{{asset($why->icon)}}" alt="">
                    </div>
                    <div class="md-card-list-item-sender">
                        <span>{{$why->head}}</span>
                    </div>
                    <div class="md-card-list-item-subject">
                        <div class="md-card-list-item-sender-small">
                            <span>{{$why->body}}</span>
                        </div>
                    </div>
                    <div class="md-card-list-item-content-wrapper">
                        <div class="md-card-list-item-content">{{$why->body}}</div>

                    </div>
                </li>
                @endforeach
                @endisset


            </ul>
        </div>

    </div>
</div>



@endsection
@section('custom-script')
<script src="{{asset('assets/js/pages/page_mailbox.min.js')}}"></script>

@endsection