@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>

                    <button type="button" class="btn btn-success" style="margin-right: 10px"
                            data-bs-toggle="modal"
                            data-bs-target="#createCustomer">
                        إضافة زبون جديد
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="createCustomer"
                         tabindex="-1"
                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">إضافة زبون جديد</h1>
                                    <button type="button" class="btn-close m-1"
                                            data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <form id="add_customer_form">
                                    <div class="modal-body">
                                        <div class="col-12 col-md-12 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-12 mb-2">
                                            <label class="form-label">رقم هاتف الزبون</label>
                                            <div class="input-group input-group-outline">
                                                <input id="phone" name="phone" type="text" 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 id="des" name="des" class="form-control"
                                                          rows="5"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">إغلاق
                                        </button>
                                        <button type="submit" class="btn btn-primary">
                                            إضافة
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>


                    <form role="form" id="edit_user_form" class="text-end">
                        <div class="row">
                            <div class="col-12 col-md-4 mb-2">
                                <label class="form-label">الزبون</label>
                                <select id="customer_id" name="customer_id" type="text" class=" input-group">
                                    @foreach($customers as $customer)
                                        <option value="{{$customer->id}}">{{$customer->name}}
                                            / {{$customer->phone}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12 col-md-4 mb-2">
                                <label class="form-label">السائق</label>
                                <select id="driver_id" name="driver_id" type="text" class=" input-group">
                                    @foreach($drivers as $driver)
                                        <option value="{{$driver->id}}">{{$driver->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12 col-md-4 mb-2">
                                <label class="form-label">التكلفة</label>
                                <div class="input-group input-group-outline">
                                    <input id="price" name="price" 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>

        new TomSelect("#customer_id", {
            create: false,
            persist: true,
        });
        new TomSelect("#driver_id", {
            create: false,
            persist: true,
        });

        $('#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.orders.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.orders.index')}}';
                },
                error:function(error){
                    console.log("error");
                    console.log(error);
                    $("#button_submit_text").show();
                    $(".spinner").hide();
                }
            });
        });

        $('#add_customer_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.orders.create')}}';
                },
                error: function (error) {
                    console.log("error");
                    console.log(error);
                    $("#button_submit_text").show();
                    $(".spinner").hide();
                }
            });
        });
    </script>
@endsection