@extends('layouts.app')

@section('title', 'Seller | '.config('app.name'))
@section('style')
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ url('plugins/fontawesome-free/css/all.min.css') }}">
<!-- DataTables -->
<link rel="stylesheet" href="{{ url('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ url('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ url('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ url('dist/css/adminlte.css') }}">
@endsection
@section('content')
<div class="content articles">
    <div class="row pt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Seller</h3>
                    <a href="javascript:;" class="btn btn-primary" data-toggle="modal" data-backdrop="static"
                        data-target="#sellerModal">Add Seller</a>
                </div>

                <!-- /.card-header -->
                <div class="card-body">
                    @if(Session::has('message'))
                        <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
                    @endif

                        @if (count($errors) > 0)
                            <div class = "alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    <table id="sellerTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $seller)
                            <tr id='row{{$seller->id}}'>
                                <td>{{$seller->name}}</td>
                                <td>{{$seller->email}}</td>
                                 <td>

                                     <button type="button" class="btn btn-sm btn-success mr-1 edit-seller"
                                             data-toggle="modal" data-target="#editsellerModal"
                                             data-id="{{ $seller->id }}" data-name="{{ $seller->name }}"
                                             data-email="{{ $seller->email }}" data-phone="{{ $seller->phone }}">
                                             <i class='fa fa-edit'></i></button>
                                    <a href="#!" class="deleteRow" data-id='{{$seller->id}}'><i
                                            class='fa fa-times-circle ml-2 text-red'></i></a>
                                </td>
                            </tr>

                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </div>
</div>

{{--seller Add modal--}}
<div class="modal fade" id="sellerModal" tabindex="-1" role="dialog" aria-labelledby="sellerModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sellerModalLabel">Add Seller</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div style="text-align:center;"id="message-alert"> </div>
            <form class="sellerForm" method="post" enctype="multipart/form-data" action="javascript:;">
            <div class="modal-body">
                    <div class="form-group">
                        <label for="sellerName" class="col-form-label">Name*</label>
                        <input type="text" class="form-control" placeholder="Name"  name="sellerName" id="sellerName" required>
                    </div>
                    <div class="form-group">
                        <label for="sellerEmail" class="col-form-label">Email*</label>
                        <input type="text" class="form-control" name="sellerEmail" placeholder="Email" id="sellerEmail" required>
                    </div>

            </div>

            <div class="modal-footer">
                <div id="formResult"></div>
                <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
            </div>
        </form>
        </div>
    </div>
</div>

{{--seller edit modal--}}
<div class="modal fade" id="editsellerModal" tabindex="-1" role="dialog" aria-labelledby="editsellerModal"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sellerModalLabel">Add Seller</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div style="text-align:center;"id="message-alert"> </div>
            <form class="sellerForm_update" method="post" enctype="multipart/form-data" action="javascript:;">
                @csrf
                @method('post')
                <div class="modal-body">
                    <div class="form-group">
                        <label for="sellerName" class="col-form-label">Name*</label>
                        <input type="text" class="form-control" placeholder="Name"  name="name" id="sellerName" required>
                    </div>
                    <div class="form-group">
                        <label for="sellerEmail" class="col-form-label">Email*</label>
                        <input type="email" class="form-control" name="email" placeholder="Email" id="sellerEmail" required>
                    </div>
                </div>



                <div class="modal-footer">
                    <div id="formResult"></div>
                    <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

    $('.edit-seller').on('click', function()
    {
        var id = $(this).data('id');
        var name = $(this).data('name');
        var email = $(this).data('email');
        var url = '{{ route("update.seller", ":id") }}';
        url = url.replace(':id', id);

        $('#editsellerModal form').attr('action', url);
        $('#editsellerModal form input[name="name"]').val(name);
        $('#editsellerModal form input[name="email"]').val(email);
    });

</script>
@endsection

@section('script')

<!-- DataTables  & Plugins -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>

<script>
$(function () {
    $("#sellerTable").DataTable({
        "bSort":false, "responsive": true, "lengthChange": false, "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#sellerTable_wrappers .col-md-6:eq(0)');

});


// $(document).on("click", ".deleteRow", function () {
//     var reviewId = $(this).data('id');
//     var route = '/admin/reviews/' + reviewId;

//     var result = _general.deleteAjax(route, "Are you sure?", "Review will be deleted!", function (response) {
//         if (response) {
//             $("#row" + reviewId).remove();
//         }
//     });
// });
</script>
<script>
    $(document).ready(function () {
        $('#sellerModal').on('hidden.bs.modal', function(e){
            $(this).find('form').trigger('reset');
        });
        $(".sellerForm").submit(function(){
            var fromResult =  $(this).find('#formResult');
            fromResult.removeClass("alert alert-success alert-danger").html('');
            var btn =  $(this).find('#btnSubmit'),
                url = $("meta[name='app-url']").attr("content"),
                imageUrl = url+'/assets/images/loader.gif';
            btn.hide();
            fromResult.html(`<img src="${imageUrl}" alt="fetching details, Please Wait..." />`);
            var formData = new FormData(this);
            var url = '{{ route("seller.create") }}';
            _ajax.postFormData(url, formData, function(res){
                if(res.success){
                    $('#message-alert').html('<span class="badge badge-success">'+ res.message +' </span>');
                    setTimeout(() => { document.location.reload(); }, 2300);
                }
                else{
                fromResult.removeClass("alert alert-success alert-danger").html('');
                $('#message-alert').html('<span class="badge badge-danger">'+ res.message +' </span> </br>');
                btn.show();
                }
            })
            });

    });
</script>
<script>
    $(document).on("click", ".deleteRow", function () {

    var reviewId = $(this).data('id');
    var route = '/admin/seller/' + reviewId;
    var url = '{{ route("seller.delete", ":id") }}';
    url = url.replace(':id', reviewId);

    var result = _general.deleteAjax(url, "Are you sure?", "Review will be deleted!", function (response) {
        if (response) {
            $("#row" + reviewId).remove();
        }
    });
});
</script>
@endsection