@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <form class=" d-flex align-items-center  gap-3" id="status">
                            <h5 class="mb-0 text-nowrap fw-semibold">Filter</h5>
                            <select name="status" class="form-select form-select-sm" id=""
                                onchange="this.form.submit()" style="min-width: 150px">
                                <option value="" {{ request()->status === null ? 'selected' : '' }}>All</option>
                                <option value="1" {{ request()->status === '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ request()->status === '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            <a href="{{route('admin.coupon.index')}}" class="btn btn-primary btn-sm">Reset</a>

                        </form>
                        <div>
                            <a href="{{ route('admin.coupon.create') }}" class="btn btn-success btn-sm">
                                <i class="bi bi-plus-circle me-1"></i> Add New Coupon
                            </a>
                        </div>

                    </div>

                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-striped my-table2 dataTable no-footer" id="datatable_internal">
                                <thead class="table-dark">
                                    <tr>
                                        <th>#</th>
                                        <th>Code</th>
                                        <th>Discount Type</th>
                                        <th>Applies To</th>
                                        <th>Value</th>
                                        <th>Valid From</th>
                                        <th>Expire At</th>
                                        <th>Max Uses</th>
                                        <th>Current Uses</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($coupons as $coupon)
                                        <tr id="couponTr_{{ $coupon->id }}">
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $coupon->code }}</td>
                                            <td>

                                                <button
                                                    class="badge btn-sm {{ $coupon->discount_type == 'percentage' ? 'btn-pink' : 'btn-info' }}">
                                                    {{ ucfirst($coupon->discount_type) }}
                                            </td>
                                                <td>
                                                <span
                                                    class="badge {{ $coupon->applies_to_all ? 'btn-purple' : 'bg-secondary' }}">
                                                    {{ $coupon->applies_to_all ? 'All' : 'Specific' }}
                                                </span>
                                            </td>
                                            <td>
                                                @if ($coupon->discount_type == 'percentage')
                                                    {{ $coupon->discount_value }}%
                                                @else
                                                    ৳{{ $coupon->discount_value }}
                                                @endif
                                            </td>

                                            <td>{{ $coupon->valid_from ? $coupon->valid_from : '-' }}</td>
                                            <td>{{ $coupon->expire_at ? $coupon->valid_from : '-' }}</td>
                                            <td>{{ $coupon->max_uses ?? '-' }}</td>
                                            <td>{{ $coupon->current_uses }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <button
                                                        class="btn btn-sm btn-{{ $coupon->is_active ? 'success' : 'danger' }} dropdown-toggle"
                                                        type="button" id="statusDropdown{{ $coupon->id }}"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        {{ $coupon->is_active ? 'Active' : 'Inactive' }}
                                                    </button>
                                                    <ul class="dropdown-menu"
                                                        aria-labelledby="statusDropdown{{ $coupon->id }}">
                                                        <li>
                                                            <a class="dropdown-item update-status"
                                                                href="javascript:void(0);" data-id="{{ $coupon->id }}"
                                                                data-status="1">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" fill="green"
                                                                    class="bi bi-check-circle me-1" viewBox="0 0 16 16">
                                                                    <path
                                                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.97 10.97l5-5-1.414-1.414L6.97 8.142 5.444 6.616 4.03 8.03l2.94 2.94z" />
                                                                </svg>
                                                                Active
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item update-status"
                                                                href="javascript:void(0);" data-id="{{ $coupon->id }}"
                                                                data-status="0">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" fill="red"
                                                                    class="bi bi-x-circle me-1" viewBox="0 0 16 16">
                                                                    <path
                                                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.646 4.646l6.708 6.708-.708.708-6.708-6.708.708-.708zM11.354 4.646l.708.708-6.708 6.708-.708-.708 6.708-6.708z" />
                                                                </svg>
                                                                Inactive
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>

                                        
                                            <td>
                                                <a href="{{ route('admin.coupon.add-coupon', $coupon->id) }}"
                                                    class="btn btn-info btn-sm me-1 text-white">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-plus-square-fill"
                                                        viewBox="0 0 16 16">
                                                        <path
                                                            d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                                                    </svg>

                                                </a>
                                                <a href="{{ route('admin.coupon.edit', $coupon->id) }}"
                                                    class="btn btn-primary btn-sm me-1">

                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
                                                        <path
                                                            d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
                                                        </path>
                                                        <path fill-rule="evenodd"
                                                            d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z">
                                                        </path>
                                                    </svg>
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm deleteButton"
                                                    data-url="{{ route('admin.coupon.destroy', $coupon->id) }}"
                                                    data-parentid="couponTr_{{ $coupon->id }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                                        <path
                                                            d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div> <!-- table-responsive -->
                    </div> <!-- card-body -->
                </div> <!-- card -->

            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('.update-status').on('click', function() {
                let id = $(this).data('id');
                let status = $(this).data('status');
                let button = $(this).closest('.dropdown').find('button');
                Swal.fire({
                    title: 'Updating...',
                    text: 'Please wait while the status is being updated.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });


                $.ajax({
                    url: "{{ route('admin.coupon.update-status') }}",
                    method: 'PATCH',
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: id,
                        status: status
                    },
                    success: function(response) {
                        Swal.close();

                        if (response.status) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                                timer: 4000,
                                showConfirmButton: true
                            });
                            if (status == 1) {
                                button.text('Active');
                                button.removeClass('btn-danger').addClass('btn-success');
                            } else {
                                button.text('Inactive');
                                button.removeClass('btn-success').addClass('btn-danger');
                            }
                        } else {
                            alert('Something went wrong!');
                        }
                    },
                    error: function(xhr) {
                        Swal.close();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: xhr.responseJSON?.message ||
                                'Something Went Wrong'
                        });
                    }
                });
            })
        })
    </script>
@endpush