<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> Campaigns</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 Campaign</strong>
                </button>
            </div>
            
            <div class="table-responsive text-wrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse ($campaigns as $campaign)
                        <tr wire:key="campaign-row-{{ $campaign->id }}">
                            <td><img src="{{$campaign->image ?? asset('images/placeholder.png')}}" style="width:40px; height:40px; border-radius:20%;"/></td>
                            <td>{{$campaign->title}}</td>
                            <td>{{$campaign->description}}</td>
                            <td>
                                @if($campaign->status == 'Pending')
                                    <span class="badge bg-label-info">{{$campaign->status}}</span>
                                @elseif($campaign->status == 'Scheduled')
                                    <span class="badge bg-label-primary">{{$campaign->status}}</span>
                                @elseif($campaign->status == 'Cancelled')
                                    <span class="badge bg-label-danger">{{$campaign->status}}</span>
                                @else
                                    <span class="badge bg-label-success">{{$campaign->status}}</span>
                                @endif
                            </td>
                            <td width="15%">
                                <a href="{{url('admin/campaigns/detail/' . $campaign->id)}}">
                                    <i class="bx bx-show btn btn-primary btn-xs"></i>
                                </a>
                                @if($campaign->status == 'Pending' || $campaign->status == 'Scheduled')
                                    <a href="javascript:;" class="editCampaign" wire:click="selectCampaign({{$campaign->id}})">
                                        <i class="bx bx-edit btn btn-info btn-xs"></i>
                                    </a>
                                @endif
                                <a href="javascript:void(0);" class="delete" data-id="{{$campaign->id}}">
                                    <i class="bx bx-trash btn btn-danger btn-xs"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">No record found</td>
                        </tr>
                    @endforelse
                </tbody>
                </table>
                @if (count($campaigns) > 0)
                    <div>
                    {{ $campaigns->links('livewire.pagination') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addModal"  tabindex="-1" aria-hidden="true" wire:ignore>
        <div class="modal-dialog modal-lg" role="document">
            <form wire:submit.prevent="add" method="POST" enctype="multipart/form-data">
<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Add Campaign</h5>
        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
        ></button>
    </div>
    <div class="modal-body">
        @csrf
        <div class="row">
            <div class="col mb-2">
                <label for="nameLarge" class="form-label">Title</label>
                <input type="text" wire:model.defer="title" class="nameField form-control @error('title') is-invalid @enderror" placeholder="Enter Title" required maxlength="100"/>
                @error('title')
                    <span class="invalid-feedback"><strong>{{$message}}</strong></span>
                @enderror
            </div>
        </div>

        <div class="row">
            <div class="col mb-2">
                <label for="nameLarge" class="form-label">Description</label>
                <input type="text" wire:model.defer="description" class="nameField form-control @error('description') is-invalid @enderror" placeholder="Enter Description" required maxlength="200"/>
                @error('description')
                    <span class="invalid-feedback"><strong>{{$message}}</strong></span>
                @enderror
            </div>
        </div>

        <div class="row">
            <div class="col mb-2">
                <label for="nameLarge" class="form-label">Schedule Date</label>
                <input type="date" wire:model.defer="schedule_date" class="nameField form-control" placeholder="Enter Schedule Date"/>
            </div>

            <div class="col mb-2">
                <label for="nameLarge" class="form-label">Schedule Time</label>
                <input type="time" wire:model.defer="schedule_time" class="nameField form-control" placeholder="Enter Schedule Time"/>
            </div>
        </div>

        <div class="row">
            <div class="col mb-2">
                <label for="image" class="form-label">Image</label>
                <input type="file" id="imageInput" wire:model="image" class="form-control" />
            </div>
            <div wire:loading wire:target="image" class="text-warning small mt-1">
                Uploading image... please wait
            </div>
        </div>

        @if ($image)
            <div class="row">
                <div class="col mb-2">
                    <label class="form-label">Preview</label>
                    <img src="{{ $image->temporaryUrl() }}" alt="Preview" class="img-fluid" style="max-height: 200px;" />
                </div>
            </div>
        @endif

        @if($storedImage)
            <div class="row">
                <div class="col mb-2">
                    <label for="image" class="form-label">Uploaded Image</label>
                    <img src="{{$storedImage}}" />
                </div>
            </div>
        @endif
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" wire:loading.attr="disabled" wire:target="image">
            Save
        </button>
    </div>
</div>

            </form>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="editModal"  tabindex="-1" aria-hidden="true" wire:ignore>
        <div class="modal-dialog modal-lg" role="document">
            <form id="editForm" wire:submit.prevent="update" method="POST" enctype="multipart/form-data">
                @include('admin.campaigns.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'))
        })
    });

    $(document).ready(function(){
        $("#addModal").modal({
            backdrop: "static",
            keyboard: false,
        });

        $(".editCampaign").on('click', function(){
            $("#editForm #modalTitle").text('Edit Campaign');
            $("#editModal").modal('show')
        })
    });

    document.addEventListener('DOMContentLoaded', function () {
        console.log("livewire init");

        Livewire.on('campaignUpdateError', () => {
            console.log("in error");
            toastr.error('Something went wrong');
        });

        Livewire.on('campaignAddError', () => {
            console.log("in error");
            toastr.error('Something went wrong');
        });

        Livewire.on('campaignAdded', () => {
            // toastr.success('Campaign Added');
            $("#addModal").modal('hide')
        });

        Livewire.on('campaignUpdated', () => {
            toastr.success('Record updated successfully');
            $("#editModal").modal('hide')
        });
    });
</script>

@endsection