@extends('admin.layouts.master')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Create Wizard</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{asset(route('wizard.index'))}}">Wizard</a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-success">
            {{ session()->get('error') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div><br />
    @endif
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Create Wizard</h3>
                    </div>
                    <div class="card-body">
                        <form action = "{{ route('wizard.store') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <div class="exampleInputEmail1">
                                    <label>Module</label>
                                    <select class="form-control select2" style="width: 100%;" name="module_id" required>
                                        <option value="0">Select Module</option>
                                        @foreach($modules as $row)
                                            <option value="{{$row->id}}" {{($wizard['module_id'] == $row->id) ? "selected" : ""}}>{{$row->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="exampleInputEmail1">
                                    <label>Item / Button</label>
                                    <select class ="form-control select2" style="width: 100%;" name="item_id" required>
                                        <option value="0">Select Item / Button</option>
                                        @foreach($items as $row)
                                            <option value="{{$row->id}}" {{($wizard['item_id'] == $row->id) ? "selected" : ""}}>{{$row->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="exampleInputEmail1">
                                    <label>Frequency</label>
                                    <select class ="form-control select2" style="width: 100%;" name="frequency" required>
                                        <option value="0">Select frequency</option>
                                        <option value="once" {{($wizard['frequency'] == 'once') ? "selected" : ""}}>Once</option>
                                        <option value="on_app_install" {{($wizard['frequency'] == 'on_app_install') ? "selected" : ""}}>On App install</option>
                                        <option value="daily" {{($wizard['frequency'] == 'daily') ? "selected" : ""}}>Daily</option>
                                        <option value="once_a_week" {{($wizard['frequency'] == 'once_a_week') ? "selected" : ""}}>Once a week</option>
                                        <option value="once_a_month" {{($wizard['frequency'] == 'once_a_month') ? "selected" : ""}}>Once a month</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="exampleInputEmail1">
                                    <label>Key / Slug</label>
                                    <input type = "text" name = "key" class="form-control" required value="{{ old('key', $wizard['key']) }}">
                                </div>
                            </div>

                            @foreach ($languages as $language)
                                <div class="form-group">
                                    <div class="exampleInputEmail1">
                                        <label>Title in {{$language}}</label>
                                        <input type = "text" name = "title_{{strtolower($language)}}" class="form-control" {{$language == 'English' ? 'required' : ''}} value="{{ old('name_'.strtolower($language), $wizard['title_'.strtolower($language)]) }}">
                                    </div>
                                </div>
                            @endforeach

                            @foreach ($languages as $language)
                                <div class="form-group">
                                    <div class="exampleInputEmail1">
                                        <label>Description in {{$language}}</label>
                                        <input type = "text" name = "description_{{strtolower($language)}}" class="form-control" {{$language == 'English' ? 'required' : ''}} value="{{ old('name_'.strtolower($language), $wizard['description_'.strtolower($language)]) }}">
                                    </div>
                                </div>
                            @endforeach

                            <div class="row form-group">
                                <div class="col-md-12 text-right">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('select[name="module_id"]').change(function() {
                var moduleId = $(this).val();
                if (moduleId) {
                    $.ajax({
                        url: '/api/get-items/' + moduleId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('select[name="item_id"]').empty();
                            $('select[name="item_id"]').append('<option value="0">Select Item / Button</option>');
                            $.each(data, function(key, value) {
                                $('select[name="item_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                            });
                        }
                    });
                } else {
                    $('select[name="item_id"]').empty();
                    $('select[name="item_id"]').append('<option value="0">Select Item / Button</option>');
                }
            });
        });
    </script>
@endsection