@extends('layouts.app')

@section('headScripts')
@endsection

@section('content')

    <div class="">
        <main>
            <div class="w-full px-4 pb-60">
                <div class="">
                    <div class="sm:flex sm:items-center gap-x-2">

                        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                            <div class="lg:divide-y lg:divide-stone-200">
                                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                    <div
                                        class="bg-gradient-to-b from-stone-600 to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                                        TEKLİFLER</div>
                                    <a href="{{ route('offers.index', ['filter' => 'all']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        Tümü</a>
                                    <a href="{{ route('offers.index', ['filter' => 'new']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'new' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Taslak</a>
                                    <a href="{{ route('offers.index', ['filter' => 'send']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'send' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Gönderildi</a>
                                    <a href="{{ route('offers.index', ['filter' => 'rejected']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'rejected' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Reddedildi</a>
                                    <a href="{{ route('offers.index', ['filter' => 'accepted']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'accepted' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Kabul
                                        Edildi</a>
                                </nav>
                            </div>
                        </header>

                        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                            <div class="lg:divide-y lg:divide-stone-200">
                                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                    <div class="flex items-center content-center px-2.5 text-sm rounded-s-lg">
                                        <span class="material-symbols-rounded text-stone-400">
                                            date_range
                                        </span>
                                    </div>
                                    <a href="{{ route('offers.index', ['filter' => request()->query('filter', 'all'), 'date' => 'this_week']) }}"
                                        type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                        hafta</a>
                                    <a href="{{ route('offers.index', ['filter' => request()->query('filter', 'all'), 'date' => 'this_month']) }}"
                                        type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'this_month' || !request()->has('date') ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                        ay</a>
                                    <a href="{{ route('offers.index', ['filter' => request()->query('filter', 'all'), 'date' => 'this_year']) }}"
                                        type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'this_year' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                        yıl</a>
                                    <a href="{{ route('offers.index', ['filter' => request()->query('filter', 'all'), 'date' => 'all']) }}"
                                        type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Tüm
                                        zamanlar</a>
                                </nav>
                            </div>
                        </header>

                        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                            <div class="lg:divide-y lg:divide-stone-200">
                                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                    <a href="#" onclick="printTable(); return false;" type="button"
                                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        <span class="material-symbols-rounded text-stone-400">
                                            print
                                        </span>
                                    </a>
                                    <a href="{{ route('offers.index', ['filter' => request()->query('filter', 'all'), 'date' => 'this_week']) }}"
                                        type="button"
                                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        <span class="material-symbols-rounded text-stone-400">
                                            file_export
                                        </span>
                                    </a>
                                </nav>
                            </div>
                        </header>

                    </div>
                    <div class="flow-root mt-2">
                        <div class="-my-2 overflow-x-auto">
                            <div class="inline-block min-w-full py-2 align-middle">
                                <div x-data="{
                                    sortField: 'date',
                                    sortDirection: 'desc',
                                    sortedInvoices: [],
                                    init() {
                                        this.sortedInvoices = [...this.parseInvoices()];
                                        this.sort();
                                    },
                                    parseInvoices() {
                                        return Array.from(document.querySelectorAll('tbody tr')).map((row) => row);
                                    },
                                    toggleSort(field) {
                                        if (this.sortField === field) {
                                            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                                        } else {
                                            this.sortField = field;
                                            this.sortDirection = 'asc';
                                        }
                                        this.sort();
                                    },
                                    sort() {
                                        const tbody = document.querySelector('tbody');
                                        this.sortedInvoices.sort((a, b) => {
                                            let aValue, bValue;
                                            const cellIndex = Array.from(document.querySelectorAll('th')).findIndex(
                                                th => th.getAttribute('data-field') === this.sortField
                                            );
                                
                                            if (cellIndex !== -1) {
                                                aValue = a.children[cellIndex].textContent.trim();
                                                bValue = b.children[cellIndex].textContent.trim();
                                            }
                                
                                            if (this.sortField === 'date') {
                                                const dateA = this.parseDate(aValue);
                                                const dateB = this.parseDate(bValue);
                                                return this.sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
                                            }
                                
                                            if (['total_sub', 'total_vat', 'total_amount'].includes(this.sortField)) {
                                                const numA = parseFloat(aValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                                const numB = parseFloat(bValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                                return this.sortDirection === 'asc' ? numA - numB : numB - numA;
                                            }
                                
                                            return this.sortDirection === 'asc' ?
                                                aValue.localeCompare(bValue) :
                                                bValue.localeCompare(aValue);
                                        });
                                
                                        // Clear and refill tbody
                                        while (tbody.firstChild) {
                                            tbody.removeChild(tbody.firstChild);
                                        }
                                
                                        this.sortedInvoices.forEach(row => {
                                            tbody.appendChild(row);
                                        });
                                    },
                                    sortIcon(field) {
                                        if (this.sortField !== field) return '↕';
                                        return this.sortDirection === 'asc' ? '↑' : '↓';
                                    },
                                    parseDate(dateString) {
                                        // Parse date from format DD.MM.YYYY
                                        const parts = dateString.split('.');
                                        return new Date(parts[2], parts[1] - 1, parts[0]);
                                    }
                                }">
                                    <table class="min-w-full divide-y divide-stone-300">
                                        <thead>
                                            <tr class="p-2 text-sm font-light text-right whitespace-nowrap text-stone-500">
                                                <th scope="col" data-field="type" @click="toggleSort('type')"
                                                    class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                    Durumu <span x-text="sortIcon('type')"></span></th>
                                                <th scope="col" data-field="date" @click="toggleSort('date')"
                                                    class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                    Tarihi <span x-text="sortIcon('date')"></span></th>
                                                <th scope="col" data-field="company" @click="toggleSort('company')"
                                                    class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                    Cari Hesap <span x-text="sortIcon('company')"></span></th>
                                                <th scope="col" data-field="number" @click="toggleSort('number')"
                                                    class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                    Numara <span x-text="sortIcon('number')"></span></th>
                                                <th scope="col" data-field="details" class="p-2 text-left">
                                                    Başlık</th>
                                                <th scope="col" data-field="total_sub" @click="toggleSort('trl_sub')"
                                                    class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                    Ara toplam <span x-text="sortIcon('trl_sub')"></span></th>
                                                <th scope="col" data-field="trl_vat" @click="toggleSort('trl_vat')"
                                                    class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                    Vergiler <span x-text="sortIcon('trl_vat')"></span></th>
                                                <th scope="col" data-field="trl_total" @click="toggleSort('trl_total')"
                                                    class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                    Genel Toplam <span x-text="sortIcon('trl_total')"></span></th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-stone-200">
                                            @if (count($offers) > 0)
                                                @foreach ($offers as $item)
                                                    <tr class="transition-all hover:bg-stone-100">
                                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                            @if ($item->type == 'new' || $item->type == 'edited')
                                                                <p
                                                                    class="flex items-center content-center text-sm font-semibold leading-6 gap-x-1.5 text-amber-500">
                                                                    <span class="text-lg material-symbols-rounded">
                                                                        edit_note
                                                                    </span>
                                                                    TASLAK
                                                                </p>
                                                            @elseif($item->type == 'send')
                                                                <p
                                                                    class="flex items-center content-center text-sm font-semibold leading-6 gap-x-1.5 text-sky-500">
                                                                    <span class="text-lg material-symbols-rounded">
                                                                        forward
                                                                    </span>
                                                                    GÖNDERİLDİ
                                                                </p>
                                                            @elseif($item->type == 'rejected')
                                                                <p
                                                                    class="flex items-center content-center text-sm font-semibold leading-6 gap-x-1.5 text-rose-500">
                                                                    <span class="text-lg material-symbols-rounded">
                                                                        block
                                                                    </span>
                                                                    REDDEDİLDİ
                                                                </p>
                                                            @elseif($item->type == 'accepted')
                                                                <p
                                                                    class="flex items-center content-center text-sm font-semibold leading-6 gap-x-1.5 text-teal-500">
                                                                    <span class="text-lg material-symbols-rounded">
                                                                        done_all
                                                                    </span>
                                                                    KABUL EDİLDİ
                                                                </p>
                                                            @endif
                                                        </td>
                                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                            {{ date('d.m.Y', strtotime($item->date)) }}</td>
                                                        <td
                                                            class="px-2 py-2 text-sm font-medium text-stone-900 whitespace-nowrap">
                                                            <x-popover
                                                                route="{{ route('companies.show', $item->company->slug) }}"
                                                                data="{{ $item->company->name }}"
                                                                text="Cari hesaba git" />
                                                        </td>
                                                        <td class="px-2 py-2 text-sm text-stone-900 whitespace-nowrap">
                                                            <x-popover route="{{ route('offers.show', $item->id) }}"
                                                                data="OF{{ $item->number }}" text="Teklifi görüntüle" />
                                                        </td>
                                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                            <span
                                                                class="uppercase text-stone-400">{{ $item->title }}</span>
                                                        </td>
                                                        <td
                                                            class="px-2 py-2 text-sm text-right text-stone-500 whitespace-nowrap">
                                                            {{ number_format($item->trl_sub, 2, ',', '.') }}</td>
                                                        <td
                                                            class="px-2 py-2 text-sm text-right text-stone-500 whitespace-nowrap">
                                                            {{ number_format($item->trl_tax, 2, ',', '.') }}</td>
                                                        <td
                                                            class="px-2 py-2 text-sm font-bold text-right text-stone-600 whitespace-nowrap">
                                                            <p>{{ number_format($item->trl_total, 2, ',', '.') }} TRL</p>
                                                            @if ($item->currency != 'TRL')
                                                                <p class="text-xs font-normal text-stone-400">
                                                                    {{ number_format($item->ex_total, 2, ',', '.') }}
                                                                    {{ $item->currency }}</p>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <x-alert-standard color="stone">
                                                    Seçili aralıkta veri bulunmuyor.
                                                </x-alert-standard>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

@endsection

@section('scripts')
    <script>
        function printTable() {
            // Create a new window for printing
            let printWindow = window.open('', '_blank');

            // Get the table content
            let table = document.querySelector('table').cloneNode(true);

            // Create HTML for the print window
            let html = `
    <!DOCTYPE html>
    <html>
    <head>
        <title>Teklifler Raporu</title>
        <meta charset="utf-8">
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            table { width: 100%; border-collapse: collapse; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
            .text-right { text-align: right; }
            .print-header { margin-bottom: 20px; }
            .print-footer { margin-top: 30px; font-size: 12px; text-align: center; color: #666; }
            @media print {
                button { display: none; }
            }
        </style>
    </head>
    <body>
        <div class="print-header">
            <h1>Teklifler</h1>
            <p>Yazdırma Tarihi: ${new Date().toLocaleDateString('tr-TR')}</p>
        </div>

        <button onclick="window.print(); return false;" style="padding: 8px 16px; margin-bottom: 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Yazdır</button>

        <div id="table-container"></div>

        <div class="print-footer">
            <p>Bu rapor Apper {{ $tool_name }} ile {{ date('d.m.Y') }} tarihinde oluşturulmuştur.</p>
        </div>
    </body>
    </html>
    `;

            // Write to the new window
            printWindow.document.write(html);

            // Insert the table into the container
            printWindow.document.getElementById('table-container').appendChild(table);

            // Make all columns visible and properly formatted for print
            let rows = printWindow.document.querySelectorAll('table tr');
            rows.forEach(row => {
                let cells = row.querySelectorAll('th, td');
                cells.forEach(cell => {
                    if (cell.classList.contains('text-right')) {
                        cell.style.textAlign = 'right';
                    }
                });
            });

            // Finish loading the document
            printWindow.document.close();
        }
    </script>
@endsection

{{-- @extends('layouts.app')

@section('content')

<header class="shadow bg-gradient-to-b from-stone-100 to-white">
    <div class="lg:divide-y lg:divide-gray-200">
        <nav class="hidden lg:flex" aria-label="Global">
            <div
                class="bg-gradient-to-b from-stone-600 to-stone-500 ps-2.5 pe-4 py-1.5 text-sm text-stone-50 shadow-sm rounded-e-2xl">
                TEKLİFLER
            </div>
            <a href="{{ route('offers.index.create') }}" type="button"
                class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Yeni
                Oluştur</a>
        </nav>
    </div>
</header>

<div class="pb-24 mx-auto space-y-10 divide-y divide-gray-900/10 max-w-7xl">
    <div class="grid grid-cols-3 gap-x-8 gap-y-8 md:grid-cols-1">

        <div class="grid grid-cols-3 pt-5 gap-x-4 gap-y-4 md:grid-cols-1">

            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span class="text-4xl material-symbols-rounded text-stone-600">
                        article
                    </span>
                </div>
                <div class="flex-1 w-0 pb-1 pl-2">
                    <dl>
                        <dd>
                            <div class="text-2xl font-bold text-stone-600">TEKLİFLER</div>
                        </dd>
                    </dl>
                </div>
            </div>

            <div>
                <div class="overflow-hidden">
                    <div class="mx-auto max-w-7xl">
                        <div class="max-w-2xl mx-auto lg:mx-0 lg:max-w-none">
                            <div class="grid w-full grid-cols-1 text-left gap-y-10">
                                @foreach ($offers as $month => $days)
                                <div
                                    class="pb-6 overflow-hidden bg-white border shadow-sm md:rounded-xl border-stone-200">
                                    <div class="px-4 py-5 bg-white border-b border-gray-200 sm:px-6">
                                        <h3 class="text-xl font-bold text-gray-900">{{ $month }}</h3>
                                    </div>
                                    @foreach ($days as $day => $offers)
                                    <div class="px-4 pt-4 sm:px-6 sm:pt-6">
                                        <div class="p-2 font-semibold border rounded bg-stone-100 border-stone-200">
                                            <div>{{ $day }}</div>
                                        </div>
                                        @foreach ($offers as $offer)
                                        <div class="grid justify-between grid-cols-4">
                                            <div class="col-span-3 py-3 uppercase sm:col-span-2">
                                                <div class="flex items-center gap-x-2">
                                                    <div x-data="{ open: false }" class="relative">
                                                        <button @click="open = !open" type="button"
                                                            class="block p-1 -m-3 text-stone-400 hover:text-stone-500"
                                                            id="options-menu-0-button" aria-expanded="false"
                                                            aria-haspopup="true">
                                                            <span class="material-symbols-rounded">
                                                                more_vert
                                                            </span>
                                                        </button>
                                                        <div class="absolute left-4 top-6 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 ring-1 shadow-lg ring-stone-900/5 focus:outline-hidden"
                                                            role="menu" aria-orientation="vertical"
                                                            aria-labelledby="options-menu-0-button" tabindex="-1"
                                                            x-show="open" x-cloak
                                                            x-transition:enter="transition ease-out duration-300"
                                                            x-transition:enter-start="opacity-0 transform scale-95"
                                                            x-transition:enter-end="opacity-100 transform scale-100"
                                                            x-transition:leave="transition ease-in duration-200"
                                                            x-transition:leave-start="opacity-100 transform scale-100"
                                                            x-transition:leave-end="opacity-0 transform scale-95">
                                                            <a href="{{ route('offers.index.show', $offer->id) }}"
                                                                class="block px-3 py-1 transition-all text-sm/6 text-stone-900 hover:bg-stone-50"
                                                                role="menuitem" tabindex="-1"
                                                                id="options-menu-0-item-0">Görüntüle<span
                                                                    class="sr-only">, Tuple</span></a>
                                                        </div>
                                                    </div>
                                                    <div class="inline-flex items-center justify-center">
                                                        <span class="text-4xl material-symbols-rounded text-stone-400">
                                                            article
                                                        </span>
                                                    </div>
                                                    <div class="flex-auto">
                                                        <div class="font-bold truncate text-stone-900">{{ $offer->title
                                                            }}</div>
                                                        <div class="text-sm font-medium text-stone-700">
                                                            OF-{{ $offer->number }}</div>
                                                        <div class="text-stone-500">
                                                            @foreach ($offer->lines as $line)
                                                            <p class="text-xs italic">{{ $line->product_name }}
                                                                x{{ $line->quantity }}</p>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="hidden py-3 text-right md:block md:col-span-1">
                                                <div class="text-sm font-semibold text-stone-600">{{
                                                    $offer->company->name }}</div>
                                            </div>
                                            <div class="col-span-2 py-3 text-right sm:col-span-1">
                                                <div class="flex items-center gap-x-4">
                                                    <div class="flex-auto">
                                                        <div class="mt-1 text-xl font-semibold text-stone-600">
                                                            @if ($offer->currency != 'TRL')
                                                            <span>{{ number_format($offer->ex_total, 2, ',', '.')
                                                                }}<span class="pl-1 text-sm text-stone-400">{{
                                                                    $offer->currency }}</span></span>
                                                            @else
                                                            <span>{{ number_format($offer->trl_total, 2, ',', '.')
                                                                }}<span
                                                                    class="pl-1 text-sm text-stone-400">TRL</span></span>
                                                            @endif
                                                        </div>
                                                        <div class="mt-2">
                                                            @if ($offer->type == 'new' || $offer->type == 'edited')
                                                            <span
                                                                class="items-center rounded-md px-1.5 py-1 text-sm font-medium bg-amber-50 text-amber-500 ring-1 ring-inset ring-amber-300">
                                                                Taslak
                                                            </span>
                                                            @elseif($offer->type == 'send')
                                                            <span
                                                                class="items-center rounded-md px-1.5 py-1 text-sm font-medium bg-sky-50 text-sky-500 ring-1 ring-inset ring-sky-300">
                                                                Teklif gönderildi
                                                            </span>
                                                            @elseif($offer->type == 'accepted')
                                                            <span
                                                                class="items-center rounded-md px-1.5 py-1 text-sm font-medium bg-emerald-50 text-emerald-500 ring-1 ring-inset ring-emerald-300">
                                                                Kabul edildi
                                                            </span>
                                                            @elseif($offer->type == 'rejected')
                                                            <span
                                                                class="items-center rounded-md px-1.5 py-1 text-sm font-medium bg-rose-50 text-rose-500 ring-1 ring-inset ring-rose-300">
                                                                Reddedildi
                                                            </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="absolute bottom-0 w-screen h-px right-full bg-stone-100">
                                                </div>
                                                <div class="absolute bottom-0 left-0 w-screen h-px bg-stone-100"></div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    @endforeach
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

@endsection

@section('scripts')

@endsection
--}}