@extends('layout.app')
@section('title')
    {{ __('message.package_name_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')
    <!-- Horizontal Wizard -->
    <!-- /Horizontal Wizard -->

    <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.package_name_create') }}</h2>

                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- users edit start -->
            <!-- 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='box' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">{{ __('message.package_name') }}</span>
                                        <span class="bs-stepper-subtitle">Create Package</span>
                                    </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#personal-info-modern">
                            <button type="button" class="step-trigger">
                                    <span class="bs-stepper-box">
                                        <i data-feather='smartphone' class="font-medium-3"></i>
                                    </span>
                                <span class="bs-stepper-label">
                                        <span class="bs-stepper-title">Create App</span>
                                        <span class="bs-stepper-subtitle">Add New App</span>
                                    </span>
                            </button>
                        </div>

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

                                    <div class="form-group col-md-6">
                                        <label for="name" class="form-label">{{ __('message.app_name') }}</label>
                                        <input type="text" class="form-control" id="name" name="app_name"
                                               value="{{ old('app_name') }}" required autofocus>
                                    </div>
                                <div class="form-group col-md-6">
                                    <label for="name" class="form-label">{{ __('message.ar_app_name') }}</label>
                                    <input type="text" class="form-control" id="name" name="ar_app_name"
                                           value="{{ old('ar_app_name') }}" required autofocus>
                                </div>

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

                                        <select class="select2 form-control " id="modern-country" name="type">
                                            <option label=" "></option>
                                            <option value="0">Official</option>
                                            <option value="1">Modded</option>
                                            <option value="2">Hacked</option>
                                        </select>

                                </div>


                            </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="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="personal-info-modern" class="content">
                            <div class="content-header">
                                <h5 class="mb-0">Create App</h5>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="name" class="form-label col-form-label">{{ __('message.category') }}</label>

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

                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <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>

                                    </select>
                                </div>


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


                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="create_app" class="form-label col-form-label">{{ __('message.download_file') }}</label>
                                        @foreach($websites as $key=>$website)
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="download_file[]" value="{{$website->id}}"  class="custom-control-input" id="customCheck{{$key}}" >
                                            <label class="custom-control-label" for="customCheck{{$key}}">{{$website->name}}</label>
                                        </div>

                                        @endforeach

                                    </div>
                                </div>
                            </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