@extends('layouts.app')

@push('action')
    <li class="nav-item ms-3">
        <button type="button" onclick="submit_form()" class="btn btn-success btn-icon" >
        <i class="bi bi-check-circle"></i>Submit</button>
    </li>
@endpush

@section('contents')
    <div class="content ">
        <div class="mb-4">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{url('dashboard')}}">
                            <i class="bi bi-globe2 small me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{url('client')}}">
                            <i class="bi bi-globe2 small me-2"></i> Clients
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">New Client</li>
                </ol>
            </nav>
        </div>
        <form class="form-label-left input_mask" method="POST" action="" name="frm" id="frm"
              data-parsley-validate="" enctype="multipart/form-data">
            @csrf
            <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row" id="form-name">
                                <label class="col-form-label col-md-6 col-sm-6 "> Name</label>
                                <div class="mb-4">
                                     <div class="col-md-6 col-sm-6 ">
                                    <input type="text" class="form-control pwd " placeholder="Name" id="name"
                                           name="name" >
                                    <span style="color: red" class="help-block"></span>
                                </div>
                                </div>               
                            </div>
                            <div class="form-group row" id="form-printavo_email">
                                <label class="col-form-label col-md-6 col-sm-6 ">Printavo Email</label>
                                <div class="mb-4">
                                     <div class="col-md-6 col-sm-6 ">
                                    <input type="text" class="form-control pwd " placeholder="Printavo Email" id="printavo_email"
                                           name="printavo_email">
                                    <span style="color: red" class="help-block"></span>
                                </div>
                                </div>               
                            </div>
                            <div class="form-group row" id="form-printavo_token">
                                <label class="col-form-label col-md-6 col-sm-6 ">Printavo Token</label>
                                <div class="mb-4">
                                     <div class="col-md-6 col-sm-6 ">
                                    <input type="text" class="form-control pwd " placeholder="Printavo Token" id="printavo_token"
                                           name="printavo_token" >
                                    <span style="color: red" class="help-block"></span>
                                </div>
                                </div>               
                            </div>
                        </div>
                    <div class="col-md-6">
                        <div class="form-group row" id="form-partial_order_status_id">
                            <label class="col-form-label col-md-6 col-sm-6 "> Partial Order Status ID</label>
                            <div class="mb-4">
                                <div class="col-md-6 col-sm-6 ">
                                    <div class="mb-4">
                                        <input type="text" class="form-control pwd " placeholder="Partial Order Status ID" id="partial_order_status_id"
                                           name="partial_order_status_id" >
                                    <span style="color: red" class="help-block"></span>
                                    </div>                        
                                </div>
                            </div>
                        </div>
                        <div class="form-group row" id="form-full_order_status_id">
                            <label class="col-form-label col-md-6 col-sm-6 ">Full Order Status ID</label>
                            <div class="mb-4">
                                <div class="col-md-6 col-sm-6 ">
                                <input type="text" class="form-control pwd " placeholder="Full Order Status ID" id="full_order_status_id"
                                       name="full_order_status_id" >
                                <span style="color: red" class="help-block"></span>
                            </div>
                            </div>                    
                        </div>
                        <div class="form-group row" id="form-status">
                            <label class="col-form-label col-md-6 col-sm-6 "> Status</label>
                            <div class="mb-4">
                                <div class="col-md-6 col-sm-6 ">
                                <select class="form-control"  name="status" id="status" >
                                   <option value="">select status</option>
                                       <option value="0">{{0}} </option>
                                       <option value="1">{{1}} </option>
                                </select>
                                <span style="color: red" class="help-block"></span>
                            </div>
                            </div>                    
                        </div>
                        <div class="form-group row" id="form-image">
                            <label class="col-form-label col-md-6 col-sm-6 ">Logo</label>
                            <div class="mb-4">
                                <div class="col-md-6 col-sm-6 ">
                                <input type="file" class="form-control pwd "  id="image" name="image" >
                                <span style="color: red" class="help-block"></span>
                            </div>
                            </div>                    
                        </div>

                    </div>          
                </div>
            </div>
        </form>
    </div>
@endsection
@push('script')
<script >
    function submit_form() {
        var form = $('#frm')[0];
        var formData = new FormData(form);
            $.ajax({
                type: "POST",
                url: "{{route('client.store')}}",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.status == 200) {
                        swal(response.message, {
                            icon: "success",
                            timer: 2000,
                        });
                    }
                    window.location.href="{{url('client')}}"
                },
                error: function(error){
                    if (error.status === 422) {
                        var data = error.responseJSON.errors;
                        
                        for (let i in data) {
                            showValidationErrors(i, data[i][0])
                        }
                        
                    }
                }
            });
    }
    function showValidationErrors(name, error)
    {
        var input = $("#"+ name);
        input.addClass('is-invalid');
        var group = $("#form-"+name);

        group.addClass('has-error');
        group.find('.help-block').text(error);
    }
</script>
@endpush