<div>
    <div class="panel panel-flat">
        <div class="panel-heading">
            <h5 class="panel-title">
                Demo Talepleri
                <a class="heading-elements-toggle"><i class="icon-more"></i></a>
            </h5>
            <div class="heading-elements">
                <ul class="icons-list no-margin">
                    <li>
                        <a wire:click="export"
                           class="btn btn-xs btn-success text-white">
                            <i class="icon-file-excel small"></i> Dışa Aktar
                        </a>
                    </li>
                </ul>
            </div>
        </div>

          <div class="search-bar">
            <input wire:model.live.debounce.300ms="search" wire:key='search' type="text" class="form-control p-10"
                   placeholder="Ara...">
        </div>
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') ?? $error }}
                </div>
            @endif
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
        <div class="table-responsive">
            <table class="table table-striped text-nowrap" style="width: 100%;">
                <thead class="text-right-xs text-grey-700 text-uppercase">
                <tr>
                    <th wire:click="doSort('form_type')">
                        <x-datatable-item columnName="form_type" customTitle="Tür" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_name')">
                        <x-datatable-item columnName="form_name" customTitle="İsim" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_surname')">
                        <x-datatable-item columnName="form_surname" customTitle="Soyisim" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_company')">
                        <x-datatable-item columnName="form_company" customTitle="Firma" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_email')">
                        <x-datatable-item columnName="form_email" customTitle="Email" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_phone')">
                        <x-datatable-item columnName="form_phone" customTitle="Telefon" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('created_at')">
                        <x-datatable-item columnName="created_at" customTitle="Tarih" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_popup')">
                        <x-datatable-item columnName="form_popup" customTitle="Yer" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('utm_source')">
                        <x-datatable-item columnName="utm_source" customTitle="Kaynak" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('from_page')">
                        <x-datatable-item columnName="from_page" customTitle="Sayfa" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th wire:click="doSort('form_aylikhacminiz')">
                        <x-datatable-item columnName="form_aylikhacminiz" customTitle="Aylık Hacminiz" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th>Status</th>
                    <th wire:click="doSort('form_talep')">
                        <x-datatable-item columnName="form_talep" customTitle="Talep" :sortColumn="$sortColumn"
                                          :sortDirection="$sortDirection"/>
                    </th>
                    <th>Sil</th>
                </tr>
                </thead>
                <tbody>
                @foreach($SitePosReports as $SitePosReport)
                    <tr>
                        <td>{{$SitePosReport->form_type}}</td>
                        <td>{{$SitePosReport->form_name}}</td>
                        <td>{{$SitePosReport->form_surname}}</td>
                        <td>{{$SitePosReport->form_company}}</td>
                        <td>{{$SitePosReport->form_email}}</td>
                        <td>{{$SitePosReport->form_phone}}</td>
                        <td>{{ date('d.m.Y H:i', strtotime($SitePosReport->created_at)) }}</td>
                        <td>{{$SitePosReport->form_popup == 0 ? 'Demo Sayfası' : 'Popup'}}</td>
                        <td>{{$SitePosReport->utm_source}}</td>
                        <td>{{$SitePosReport->from_page}}</td>
                        <td>{{$SitePosReport->form_aylikhacminiz}}</td>
                        <td>
                            <div class="form-group">
                                @php
                                    $normalizedStatus = \App\Livewire\DemoEntry::normalizeStatus($SitePosReport->status ?? 'talep_geldi');
                                @endphp
                                <select
                                        wire:change="emitStatusUpdated('{{ $SitePosReport->id }}', $event.target.value)">
                                    @foreach(\App\Livewire\DemoEntry::STATUS_OPTIONS as $statusValue => $statusLabel)
                                        <option value="{{ $statusValue }}" {{ $normalizedStatus === $statusValue ? 'selected' : '' }}>{{ $statusLabel }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </td>
                        <td>{{$SitePosReport->form_talep}}</td>
                        <td>
                                <a href="{{route('site.del-demo-entry', [$SitePosReport->id])}}"
                                   class="btn btn-xs btn-danger text-white"><i class="icon-cancel-square"></i> Sil </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px;">
            <div style="flex-grow: 1; text-align: left;">
                <label for="perPage" style="margin-right: 10px; font-weight: bold;">Sayfa Başına Gösterim:</label>
                <select id="perPage" wire:model="perPage"
                        style="padding: 8px; border-radius: 4px; border: 1px solid #ddd; cursor: pointer;">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>

            <div style="flex-grow: 1; text-align: right;">
                {{$SitePosReports->links('livewire::bootstrap')}}
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('livewire:load', function () {
            Livewire.on('statusUpdated', (id, status) => {
                Livewire.emit('updateStatus', id, status);
            });
        });
    </script>
@endpush
