@extends('layouts.app')

@section('content')

<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fab fa-creative-commons-sa mr-2"></i>Return Complaints</b></h3>
</div>

<!-- modal -->
<div id="testmodal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <form action="{{ URL::to('return/complaints/coupon') }}" method="post">
            @csrf
                <div class="modal-body">
                    <p>Enter Coupon Code here</p>
                    <div id="coupon_field">
                        
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="testmodal-1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Enter Coupon Code here</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-body">
        <div class="table-responsive">
            <table class="datatable table table-hover table-center mb-0" id="datatable">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Sku</th>
                        <th>Reason</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Operation Action</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ URL::to('return/complaints') }}",
        columns: [
            {data: 'order_number', name: 'order_number'},
            {data: 'sku', name: 'sku'},
            {data: 'reason', name: 'reason'},
            {data: 'priority', name: 'priority'},
            {data: 'status', name: 'status'},
            {data: 'operation_action', name: 'operation_action'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action'}
        ]
    });
    $(document).ready(function(){
    var show_btn=$('.show-modal');
    var show_btn=$('.show-modal');
    var btnval = $('.btn_val').val();
    
        $('body').delegate('.show-modal','click',function(){
            var container = $('#coupon_field');
            container.empty();
            container.append('<div class="form-group"><input type="hidden" name="complaint_id" value="'+btnval+'"><input type="text" class="form-control" name="coupon_field" placeholder="Coupon Code" required></div>');
        $("#testmodal").modal('show');
    })
    });

    $(function() {
        $('#element').on('click', function( e ) {
            Custombox.open({
                target: '#testmodal-1',
                effect: 'fadein'
            });
            e.preventDefault();
        });
    });
</script>
@endsection