<div>
    <div class="row">
        <div class="col-md-6 d-flex justify-content-between mt-2 mb-2">
            <h4 class="fw-bold ">
                <span class="text-muted fw-light"></span>
                Promotions
            </h4>
        </div>

        {{-- <div class="col-md-6 d-flex justify-content-end">
            <div class="col-md-9 mb-4">
                <input type="text" wire:model.live.debounce.300ms="search" value="" name="search" placeholder="Search" class="form-control search">
            </div>
        </div> --}}
    </div>
    <!-- Striped Rows -->
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-end mb-2 mt-0">
                <button 
                    type="button" 
                    class="btn btn-primary" 
                    data-bs-toggle="modal" 
                    data-bs-target="#addModal"
                    data-bs-backdrop="static" data-bs-keyboard="false"
                    ><strong><i class="bx bx-plus"></i>
                    Add Promotion</strong>
                </button>
            </div>
            
            <div class="table-responsive text-wrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Media</th>
                        <th>Status</th>
                        <th>URL</th>
                        <th>Action</th>
                    </tr>
                </thead>
                @if (count($records) > 0)
                <tbody class="table-border-bottom-0">
                    @foreach ($records as $record)
                        <tr>
                            <td>
                                <img src="{{$record->image ?? asset('images/placeholder.png')}}" style="width:40px; height:40px; border-radius:50%;"/>
                            </td>
                            <td>{{$record->status}}</td>
                            <td>{{$record->url ?? "-"}}</td>
                            <td width="15%">
                                <a href="javascript:;" class="editPromotion" data-obj="{{json_encode($record)}}">
                                    <i class="bx bx-edit btn btn-primary btn-xs"></i>
                                </a>
                                <a href="javascript:void(0);" class="delete" data-id="{{$record->id}}">
                                    <i class="bx bx-trash btn btn-danger btn-xs"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                @else
                    <td colspan="5" class="text-center">No record found</td>
                @endif
                </table>
                @if (count($records) > 0)
                    <div>
                    {{ $records->links('livewire.pagination') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Add Coupon Modal -->
    <div class="modal" id="addModal"  tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form action="{{route('admin.addpromotion')}}" method="POST" enctype="multipart/form-data">
                @include('admin.promotion.form')
            </form>
        </div>
    </div>

    <div class="modal" id="editModal"  tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form action="{{route('admin.addpromotion')}}" method="POST" enctype="multipart/form-data" id="editForm">
                @include('admin.promotion.form')
            </form>
        </div>
    </div>


</div>

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function(){
        function confirmDelete(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    @this.call('delete', id)
                }
            });
        }

        $(".delete").on('click', function(){
            confirmDelete($(this).data('id'))
        })
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#addModal").modal({
            backdrop: "static",
            keyboard: false,
        });

        $(".editPromotion").on('click', function(){
            var obj = $(this).data('obj');
            console.log(obj);

            $("#editModal .statusField").val(obj.status);
            $("#editModal .urlField").val(obj.url);

            $("#editModal #modalTitle").text('Edit Promotion');
            $("#editForm").attr('action', `{{route('admin.editPromotion', '')}}/${obj.id}`)
            $("#editModal").modal('show')
        })
    });
</script>
@endsection