@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="la la-user-plus text-primary"></i>
            </span>
            <h3 class="card-label">Edit Franchise</h3>
        </div>
        
    </div>
    <form class="form" id="client_edit_form" action="{{route('franchise.edit.post', ['id'=>$user->id])}}" method="post" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body"> 
            <div class="row">
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>First Name<span class="text-danger">*</span></label>
                    <input type="text" name="first_name" id="first_name" value="{{ $user->first_name }}" class="form-control" required placeholder="Enter first name">
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Last Name<span class="text-danger">*</span></label>
                    <input type="text" name="last_name" id="last_name" value="{{ $user->last_name }}" class="form-control" required placeholder="Enter last name">
                </div>       
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Email address<span class="text-danger">*</span></label>
                    <input type="email" class="form-control" id="user_email" value="{{ $user->user_email }}" name="user_email" required placeholder="Enter email">
                    <span class="form-text text-muted">Email address must be unique.</span>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Company Name<span class="text-danger">*</span></label>
                    <input type="text" id="organisation_name" name="organisation_name" value="{{ $user->organisation_name }}" class="form-control" required placeholder="Enter Company Name">
                </div> 
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Password </label>
                    <input type="password" placeholder="Enter password" name="password" id="password" minlength="6" class="form-control" required>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Password (Confirm)</label>
                    <input type="password" placeholder="Enter confirm password" name="password2" id="password2" class="form-control" required>
                    <span class="form-text text-muted">Confirm password must be same with main Password.</span>
                </div>
                


                

            </div>
        </div> 
        <div class="card-footer">
            <div class="row">
                <div class="col-lg-9 ml-lg-auto">
                    <button type="submit" class="btn btn-primary font-weight-bold mr-2" id="submitBtn">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Edit Franchise</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('franchise.list')}}" class="text-muted">Franchises</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="#" class="text-muted">Edit</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        $(document).ready(function(){

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 

           
            const form = document.getElementById('client_edit_form');
            const fv = FormValidation.formValidation(
               form,
                {
                    fields: {
                        first_name: {
                            validators: {
                                notEmpty: {
                                    message: 'First Name is required'
                                },
                            }
                        },
                        last_name: {
                            validators: {
                                notEmpty: {
                                    message: 'Last Name is required'
                                },
                            }
                        },
                        user_email: {
                            validators: {
                                notEmpty: {
                                    message: 'Email address is required'
                                },
                                emailAddress: {
                                  message: 'Enter a valid email address'
                                }
                            }
                        },
                        organisation_name: {
                            validators: {
                                notEmpty: {
                                    message: 'Company Name is required'
                                }
                            }
                        },
                       
                        
                        designation: {
                            validators: {
                             notEmpty: {
                              message: 'Please select an Position'
                             }
                            }
                        }
                    },

                    plugins: { //Learn more: https://formvalidation.io/guide/plugins
                        trigger: new FormValidation.plugins.Trigger(),
                        // Bootstrap Framework Integration
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        // Validate fields when clicking the Submit button
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        // Submit the form when all fields are valid
                        //defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    }
                }
            );

            fv.on('core.form.valid', function() {
                var button = KTUtil.getById("submitBtn");
                KTUtil.btnWait(button, "spinner spinner-right spinner-white pr-15", "Submitting");
                const submitform = $('#client_edit_form');

                $.ajax({
                    url : submitform.attr('action'),
                    type : 'post',
                    dataType : "json",
                    data : submitform.serialize(),
                    success: function(response) {
                        if(response.status){
                            window.location.href= response.return_url
                            toastr.success(response.message);
                        } else {
                            if(response.message){
                                toastr.error(response.message);
                            }
                            if(response.errors){
                                Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(submitform).find('[name="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.fv-plugins-message-container').html('<div data-field="'+element_name+'" data-validator="callback" class="fv-help-block">'+errors[0]+'</div>')
                                });
                            }
                        }
                        KTUtil.btnRelease(button);
                    },
                    error: function(response) {
                        KTUtil.btnRelease(button);
                    }
                });
            });
            // Revalidate the confirmation password when changing the password
            // form.querySelector('[name="password"]').addEventListener('input', function() {
            //     fv.revalidateField('password2');
            // });
        });
        
    </script>
@endsection