@extends('layouts.master')

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

@section('css')

@endsection

@section('content')

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

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="edit_form" action="{{ route('onboard.update', ['onboard' => $onboard->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
    <input name="id" type="hidden"  value="{{ $onboard->id }}" />
    <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  value="{{ $onboard->app_name }}" />
                        <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">
                        <img src="/storage{{ $onboard->app_icon }}" style="width: 70px;" />
                        <input id="app_icon" name="app_icon" type="file" class="form-control"  value="{{ $onboard->app_icon }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="splash_image" class="col-md-2 col-form-label">Splash Image</label>
                    <div class="col-md-6">
                        <img src="/storage{{ $onboard->splash_image }}" style="width: 70px;" />
                        <input id="splash_image" name="splash_image" type="file" class="form-control"  value="{{ $onboard->splash_image }}">
                    </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">
                        @if(isset($onboardList[0]))
                            @foreach ($onboardList as $onboard)
                            <div data-repeater-item class="row">
                                <div class="mb-3 col-lg-3 onboard-list-id-field-div">
                                    <input type="hidden" id="onboard_list_id" name="onboard_list_id" class="onboard-list-id-field"  value="{{ $onboard->id }}"/>
                                    <label for="title">Title</label>
                                    <input type="text" id="title" name="title" class="form-control" placeholder="Title"  value="{{ $onboard->title }}"/>
                                </div>

                                <div class="mb-3 col-lg-3">
                                    <label for="description">Description</label>
                                    <textarea id="description" name="description" class="form-control" placeholder="Description" /> {{ $onboard->description }}</textarea>
                                </div>
                                <div class="mb-3 col-lg-3">
                                    <label for="image">Image</label>
                                    <img src="/storage{{ $onboard->image }}" style="width: 70px;" />
                                    <input id="image" name="image" type="file" class="form-control" value="{{ $onboard->image }}">
                                </div>

                                <div class="col-lg-3 align-self-center">
                                    <div class="d-grid">
                                        <input data-repeater-delete type="button" class="delete-onboard-list btn btn-primary-borderd" value="Delete" data-url="{{ route('delete-onboard-list', $onboard->id) }}"/>
                                    </div>
                                </div>
                            </div>
                            
                            @endforeach
                        @else
                            <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="description">Description</label>
                                    <textarea id="description" name="description" class="form-control" placeholder="Description" /></textarea>
                                </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>
                        @endif

                    </div>
                    <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0 onboard-list-add-btn" 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">
                        @if(isset($onboardPermissionList[0]))
                            @foreach ($onboardPermissionList as $onboardPermission)
                            <div data-repeater-item class="row">
                                <div class="mb-3 col-lg-3 permission-id-field-div">
                                    <input type="hidden" class="permission-id-field"  name="permission_id" value="{{ $onboardPermission->id }}"/>
                                    <label for="title">Title</label>
                                    <input type="text" id="title" name="title" class="form-control" placeholder="Title" value="{{ $onboardPermission->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" value="{{ $onboardPermission->request }}"/>
                                </div>

                                <div class="mb-3 col-lg-2">
                                    <label for="image">Image</label>
                                    <img src="/storage{{ $onboardPermission->image }}" style="width: 70px;" />
                                    <input id="image" name="image" type="file" class="form-control" value="{{ $onboardPermission->image }}">
                                </div>

                                <div class="col-lg-2 align-self-center">
                                    <div class="d-grid">
                                        <input type="button" class="btn btn-primary add_description" data-permission-id="{{ $onboardPermission->id }}" value="Add Description" />
                                    </div>
                                </div>
                                <div class="col-lg-2 align-self-center">
                                    <div class="d-grid">
                                        <input data-repeater-delete type="button" class="delete-permission btn btn-primary-borderd" value="Delete" data-url="{{ route('delete-onboard-permission', $onboardPermission->id) }}" />
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @else
                        <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>
                        @endif

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

            </div>
        </div>
        @if(isset($permissionDescriptionList[0]))
        <div class="card">
            <div class="card-body">
            <h4 class="card-title">Onboard Permission Description List</h4>
                <div class="repeater" enctype="multipart/form-data">
                    <div data-repeater-list="permission-description-list">
                            @foreach ($permissionDescriptionList as $permissionDiscription)
                            <div data-repeater-item class="row">
                                <div class="mb-3 col-lg-3 permission-description-id-field-div">
                                    <input type="hidden" class="permission-description-id-field"  name="description_id" value="{{ $permissionDiscription->id }}"/>
                                    <label for="request">Onboard Permission</label>
                                    <input type="text" id="request" name="request" class="form-control" placeholder="Request" value="{{ $permissionDiscription->onboardPermission->title }}" disabled/>
                                </div>
                                <div class="mb-3 col-lg-3">
                                    <label for="title">Title</label>
                                    <input type="text" id="title" name="title" class="form-control" placeholder="Title" value="{{ $permissionDiscription->title }}" disabled />
                                </div>


                                <div class="mb-3 col-lg-2">
                                    <label for="image">Image</label>
                                    <img src="/storage{{ $permissionDiscription->image }}" style="width: 70px;" />
                                </div>

                                <div class="col-lg-2 align-self-center">
                                    <div class="d-grid">
                                        <input type="button" class="btn btn-primary edit_description" data-url="" data-permission-desc-id="{{ $permissionDiscription->id }}" value="Edit Description" />
                                    </div>
                                </div>
                                <div class="col-lg-2 align-self-center">
                                    <div class="d-grid">
                                        <input data-repeater-delete type="button" class="delete-permission-desc btn btn-primary-borderd" value="Delete" data-url="{{ route('delete-onboard-permission-description', $permissionDiscription->id) }}"/>
                                    </div>
                                </div>
                            </div>
                            @endforeach

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

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

