@extends('admin.layouts.app')
@push('style')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
@endpush

@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"><i class="zmdi zmdi-accounts"></i>
                    Manage Vendors
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item active">Manage Vendors</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Start Content-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        @include('admin.common.flash')
                        <!-- Add VENDOR Button & Search Input -->

                        <div class="row">
                            <div class="col-lg-7 col-md-12">
                                <a href="{{route('admin-add_vendor')}}" class="btn btn-primary mb-3 mt-2">Add Vendor</a>
                            </div>
                            <div class="col-lg-5 col-md-12">
                                <div class="form-outline">
                                    <i class="zmdi zmdi-search search-icon ml-2"></i>
                                    <input type="text" id="search-input" class="form-control" placeholder="Search by name or email." />
                                </div>
                            </div>
                        </div>

                        <!-- DATA-TABLE VENDOR -->
                        <div class="table-responsive">
                            <table id="vendor-datatable" class="table dt-responsive nowrap table-striped w-100 mb-5 mt-2" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone Number</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody class="text">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection


@push('script')
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>

<script>
    $(document).ready(function() {
        $('.btn-default').hide();
    });

    var table;
    table = $('#vendor-datatable').DataTable({
        searching: false,
        processing: true,
        serverSide: true,
        responsive: false,
        pageLength: 15,
        lengthChange: false,
        aaSorting: [
            [0, 'desc']
        ],
        "ajax": {
            type: 'GET',
            url: '{{route("admin-get_vendor_listing")}}',
            data: function(d) {
                d.status = status,
                    d.keyword = $('#search-input').val();
            }
        },
        "columns": [{
                data: 'id',
                render: function(data, type, row, meta) {
                    var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                    return serialNumber;
                },
            },
            {
                data: 'name',
                orderable: false,
            },
            {
                data: 'email',
                orderable: false,
            },
            {
                data: 'phone',
                orderable: false,
                render: function(data, type, row) {
                    return data ? data : '-';
                }
            },
            {
                data: 'status',
                orderable: false,

            },
            {
                data: 'action',
                orderable: false,
            },
        ],
    });

    $('#search-input').on('keyup', function() {
        table.search($(this).val()).draw();
    });

    //CHANGE VENDOR STATUS
    $(document).on('click', '.change-status-button', function() {

        var vendorId = $(this).data('id');
        var status = $(this).data('status');
        var newStatus = status === 1 ? 0 : 1;

        Swal.fire({
            icon: 'question',
            title: 'Confirmation',
            text: 'Are you sure you want to change the status?',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    url: "{{ route('admin-change_vendor_status', ['id' => '__vendorId__']) }}".replace('__vendorId__', vendorId),
                    method: 'POST',
                    data: {
                        status: newStatus,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {

                        Swal.fire({
                            icon: 'success',
                            title: 'Status Changed',
                            text: response.message
                        });

                        $('#vendor-datatable').DataTable().ajax.reload();
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        });
    });

    //DELETE VENDOR
    $(document).on('click', '.delete-btn', function(e) {

        e.preventDefault();
        var rowId = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't to delete this Vendor Information!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function(result) {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/admin/manage_vendor/destroy/' + rowId,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        Swal.fire('Deleted!', 'The record has been deleted.', 'success').then(function() {
                            $('#vendor-datatable').DataTable().ajax.reload();
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
                    }
                });
            }
        });
    });
</script>
@endpush