@extends('layouts.app')
@section('title') Payment Ways @endsection


@section('css')
    <link href="{{asset('assets/css/color-picker.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')

    <!-- begin:: Subheader -->
    <div class="kt-subheader   kt-grid__item" id="kt_subheader">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                Payment Ways</h3>
            <span class="kt-subheader__separator kt-hidden"></span>
        </div>
    </div>

    <!-- end:: Subheader -->

    <!-- begin:: Content -->

    <div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">

        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                <div class="kt-portlet__head-label">
										<span class="kt-portlet__head-icon">
											<i class="kt-font-brand la la-cc-paypal red"></i>
										</span>
                    <h3 class="kt-portlet__head-title">
                        Payment Ways Table
                    </h3>

                    <div class="kt-portlet__head-actions">
                        <a href="{{route('paymentWays.deleted')}}" class="btn btn-elevate btn-icon-sm red-btn">
                            <i class="flaticon-delete"></i>
                            Payment Ways Deleted
                        </a>
                    </div>
                </div>

                    <div class="kt-portlet__head-toolbar">
                        <div class="kt-portlet__head-wrapper">
                            <div class="kt-portlet__head-actions">
                                &nbsp;
                                <a href="javascript:;" class="btn btn-elevate btn-icon-sm red-btn"
                                   data-toggle="modal" data-target="#kt_modal_1">
                                    <i class="la la-plus"></i>
                                    New Payment Ways
                                </a>
                            </div>
                        </div>
                    </div>

            </div>
            <div class="kt-portlet__body">

                <!--begin: Datatable -->
                <table class="table table-striped- table-bordered table-hover table-checkable table_1"
                       id="kt_table_1">
                    <thead>
                    <tr>
                        <th class="text-center">Name EN</th>
                        <th class="text-center">Name AR</th>

                        <th class="text-center">Image</th>
                        <th class="text-center">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($ways as $way)
                        <tr>
                            <td class="text-center">{{$way->name}}</td>
                            <td class="text-center">{{$way->name_ar}}</td>

                            <td class="text-center">
                                <div style="width: 80px;margin: auto">
                                    <div class="thumbnail">
                                        <div class="thumb">
                                            <img src="{{asset('assets/uploads/payment/'.$way->image)}}" alt="payment way{{$way->id}}" class="img-fluid">
                                            <div class="caption-overflow">
									<span>
											<a href="{{asset('assets/uploads/payment/'.$way->image)}}" data-popup="lightbox" rel="gallery"
                                               class="btn border-white text-white btn-flat btn-icon btn-rounded"><i
                                                    class="icon-plus3"></i></a>
										</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center action-ic">
                                <a title="Edit" href="{{route('paymentWays.edit',$way->id)}}"
                                   class="btn btn-sm btn-clean btn-icon btn-icon-md">
                                    <i class="la la-edit"></i>
                                </a>
                                <a title="Delete" href="javascript:;"
                                   class="btn btn-sm btn-clean btn-icon btn-icon-md delete">
                                    <i class="la la-remove red"></i>
                                    <input type="hidden" value="{{$way->id}}" class="id">
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

                <!--end: Datatable -->
            </div>
        </div>

    </div>

    <!-- end:: Content -->

        <!--begin::Modal-->
        <div class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add New Category</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="error-alert" style="display:none"></div>
                        <form role="form" id="user_form" method="post">
                            {{csrf_field()}}
                            <div class="form-group">
                                <label for="name">Name EN:</label>
                                <input type="text" name="name" id="name" class="form-control" required value="{{old('name')}}">

                            </div>
                            <div class="form-group">
                                <label for="name">Name AR:</label>
                                <input type="text" name="name_ar" id="name_ar" class="form-control" required value="{{old('name_ar')}}">

                            </div>
                            <div class="form-group">
                                <label for="color">Color</label>
                                <input type="text" name="color" id="color" class="form-control colorpicker-flat-input" data-preferred-format="hex" value="#F80000">
                            </div>
                            <div class="form-group">
                                <label for="image">Image:</label>
                                <input type="file" name="image" id="image" class="form-control" >
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn red-btn btn-create">Save</button>
                        <div class="loadingMask">
                            <img src="{{asset('assets/images/loader.gif')}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Modal-->

@endsection
@section('js')

    <script>
        $(document).ready(function () {
            var create_paymentWays = function () {
                $('.btn-create').on("click", function () {
                    $(".loadingMask").css('display', 'inline-block');

                    $(".loadingMask").css('display', 'inline-block');

                    $.ajax({
                        method: "post",
                        beforeSend: function () {
                            $(".loadingMask").css('display', 'inline-block');
                        },
                        url: "{{route('paymentWays.store')}}",

                        data:
                            new FormData($("#user_form")[0])
                        ,
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').val()
                        },
                        async: true,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            //  wait.resolve();
                            $(".loadingMask").css('display', 'none');
                            if (data.errors) {
                                $('.error-alert p').remove();
                                $('.error-alert').show();
                                // swal("Errors!", "Please Enter all required field!", "error");
                                jQuery.each(data.errors, function (key, value) {

                                    $('.error-alert').append('<p>' + value + '</p>');
                                    $("body, html").animate({scrollTop: 0}, 600);

                                });
                            } else {
                                $('.error-alert p').remove();
                                $('.error-alert').hide();
                                swal.fire({
                                    type: 'success',
                                    title: 'Added successfully',
                                    confirmButtonText: 'Ok!',
                                }).then(function (result) {
                                    if (result.value) {
                                        window.location = "{{route('paymentWays.index')}}"
                                    }
                                });
                            }
                        },
                        error: function () {
                            $(".loadingMask").css('display', 'none');
                            alert("Error, Please try again");
                        }
                    });


                });
            };


            var delete_item = function () {
                $('.delete').on("click", function () {
                    var this_item = $(this);
                    var id = $(this).parent().find('.id').val();
                    Swal.fire({
                        title: 'Are you sure?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'No'
                    }).then((result) => {
                        if (result.value) {
                            $.ajax({
                                method: "post",
                                url: "{{route('paymentWays.destroy')}}",
                                headers: {
                                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                                },
                                data: {
                                    id: id,
                                },
                                async: true,
                                success: function (data) {
                                    $(".loadingMask").css('display', 'none');
                                    if (data.errors) {
                                        Swal.fire("Errors!", "Please select the Category", "error");
                                    } else if (data.message == "ErrorMessage") {
                                        Swal.fire("Errors!", "Sorry! You Can't Delete This Category, Be sure there are no products or Sub Category for this category", "error");
                                    } else if (data.message == "Deleted") {
                                        this_item.parent().parent().remove();
                                        Swal.fire({
                                            type: 'success',
                                            title: 'Deleted successfully!',
                                            confirmButtonText: 'Ok!',
                                        })
                                    }
                                },
                                error: function () {
                                    alert("Error, Please try again.");
                                }
                            });

                        }
                    })


                });
            };
            delete_item();

            create_paymentWays();


        });


    </script>

    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
    <script type="text/javascript" src="{{asset('assets/js/spectrum.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/picker_color.js')}}"></script>

@endsection