@extends('layouts.app')
@section('urlContent')
{!! view('components.breadcrumbs', [
'b_items' => [
'Tekliflerim' => '/root/offers',
],
]) !!}
@endsection
@section('content')
{{-- @include('components.sidebar') --}}
{{-- @include('components.profile') --}}
@if ($errors->any())
@include('components.error-modal-second')
@endif
@if (session('error'))
@include('components.error-modal')
@endif
@if (session('success'))
@include('components.success-modal')
@endif
<div class="container-app">
    <div class="flex gap-8 justify-between mt-4">
        <div class="flex gap-[2px] font-bold text-xs">
            <button id="pending" data-status="2"
                class="filter-links uppercase hover:bg-theme_secondary_black bg-teheme_third_gray rounded-l-md text-gray-300 px-3 py-2 transition-colors duration-100 delay-75">
                Cevap Beklenenler
            </button>
            <button id="positive" data-status="1"
                class="filter-links uppercase hover:bg-theme_secondary_black bg-teheme_third_gray text-gray-300 px-3 py-2 transition-colors duration-100 delay-75">
                Onaylananlar
            </button>
            <button id="negative" data-status="0"
                class="filter-links uppercase hover:bg-theme_secondary_black bg-teheme_third_gray text-gray-300 px-3 py-2 transition-colors duration-100 delay-75">
                Reddedilenler
            </button>
            <button id="all" data-status="3"
                class="filter-links uppercase hover:bg-theme_secondary_black bg-teheme_third_gray rounded-r-md text-gray-300 px-3 py-2 transition-colors duration-100 delay-75">
                Tümü
            </button>
        </div>

        <div class="2xl:w-1/3 3xl:w-[calc(100vh-200px)] relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-300" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                        clip-rule="evenodd"></path>
                </svg>
            </div>
            <input type="text" id="search_demands"
                class="block p-2 pl-10 text-sm w-full text-gray-300 focus:outline-none focus:ring-0 rounded-md bg-teheme_third_gray placeholder:text-gray-300"
                placeholder="Ara...">
        </div>
        <a href="{{ route('admin.offer.create') }}"
            class="inline-flex items-center uppercase font-bold text-xs hover:bg-theme_secondary_black bg-teheme_third_gray rounded-md text-gray-300 px-3 py-2 transition-colors duration-100 delay-75">
            Yeni Teklif Oluştur
        </a>
    </div>
    <div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-8">
        <table class="w-full text-sm text-left text-gray-400">
            <thead class="text-xs text-theme_white uppercase bg-theme_black">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        Teklif Açıklaması
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Firma
                    </th>
                    <th scope="col" class="px-6 py-3 text-center">
                        Fatura
                    </th>
                    <th scope="col" class="px-6 py-3 text-center">
                        Teklif Bitiş Tarihi
                    </th>
                    <th scope="col" class="px-6 py-3 text-center">
                        Teklif Toplamı
                    </th>
                    <th scope="col" class="px-6 py-3 w-12 text-center">
                        Görüntüle
                    </th>
                    <th scope="col" class="px-6 py-3 w-12 text-center">
                        Sil
                    </th>
                </tr>
            </thead>
            <tbody id="offers_list">
                @foreach ($offers as $offer)
                <tr data-status="{{ $offer->status }}"
                    class="border-t bg-theme_secondary_black hover:bg-teheme_third_black">
                    <th scope="row" class="px-6 py-4 font-medium text-gray-200 whitespace-nowrap">
                        {{ $offer->offer_description }}
                    </th>
                    <td class="px-6 py-4">
                        {{ $offer->headOffice->office_name }}
                    </td>
                    <td class="px-6 py-4 text-center">
                        @php
                        if ($offer->status == 0) {
                        $statusText = 'Reddedildi';
                        } elseif ($offer->status == 1) {
                        $statusText = 'Onaylandı';
                        } elseif ($offer->status == 2) {
                        $statusText = 'Onay Bekliyor';
                        }
                        @endphp
                        {{ $statusText }}
                    </td>

                    <td class="px-6 py-4 text-center">
                        {{ \Carbon\Carbon::parse($offer->end_date)->isoFormat('D MMMM Y') }}
                    </td>
                    <td class="px-6 py-4 text-center">
                        {{ $offer->total }}
                    </td>
                    <td class="px-6 py-4 text-center">
                        <a href="{{ route('admin.offer.show', $offer->id) }}"
                            class="font-medium text-white bg-blue-700 p-2 rounded hover:underline">
                            <i class="fa-solid fa-eye"></i>
                        </a>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <form action="{{ route('root.deleteOffer', [$offer->id]) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="font-medium text-white bg-red-700 p-2 rounded hover:underline">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('javascript')
<script>
    $('#all').click(function() {
            $('#all').addClass('bg-theme_secondary_black');
            $('#positive').removeClass('bg-theme_secondary_black');
            $('#negative').removeClass('bg-theme_secondary_black');
            $('#pending').removeClass('bg-theme_secondary_black');
        });
        $('#positive').click(function() {
            $('#all').removeClass('bg-theme_secondary_black');
            $('#positive').addClass('bg-theme_secondary_black');
            $('#negative').removeClass('bg-theme_secondary_black');
            $('#pending').removeClass('bg-theme_secondary_black');
        });
        $('#negative').click(function() {
            $('#all').removeClass('bg-theme_secondary_black');
            $('#positive').removeClass('bg-theme_secondary_black');
            $('#negative').addClass('bg-theme_secondary_black');
            $('#pending').removeClass('bg-theme_secondary_black');
        });
        $('#pending').click(function() {
            $('#all').removeClass('bg-theme_secondary_black');
            $('#positive').removeClass('bg-theme_secondary_black');
            $('#negative').removeClass('bg-theme_secondary_black');
            $('#pending').addClass('bg-theme_secondary_black');
        });

        $(document).ready(function() {
            $('.filter-links').click(function() {
                var status = $(this).data('status');
                console.log(this);
                filterTable(status);
            });

            function filterTable(status) {
                $('#offers_list tr').each(function() {
                    var rowData = $(this).data('status');
                    if (status === 3 || rowData === status) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
        });
</script>
@endsection