@extends('layout.app')
@section('title')
    {{ __('message.apps_create') }}
@stop
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/vendors/css/forms/select/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/vendors/css/forms/wizard/bs-stepper.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/form-validation.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("app-assets/css/plugins/forms/form-wizard.css")}}">
@stop

@section('content')


    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{ __('message.apps_create') }}</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route("dashboard")}}">{{ __('message.dashboard') }}</a>
                                </li>
                                <li class="breadcrumb-item"><a href="{{route("app.index")}}">{{ __('message.apps') }}</a>
                                </li>
                                <li class="breadcrumb-item active">{{ __('message.apps_create') }}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- Modern Horizontal Wizard -->
            <section class="modern-horizontal-wizard">
                <div class="bs-stepper wizard-modern modern-wizard-example">
                    <div class="bs-stepper-header">
                        <div class="step" data-target="#account-details-modern">
                            <button type="button" class="step-trigger">
                                    <span class="bs-stepper-box">
                                        <i data-feather='monitor' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">{{ __('message.apps') }}</span>
                                        <span class="bs-stepper-subtitle">Create App</span>
                                    </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#tag-details-modern">
                            <button type="button" class="step-trigger">
                                    <span class="bs-stepper-box">
                                        <i data-feather='mouse-pointer' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">{{ __('message.selector') }}</span>
                                        <span class="bs-stepper-subtitle">{{ __('message.specific_selector') }}</span>
                                    </span>
                            </button>
                        </div>

                    </div>
                    <div class="bs-stepper-content">
                        <x-alert/>
                        {{-- form for store clients --}}
                        <form method="POST" action="{{route("app.store")}}" enctype="multipart/form-data">
                            @csrf
                            <div id="account-details-modern" class="content">
                                <div class="content-header">
                                    <h5 class="mb-0">{{__("message.app_info")}}</h5>
                                </div>
                                <div class="row">
                                    {{-- client name --}}
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.name') }}</label>
                                            <input type="text" class="form-control" id="name" name="name"
                                                   value="{{old('name')}}" required autofocus>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.type') }}</label>

                                            <select class="select2 form-control form-control-lg" name="cat_group" id="cat_group">
                                                <option value=""></option>
                                                <option {{ old('cat_group') === '1' ? 'selected' : '' }} value="1">{{ __('message.Application') }}</option>
                                                <option {{ old('cat_group') === '2' ? 'selected' : '' }} value="2">{{ __('message.Games') }}</option>

                                            </select>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.sub_category') }}</label>

                                            <select class="select2 form-control form-control-lg" id="sub_category" name="cat_id">
                                                <option value=""></option>
                                                @isset($categories)
                                                    @foreach($categories as $category)
                                                        <option {{ old('cat_id') == "$category->id" ? 'selected' : '' }} value="{{$category->id}}">{{$category->name}}</option>
                                                    @endforeach
                                                @endisset
                                            </select>

                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.websites') }}</label>

                                            <select class="select2 form-control form-control-lg" name="website_id">
                                                <option value=""></option>
                                                @isset($websites)
                                                    @foreach($websites as $website)
                                                        <option {{ old('website_id') == "$website->id" ? 'selected' : '' }} value="{{$website->id}}">{{$website->name}}</option>
                                                    @endforeach
                                                @endisset
                                            </select>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.language') }}</label>
                                            <select class="select2 form-control form-control-lg" name="language" id="language">
                                                <option value=""></option>
                                                <option {{ old('language') === 'ar' ? 'selected' : '' }} value="ar">{{ __('message.arabic') }}</option>
                                                <option {{ old('language') === 'en' ? 'selected' : '' }} value="en">{{ __('message.english') }}</option>

                                            </select>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.url') }}</label>
                                            <br>  <code class="mt-1"> url like (https://example.com/)</code>

                                            <input type="url" class="form-control" id="url" name="url"
                                                   value="{{ old('url') }}" required autofocus>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.download_link') }}</label>
                                            <br>  <code class="mt-1"> url like (https://example.com/)</code>
                                            <input type="url" class="form-control" id="download_link" name="download_link"
                                                   value="{{ old('download_link') }}"  autofocus>
                                        </div>
                                    </div>
                                    {{-- end client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.package_name') }}</label>

                                            <select class="select2 form-control form-control-lg" name="package_id">
                                                <option value=""></option>
                                                @isset($packages)
                                                    @foreach($packages as $package)
                                                        <option {{ old('package_id') == "$package->id" ? 'selected' : '' }} value="{{$package->id}}">{{$package->package_name}} : {{$package->ar_app_name}}</option>
                                                    @endforeach
                                                @endisset
                                            </select>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.update_type') }}</label>

                                            <select class="select2 form-control form-control-lg" name="schedule_id">
                                                <option value=""></option>
                                                @isset($schedules)
                                                    @foreach($schedules as $schedule)
                                                        <option {{ old('schedule_id') == "$schedule->id" ? 'selected' : '' }} value="{{$schedule->id}}">{{$schedule->description}}</option>
                                                    @endforeach
                                                @endisset
                                            </select>
                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- end client name --}}


                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.download_file') }}</label>
                                            <div class="row mt-1">
                                                <div class="col-auto">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="customRadio4" value="1" name="download_file" class="custom-control-input" {{ old('download_file') == "1" ? 'checked' : '' }} />
                                                        <label class="custom-control-label" for="customRadio4">{{__("message.download_file")}}</label>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="customRadio1" value="0" name="download_file" class="custom-control-input"  {{ old('download_file') == "0" ? 'checked' : '' }}/>
                                                        <label class="custom-control-label" for="customRadio1">{{__("message.don't_download_file")}}</label>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                    {{-- client name --}}
                                    <div class="col-lg-6 col-md-12 col-sm-12 mb-3">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.process') }}</label>
                                            <div class="row mt-1">
                                                <div class="col-auto">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="customRadio5" value="1" name="auto_process" class="custom-control-input" {{ old('auto_process') == "1" ? 'checked' : '' }} />
                                                        <label class="custom-control-label" for="customRadio5">{{__("message.auto_process")}}</label>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="customRadio6" value="0" name="auto_process" class="custom-control-input" {{ old('auto_process') == "0" ? 'checked' : '' }} />
                                                        <label class="custom-control-label" for="customRadio6">{{__("message.human_process")}}</label>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                    {{-- client name --}}

                                </div>

                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                        <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                    </button>

                                    <button type="submit" class="btn btn-primary submit_btn">
                                        <span class="align-middle d-sm-inline-block d-none">submit</span>
                                        {{--                                    <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>--}}
                                    </button>
                                    <button type="button" class="btn btn-primary btn-next">
                                        <span class="align-middle d-sm-inline-block d-none">Next</span>
                                        <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="tag-details-modern" class="content">
                                <div class="content-header">
                                    <h5 class="mb-0">{{ __('message.specific_selector') }} </h5>
                                </div>
                                <div class="row">
                                    {{-- client name --}}
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.puppeteer_selector') }}</label><br>
                                            <code class="mt-1">.div-example a,.div-example-2 a</code>.</p>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" name="puppeteer_selector" rows="3" placeholder="Textarea" >{{ old('puppeteer_selector') }}</textarea>

                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    {{-- client name --}}
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.selector') }}</label>
                                            <p class="card-text">{{__("message.use_the_same_name_in_array")}} <br>
                                                <code class="mt-1">['logo','app_name','link_name','link',author','author_link','screenshots','downloads','version','last_update','rating,'content_rating','votes','size','price','os','whats_new','base']</code>.</p>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" name="selector" rows="3" placeholder="Textarea" >{{ old('selector') }}</textarea>

                                        </div>
                                    </div>
                                    {{-- end client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.selector_download_in_another_link') }}</label>
                                            <p> <code class="mt-1">{{__("message.if you have many link you should put like this ( link , .example , href , array )")}}</code>.</p>

                                            <textarea class="form-control" id="exampleFormControlTextarea1" name="selector_download_link" rows="3" placeholder="Textarea">{{ old('selector_download_link') }}</textarea>

                                        </div>
                                    </div>
                                    {{-- end client name --}}

                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.selector_description') }}</label>
                                            <br>
                                            <br>
                                            <br>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" name="selector_auto_description" rows="3" placeholder="Textarea" >{{ old('selector_auto_description') }}</textarea>

                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.selector_unwanted_description') }}</label>

                                            <textarea class="form-control" id="exampleFormControlTextarea1" name="selector_unwanted_description" rows="3" placeholder="Textarea" >{{ old('selector_unwanted_description') }}</textarea>

                                        </div>
                                    </div>
                                    {{-- end client name --}}
                                    <div class="col-lg-6 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label for="name" class="form-label col-form-label">{{ __('message.headers') }}</label>

                                            <textarea class="form-control" id="exampleFormControlTextarea1" name="headers" rows="3" placeholder="Textarea" >{{ old('headers') }}</textarea>

                                        </div>
                                    </div>
                                    {{-- end client name --}}


                                </div>

                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-primary btn-prev">
                                        <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
                                        <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <span class="align-middle d-sm-inline-block d-none">submit</span>
                                        {{--                                    <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>--}}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <!-- /Modern Horizontal Wizard -->
        </div>
    </div>
@endsection
@section("js")
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset("app-assets/vendors/js/forms/select/select2.full.min.js")}}"></script>
    <!-- END: Page Vendor JS-->
    <!-- BEGIN: Page JS-->
    <script src="{{asset("app-assets/js/scripts/forms/form-select2.js")}}"></script>
    <!-- END: Page JS-->
    <script src="{{asset("app-assets/vendors/js/forms/wizard/bs-stepper.min.js")}}"></script>
    <script src="{{asset("app-assets/js/scripts/forms/form-wizard.js")}}"></script>
    <script>
        $("#cat_group").change(function(){
            $("#sub_category ").empty();
            let value =  $(this).val();
            let _url = "{{route("category.get_sub_categories")}}";
            $.ajax({
                type: 'get',
                url: _url,
                data: {"_token": "{{ csrf_token() }}","cat_group": value},
                success: function (resp) {
                    if (resp.success) {
                        var cats = resp.category;
                        if (cats){
                            $.each(cats , function(k, v) {
                                jQuery('#sub_category').append('<option value="'+v.id+'">'+v.name+'</option>');

                            });
                        }
                    } else {
                        swal.fire("sorry!", resp.message, "error");
                    }
                },
                error: function (resp) {
                    swal.fire("Error!", 'Something went wrong.', "error");
                }
            });
        });
    </script>

@endsection