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





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



                <h5>Title</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" style="margin-left: -10%">
                                <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($how)

                                            <input name="ar_title" placeholder="أدخل العنوان باللغه العربية"
                                                class="md-input masked_input label-fixed"
                                                value="{{old('ar_title',$how->getTranslation('title','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_title" placeholder="أدخل العنوان باللغه العربية"
                                                class="md-input masked_input label-fixed" value="{{old('ar_title')}}"
                                                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_title')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                    <li>
                                        <div class="uk-width-medium-1">
                                            @isset($how)

                                            <input name="en_title" placeholder="Enter The Title In English"
                                                class="md-input masked_input label-fixed"
                                                value="{{old('en_title',$how->getTranslation('title','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_title" placeholder="Enter The Title In English"
                                                class="md-input masked_input label-fixed" value="{{old('en_title')}}"
                                                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_title')
                                            <p class="md-color-red-400">{{$message}}</p>
                                            @enderror
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-1-1" style="margin: 5% 0px 0px 5%">
                    <div class="uk-form-file md-btn md-btn-primary">
                        Select Video
                        <input id="form-file" type="file" name="video">
                    </div>
                    @isset($how)
                    By Selecting Video You Update Existing Video
                    @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($how)
            Update @else Create @endisset</button>
    </div>
    </form>
</div>




@isset($hows)

<div class="gallery_grid uk-grid-width-medium-1-5 uk-grid-width-large-1-5" id="galleryGrid">
    @foreach ($hows as $how)

    <div style="display: inline-block;margin:0 2%">
        <div class="md-card md-card-hover">
            <div class="gallery_grid_item md-card-content">
                <a href="{{ asset($how->video) }}" data-uk-lightbox="{group:'gallery'}">
                    <img src="{{ asset($how->video) }}" alt="">
                    <video src="{{ asset($how->video) }}"></video>
                </a>
                <div class="gallery_grid_image_caption">
                    <div class="gallery_grid_image_menu" data-uk-dropdown="{pos:'top-right'}">
                        <i class="md-icon material-icons">&#xE5D4;</i>
                        <div class="uk-dropdown uk-dropdown-small">
                            <ul class="uk-nav">
                                <li><a href="{{ route('panel.how.edit',$how) }}"><i
                                            class="material-icons uk-margin-small-right">&#xE150;</i>
                                        Edit</a>
                                </li>
                                <li>
                                    <form action="{{route('panel.how.destroy',$how)}}" id="delete" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <a onclick="document.getElementById('delete').submit();" style="color: inherit">
                                            <i class="material-icons uk-margin-small-right " style="margin-left: 9%">
                                                delete</i> Delete</a>

                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <span class="gallery_image_title uk-text-truncate">{{ $how->getTranslation('title','en') }}</span>
                    <span class="uk-text-muted uk-text-small">{{ $how->created_at->toDateTimeString() }}</span>
                </div>
            </div>
        </div>
    </div>
    @endforeach

</div>
@endisset
@endsection