@extends('admin.layouts.master')
@section('page-title', 'إضافة زبون جديد')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3 text-center">
                        <h6 class="text-white text-capitalize pe-3">إضافة زبون جديد </h6>
                    </div>
                </div>
                <div class="card-body px-2 py-3">
                    <div style="display: none" class="alert alert-danger alert-dismissible text-white" role="alert" id="alert_message">
                        <span class="text-sm"></span>
                        <ul class="text-sm m-0" id="errors_list"></ul>
                        <button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <script>
                        $("#alert_message").on("close.bs.alert", function () {
                            // hide the alert >>> not remove it
                            $("#alert_message").hide();
                            return false;
                        });
                    </script>


                    <form role="form" id="edit_user_form" class="text-end">
                        <div class="row">
                            <div class="col-12 col-md-6 mb-2">
                                <label class="form-label">الاسم</label>
                                <div class="input-group input-group-outline">
                                    <input id="name" name="name" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-12 col-md-6 mb-2">
                                <label class="form-label">رقم الهاتف</label>
                                <div class="input-group input-group-outline">
                                    <input id="phone" name="phone" type="number" class="form-control">
                                </div>
                            </div>

                            <div class="col-12 col-md-12 mb-2">
                                <label class="form-label">ملاحظات </label>
                                <div class="input-group input-group-outline">
                                    <textarea name="des" id="des" class="w-100 form-control"></textarea>
                                </div>

                            </div>

                            <div class="col-12 text-center">

                                <button type="submit" class="btn bg-gradient-primary w-50 my-4 text-lg">
                                    <span id="button_submit_text">إضافة</span>
                                    <div class="spinner" style="display: none;">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    </div>
                                </button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>


        $('#edit_user_form').on('submit', function(e) {
            e.preventDefault();


            $("#button_submit_text").hide();
            $(".spinner").show();
            $("#alert_message").hide();


            var uploadData = new FormData(this);

            $.ajax({
                type: "POST",
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                url: '{{route('dashboard.customer.store')}}',
                data: uploadData,
                contentType: false,
                processData: false,
                statusCode: {
                    422: function(error) {
                        // Only if your server returns a 422 status code can it come in this block. :-)
                        var errors = error.responseJSON.errors;
                        var alert_message = document.getElementById("alert_message");
                        $("#alert_message").show();
                        var ul = document.getElementById("errors_list");
                        $('#errors_list').empty();
                        Object.entries(errors).forEach(function([key, value]){
                                var li = document.createElement("li");
                                li.appendChild(document.createTextNode(value));
                                ul.appendChild(li);
                            }
                        );
                    },
                    403: function() {
                        // Only if your server returns a 403 status code can it come in this block. :-)
                    }
                },
                success:function(data){
                    console.log("success");
                    console.log(data);
                    $("#button_submit_text").show();
                    $(".spinner").hide();

                    Swal.fire({
                        position: "top-end",
                        icon: "success",
                        title: "تم بنجاح",
                        showConfirmButton: false,
                        timer: 1500
                    });

                    window.location = '{{route('dashboard.customer.index')}}';
                },
                error:function(error){
                    console.log("error");
                    console.log(error);
                    $("#button_submit_text").show();
                    $(".spinner").hide();
                }
            });
        });
    </script>
@endsection