@extends('layout.adminApp')
@section('content')
    <div class="container-fluid">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Coupons</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered coupons display" id="couponsTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Discount</th>
                                <th>Type</th>
                                <th>Expiry</th>
                                <th>Per User</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($coupons as $coupon)
                                <tr>
                                    <td>{{ $coupon->coupon_name }} <input type="hidden" value="{{ $coupon->id }}"></td>
                                    <td>{{ $coupon->discount_number }}</td>
                                    <td>{{ $coupon->discount_type }}</td>
                                    <td>{{ $coupon->expiry_date }}</td>
                                    <td>{{ $coupon->per_user }}</td>
                                    <td>{{ $coupon->total }}</td>
                                    <td>
                                        @if ($coupon->status)
                                            <button class="btn btn-success active">Active</button>
                                        @else
                                            <button class="btn btn-warning not-active">Not-Active</button>
                                        @endif
                                    </td>
                                    <td><button class="btn btn-danger delete mr-3">Delete</button></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div>
                        <div class="float-right">
                            <a href="#" class="btn btn-primary mt-2" data-toggle="modal"
                                data-target="#addCouponModal">Add Coupon<a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- model new Coupon-->
    <div class="modal fade" id="addCouponModal" 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 Coupon</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form action="{{ route('admin.coupon.add') }}" method="post">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <label for="name">Coupon Code</label>
                            <input type="text" class="form-control" name="coupon_name"
                                placeholder="Code..." required>
                        </div>
                        <div class="form-group">
                            <label for="name">Discount Number</label>
                            <input type="number" class="form-control" name="discount_number"
                                placeholder="Number..." required>
                        </div>
                        <div class="form-group">
                            <label for="name">Discount Type</label>
                            <select name="discount_type" class="form-control" required>
                                <option value="percent">Percentage %</option>
                                <option value="fixed">Fixed</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">Expiry Date</label>
                            <input type="date" class="form-control" name="expiry_date" placeholder=""
                                required>
                        </div>
                        <div class="form-group">
                            <label for="name">Per User</label>
                            <input type="number" class="form-control" name="per_user" placeholder="per user"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="name">Total</label>
                            <input type="number" class="form-control" name="total" placeholder="total coupons"
                                required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="submit">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <!-- Page level plugins -->
    <script src="{{ asset('admindic/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('admindic/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>

    @if ($errors->any())
        <script>
            $(document).ready(function() {
                $('#addCouponModal').modal('show');
            })
        </script>
    @endif

    <script>
        $(document).ready(function() {
            var table = $('#couponsTable').DataTable({})

            $('#couponsTable tbody').on('click', '.delete', function() {
                var RowToRemove = table.row($(this).parents('tr'));
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                swal({
                        title: `Are you sure you want to delete this record?`,
                        text: "If you delete this coupon, it will be gone forever.",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: "{{ route('admin.coupon.delete') }}",
                                method: "GET",
                                data: {
                                    id: id
                                },
                                success: function(data) {
                                    RowToRemove
                                        .remove()
                                        .draw();
                                },

                                error: function(data) {
                                    swal({
                                        title: 'Operation failed',
                                        text: "Selected coupon has orders, You can change the status instead",
                                        icon: "warning",
                                        dangerMode: true,
                                    })
                                }
                            })
                        }
                    })
            });
            $("#couponsTable").on("click", ".active", function() {
                var button = $(this);
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                swal({
                        title: `Are you sure you want to mark this Coupon as Not-Active?`,
                        text: `This Coupon will not be visible for user`,
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willUpdate) => {
                        if (willUpdate) {
                            $.ajax({
                                url: "{{ route('admin.coupon.status') }}",
                                method: "GET",
                                data: {
                                    id: id,
                                    status: 0
                                },
                                success: function(data) {
                                    button.addClass('btn-warning');
                                    button.addClass('not-active');
                                    button.html('Not-Active');
                                    button.removeClass('active');
                                    button.removeClass('btn-success');
                                }
                            })
                        }
                    })
            })
            $("#couponsTable").on("click", ".not-active", function() {
                var button = $(this);
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                swal({
                        title: `Are you sure you want to mark this Coupon as Active?`,
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willUpdate) => {
                        if (willUpdate) {
                            $.ajax({
                                url: "{{ route('admin.coupon.status') }}",
                                method: "GET",
                                data: {
                                    id: id,
                                    status: 1
                                },
                                success: function(data) {
                                    button.removeClass('btn-warning');
                                    button.removeClass('not-active');
                                    button.html('Active');
                                    button.addClass('active');
                                    button.addClass('btn-success');
                                }
                            })
                        }
                    })
            })
        });
    </script>
@endsection