@extends('layouts.master')

@section('title') @lang('translation.Onboard') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Onboard @endslot
@slot('title') Add Onboard @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="create_form" action="{{ route('onboard.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <div class="card">
            <div class="card-body">
                <h5>Onboard</h5><br>
                <div class="mb-3 row">
                    <label for="app_name" class="col-md-2 col-form-label">APP Name</label>
                    <div class="col-md-6">
                        <input id="app_name" name="app_name" type="text" class="form-control" placeholder="NApp Name" required>
                        <div  id="app_name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="app_icon" class="col-md-2 col-form-label">APP Icon</label>
                    <div class="col-md-6">
                        <input id="app_icon" name="app_icon" type="file" class="form-control">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="app_icon" class="col-md-2 col-form-label">Splash Image</label>
                    <div class="col-md-6">
                        <input id="splash_image" name="splash_image" type="file" class="form-control">
                    </div>
                </div>
            </div>
        </div>
       
        <div class="card">
            <div class="card-body">
            <h4 class="card-title">Onboard List</h4>
                <div class="repeater" enctype="multipart/form-data">
                    <div data-repeater-list="onboard-list">
                        <div data-repeater-item class="row">
                            <div class="mb-3 col-lg-3">
                                <label for="title">Title</label>
                                <input type="text" id="title" name="title" class="form-control" placeholder="Title" />
                            </div>

                            <div class="mb-3 col-lg-6">
                                <label for="description">Description</label>
                                <textarea id="description" name="description" class="form-control" placeholder="Description" /></textarea>
                            </div>

                            <div class="col-lg-3 align-self-center">
                                <div class="d-grid">
                                    <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0" value="Add" />
                </div>

            </div>
        </div>
        <div class="card">
            <div class="card-body">
            <h4 class="card-title">Onboard Permission List</h4>
                <div class="repeater" enctype="multipart/form-data">
                    <div data-repeater-list="onboard-permission-list">
                        <div data-repeater-item class="row">
                            <div class="mb-3 col-lg-3">
                                <label for="title">Title</label>
                                <input type="text" id="title" name="title" class="form-control" placeholder="Title" />
                            </div>

                            <div class="mb-3 col-lg-3">
                                <label for="request">Request</label>
                                <input type="text" id="request" name="request" class="form-control" placeholder="Request" />
                            </div>

                            <div class="mb-3 col-lg-3">
                                <label for="image">Image</label>
                                <input id="image" name="image" type="file" class="form-control">
                            </div>

                            <div class="col-lg-3 align-self-center">
                                <div class="d-grid">
                                    <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0" value="Add" />
                </div>

            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

        <!-- init js -->
    <script src="{{ URL::asset('/assets/libs/jquery-repeater/jquery-repeater.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-repeater.int.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $('#city_id').on('change', function() {
                updateStateOptions();
                updateDistrictOptions();
                updateZoneOptions();
        });
        $( "#create_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('onboard.validate') }}";
            form = $( "#create_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
    
    function updateStateOptions(){

        var city_id = $('#city_id').val();
        var states = [];
        actionUrl = "{{ route('city') }}";
        $.ajax({
            type: "POSt",
            url: actionUrl,
            data: {
                "city_id":city_id,
                "with":'state',
                "_token": "{{ csrf_token() }}"
            },
            success: function(data){ 
                console.log(data['data']);
                console.log(data['data'].id);
                if(data['data']){
                    var sel = $("#state_id");
                    sel.find('option').remove().end();
                    sel.append('<option value="">Select...</option>');
                    sel.append('<option value="'+ data['data'].id +'"selected>'+ data['data'].state +'</option>');
                }
            },
            error: function (data) {
                console.log(actionUrl+' Failes.');
            },
        });
    }
    function updateDistrictOptions(){
        var city_id = $('#city_id').val();
        var states = [];
        actionUrl = "{{ route('city') }}";
        $.ajax({
            type: "POSt",
            url: actionUrl,
            data: {
                "city_id":city_id,
                "with":'district',
                "_token": "{{ csrf_token() }}"
            },
            success: function(data){ 
                if(data['data']){
                    var sel = $("#district_id");
                    sel.find('option').remove().end();
                   // sel.append('<option value="">Select...</option>');
                    sel.append('<option value="'+ data['data'].id +'" selected>'+ data['data'].district +'</option>');
                }
            },
            error: function (data) {
                console.log(actionUrl+' Failes.');
            },
        });
    }
    function updateZoneOptions(){
        var city_id = $('#city_id').val();
        var states = [];
        actionUrl = "{{ route('city') }}";
        $.ajax({
            type: "POSt",
            url: actionUrl,
            data: {
                "city_id":city_id,
                "with":'zone',
                "_token": "{{ csrf_token() }}"
            },
            success: function(data){ 
                if(data['data']){
                    var sel = $("#zone_id");
                    sel.find('option').remove().end();
                   // sel.append('<option value="">Select...</option>');
                    sel.append('<option value="'+ data['data'].id +'" selected>'+ data['data'].zone +'</option>');
                }
            },
            error: function (data) {
                console.log(actionUrl+' Failes.');
            },
        });
    }
    </script>
@endsection