<div class="modal fade" id="permission_desc_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                 <form  class="needs-validation" id="description_edit_form"  method="post" enctype="multipart/form-data" novalidate>
                    @csrf
                    <input type="hidden" id="permission_desc_id" name="id">
                    <input type="hidden" id="permission_id" name="permission_id">
                    <div class="mb-3">
                        <label for="title" class="col-form-label">Title</label>
                        <input type="text" name="title" class="form-control" id="description_title">
                    </div>
                    <div class="mb-3">
                        <label for="image">Image</label>
                        <span id="perm_desc_img"></span>
                        <input id="description_image" name="description_image" type="file" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" id="save_description" class="btn btn-primary">save description</button>
            </div>
        </div>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.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(){  
        $(document).on('click', '.onboard-list-add-btn', function(event) {
            event.preventDefault();
            var total = $('.onboard-list-id-field-div').length;
            console.log(total);
            $(".onboard-list-id-field-div").each(function(index) {
                if (index === total - 1) {
                    id = $(this).children('.onboard-list-id-field');
                    id.val('');
                }
            });
        });
        $(document).on('click', '.permission-add-btn', function(event) {
            event.preventDefault();
            var total = $('.permission-id-field-div').length;
            console.log(total);
            $(".permission-id-field-div").each(function(index) {
                if (index === total - 1) {
                    id = $(this).children('.permission-id-field');
                    id.val('');
                }
            });
        });

        $(document).on('click','.edit_description',function(){
            permissionDescId = $(this).attr('data-permission-desc-id');
            $('#permission_desc_id').val(permissionDescId);
            actionUrl = "{{ route('onboard.save-description') }}";
            
            var fd = new FormData();
            
            fd.append('id', permissionDescId);
            fd.append('action', 'get');
            fd.append('_token','{{ csrf_token() }}');
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: fd,
                contentType: false,
                processData: false,
                success: function(response){ 
                    console.log(response);
                    $('#description_title').val(response.data.title);
                    $("#perm_desc_img").html('<img src="/storage'+response.data.image+'" style="width: 70px;" />');
                    $('#permission_desc_modal').modal('show');
                },
                error: function (response) {
                    console.log('An error occurred.');
                },
            });

        });
        $(document).on('click','.add_description',function(){
            permissionId = $(this).attr('data-permission-id');
            $('#permission_id').val(permissionId);
            $('#permission_desc_modal').modal('show');

        });
        $(document).on('click','#save_description',function(){
            actionUrl = "{{ route('onboard.save-description') }}";
            form = $( "#description_edit_form" );
            var formData = form.serialize();
            console.log(formData);
            var fd = new FormData();
            var files = $('#description_image')[0].files;
            
            fd.append('id', $('#permission_desc_id').val());
            fd.append('permission_id', $('#permission_id').val());
            fd.append('title', $('#description_title').val());
            fd.append('_token','{{ csrf_token() }}');
            // Check file selected or not
            if(files.length > 0 ){
                fd.append('description_image',files[0]);
            }
            $.ajax({
                type: "POST",
                url: actionUrl,
                data:  fd,
                contentType: false,
                processData: false,
                success: function(data){ 
                    $('#permission_desc_modal').modal('hide');
                    location.reload();
                },
                error: function (data) {
                    console.log('An error occurred.');
                },
            });
        });

        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('onboard.validate') }}";
            form = $( "#edit_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');
                        });
                    }
                },
            });
        });
        
        $(document).on('click', '.delete-permission-desc', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = $(this).attr('data-url');
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                },
                error: function (data) {
                    
                },
            });
        });

        $(document).on('click', '.delete-permission', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = $(this).attr('data-url');
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                    location.reload();
                },
                error: function (data) {
                    
                },
            });
        });
        $(document).on('click', '.delete-onboard-list', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = $(this).attr('data-url');
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                },
                error: function (data) {
                    
                },
            });
        });
    });
    
    </script>
@endsection