@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <h5 class="card-header">Sellers   &nbsp;&nbsp;&nbsp;
                <a href="{{ route('sellers.create') }}" type="button" class="btn btn-primary">
                    <span class="tf-icons bx bx-plus"></span>&nbsp; Add new Seller
                </a>
            </h5>
            <div  class="card-body">

            <div id="login_success">
                @if(session()->has('success'))
                <div class="alert alert-success" role="alert">
                    {{ session()->get('success') }}
                </div>
                @endif
            </div>

            <form>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Date From :</label>
                        <input type="text" class="form-control" id="date_from" name="date_from" autocomplete="false" />
                    </div>
                    <div class="col-md-3">
                        <label for="date_to" class="form-label">Date To :</label>
                        <input type="text" class="form-control" id="date_to" name="date_to" autocomplete="false" />
                    </div>
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Status :</label>
                        <select id="status" name="status" class="form-select">
                            <option value=""> --- Select Status ---</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="get_data" name="submit" class="btn btn-primary mt-4">Apply</button>
                        <button type="button" id="reset" class="btn btn-primary mt-4"><i class="bx bx-reset"></i></button>
                    </div>
                </div>
            </form>

            <div class="table-responsive text-nowrap mt-3">
                <table class="table table-bordered data-table" id="seller_table">

                <thead>
                    <tr>
                    <th>Sr No.</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Total Users</th>
                    <th>Total Digital Cards</th>
                    <th>Total Physical Cards</th>
                    <th>Status</th>
                    <th>Actions</th>
                    </tr>
                </thead>
                <tbody>

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

@section('script')
<script type="text/javascript">

    var table = $('#seller_table').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        stateSaveParams: function(settings,data){
            data.date_from = $('#date_from').val()
            data.date_to = $('#date_to').val()
            data.status = $('#status').val()
        },
        stateLoadParams: function(settings,data){
            $('#date_from').val(data.date_from)
            $('#date_to').val(data.date_to)
            $('#status').val(data.status)
        },
        "ajax": {
            "url" : "{{ route('sellers.index') }}",
            "data": function ( d ) {
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
                d.status = $('#status').val();
            }
        },
        order: [[0, 'desc']],
        columns: [
            {data: 'DT_RowIndex', name: 'id'},
            {data: 'full_name', name: 'full_name'},
            {data: 'email', name: 'email'},
            {data: 'total_users', name: 'total_users', orderable: false},
            {data: 'total_card_profiles', name: 'total_card_profiles', orderable: false},
            {data: 'total_cards', name: 'total_cards', orderable: false},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    $(document).on('click', '#get_data', function () {
        table.ajax.reload();
    });

    function delete_seller(delete_url){
        Swal.fire({
            title: 'Are you sure?',
            text: 'You want to delete',
            icon: 'warning',
            customClass: {
                container: "remove-card-item-popup clear-cart-popup"
            },
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type:'DELETE',
                    url : delete_url,
                    data : {"_token": "{{ csrf_token() }}"},
                    success:function(data){
                        $("#login_success").html('');
                        if(data.status == '1'){
                            $('#login_success').html('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                            $('#seller_table').DataTable().ajax.reload();
                        }
                        $('html, body').animate({
                            scrollTop: 0
                        }, 1000);
                        setTimeout(() => {
                            $('#login_success').html('');
                        }, 3000);
                    }
                });
            }
        })
    }

    $('#reset').click(function(){
        $('#date_from').val('');
        $('#date_to').val('');
        $('#status').val('');
        $('#seller_table').dataTable().fnDraw();
    });

  $("#date_from").datepicker({
        numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() + 1);
            $("#date_to").datepicker("option", "minDate",dt);
        }
    });
    $("#date_to").datepicker({
        numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() - 1);
            $("#date_from").datepicker("option", "maxDate",dt);
        }
    });
</script>
@endsection