<div class="container-xxl flex-grow-1 container-p-y">

    <div class="row mx-1 my-1">
        <div class="col-md-9">
            <h4 class="fw-bold py-3 mb-4">Campaign <span class="text-muted fw-light">/ Detail</span></h4>
        </div>
    </div>

    <div class="row mx-1 my-1">

        <div class="card">
            <div class="card-body">
                <div class="table-responsive text-wrap" style="overflow-x: hidden">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Campaign Detail</h4>
                        </div>
                        @if($campaign->status == 'Pending')
                            <div class="col-md-6 d-flex justify-content-end mb-4">
                                <button type="button" class="btn btn-primary" wire:click="sendNotification">Send Notification</button>
                            </div>
                        @elseif($campaign->status == 'Scheduled')
                            <div class="col-md-6 d-flex justify-content-end mb-4">
                                <button type="button" class="btn btn-danger mx-2" wire:click="updateStatus(0)">Cancel</button>
                                <button type="button" class="btn btn-primary" wire:click="saveAudience">Save Audience</button>
                            </div>
                        @endif
                    </div>

                    <div class="row">
                        <div class="col-md-2">
                            <div class="d-flex align-items-start align-items-sm-center gap-4" style="text-align: center;">
                                <img class="d-block rounded" src="{{ $campaign->image ?? asset('images/placeholder.png') }}" style="border-radius:10%;width:120px;height:120px">
                            </div>
                        </div>
                        <div class="col-md-10 px-2">
                            <table class="table">
                                <tr>
                                    <th>ID</th>
                                    <td>{{ $campaign->id ?? "" }}</td>
                                    <th>Name</th>
                                    <td>{{ $campaign->title ?? "" }}</td>
                                </tr>
                                <tr>
                                    <th>Schedule Date Time</th>
                                    {{-- <td>{{ $campaign->schedule_date.' '.$campaign->schedule_time }}</td> --}}
                                    <td>
                                        {{ \Carbon\Carbon::createFromFormat('Y-m-d H:i', $campaign->schedule_date.' '.$campaign->schedule_time, 'UTC')
                                            ->setTimezone('Europe/Berlin')
                                            ->format('Y-m-d H:i') }}
                                    </td>
                                    <th>Status</th>
                                    <td>{{ $campaign->status }}</td>
                                </tr>
                                <tr>
                                    <th>Description</th>
                                    <td colspan="3">{{ $campaign->description ?? "" }}</td>
                                </tr>
                            </table>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    @if($campaign->status == 'Pending' || $campaign->status == 'Scheduled')
        <!-- if campaign is pending or schedulled-->
        <div class="row mt-4 mx-1 my-1">
            <div class="card">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Target Audience</h4>
                        </div>

                        <div class="col-md-6 d-flex justify-content-end mb-4">
                            <input type="text" wire:model.live.debounce.300ms="search" value="" name="search" placeholder="Search" class="form-control search">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 p-2" style="text-align: right">

                            <label for="">Select All </label>
                           {{-- <input
                                type="checkbox"
                                wire:model="selectAll"
                                wire:click="toggleSelectAll"
                                {{ $selectAll == true ? 'checked' : '' }}/>--}}
                            <input
                                type="checkbox"
                                wire:model="selectAll"
                                wire:click="toggleSelectAll"
                            />
                        </div>
                    </div>
                    <div class="table-responsive text-wrap">
                        <table class="table table-hover" id="assignUserTable">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Logo</th>
                                <th>User Name</th>
                                <th>Company Name</th>
                                <th>Type</th>
                                <th>Country</th>
                                <th>Action
                                    {{-- <input
                                        type="checkbox"
                                        wire:model="selectAll"
                                        wire:click="toggleSelectAll"
                                        {{ $selectAll == true ? 'checked' : '' }}/> --}}
                                </th>
                            </tr>
                        </thead>
                            <tbody class="table-border-bottom-0">
                                @foreach ($companies as $key => $company)
                                    <tr>
                                        <td>{{$company?->id}}</td>
                                        <td>
                                            <img src="{{$company?->logo ?? asset('images/trading_fmcg_logo.png')}}" class="listing-img"/>
                                        </td>
                                        <td>{{$company?->user?->name ?? null}}</td>
                                        <td>{{$company?->name ?? null}}</td>
                                        <td>{{$company?->type ?? null}}</td>
                                        <td>{{$company?->country }}</td>
                                        <td>

                                            <input type="checkbox"
                                                   value="{{ $company->id }}"
{{--                                                   wire:click="toggleCompanySelection({{ $company?->id }})"--}}
                                                   wire:model="selectedCompanies"
                                                   wire:key="checkbox-{{ $company->id }}">

                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        @if (count($companies) > 0)
                            <div>
                                {{ $companies->links('livewire.pagination') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="row mt-4 mx-1 my-1">
            <div class="card">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Target Audience</h4>
                        </div>

                        {{-- <div class="col-md-6 d-flex justify-content-end mb-4">
                            <input type="text" wire:model.live.debounce.300ms="search" value="" name="search" placeholder="Search" class="form-control search">
                        </div> --}}
                    </div>

                    <div class="table-responsive text-wrap">
                        <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Logo</th>
                                <th>User Name</th>
                                <th>Company Name</th>
                                <th>Type</th>
                                <th>Country</th>
                            </tr>
                        </thead>
                            <tbody class="table-border-bottom-0">
                                @foreach ($campaign->campaignAudience as $item)
                                    <tr>
                                        <td>{{$item?->user?->company?->id}}</td>
                                        <td>
                                            <img src="{{$item?->user?->company != null ? $item->user->company?->logo : asset('images/trading_fmcg_logo.png')}}" class="listing-img"/>
                                        </td>
                                        <td>{{$item?->user?->name ?? "-"}}</td>
                                        <td>{{$item?->user?->company?->name ?? ""}}</td>
                                        <td>{{$item?->user?->company?->type ?? "-"}}</td>
                                        <td>{{$item?->user?->company?->country ?? "-"}}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', 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.addEventListener('DOMContentLoaded', function () {
        console.log("livewire init");

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

        Livewire.on('notificationSent', () => {
            toastr.success('Notification sent');
        });

        Livewire.on('selectedListSaved', () => {
            toastr.success('Notification scheduled with selected companies');
        });

        Livewire.on('selectedListEmpty', () => {
            toastr.error('Please select target audience');
        });

        Livewire.on('cancelled', () => {
            toastr.success('Campaign cancelled successfully');
        });
    });
</script>

@endsection
