@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Taleplerim' => '/branch/requests',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="flex items-center justify-between pb-4">
            {{-- <div>
                <button
                    class="inline-flex items-center justify-between text-gray-600 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm px-3 py-1.5"
                    type="button" id="filterButton">
                    <i class="fa-solid fa-filter w-3 h-3 text-gray-500 mr-2.5"></i>
                    Filtreler
                    <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 4 4 4-4" />
                    </svg>
                </button>
                <!-- filter dropdown -->
                <div id="filterDropDown"
                    class="z-10 hidden w-48 bg-theme_secondary_white divide-y divide-gray-100 rounded-lg shadow absolute mt-2">
                    <ul class="p-3 space-y-1 text-sm text-gray-600">
                        <li>
                            <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                <button
                                    class="filter-button inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                    data-status="2">
                                    Tümü
                                </button>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                <button
                                    class="filter-button inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                    data-status="0">
                                    Talep Bekliyor
                                </button>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center p-2 rounded hover:bg-gray-200">
                                <button
                                    class="filter-button inline-flex justify-start w-full ml-2 text-sm cursor-pointer font-medium rounded"
                                    data-status="1">
                                    Talep Onaylandı
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div> --}}
            <h1 id="title" class="text-white font-bold text-2xl">
                {{ \Carbon\Carbon::now()->isoFormat('D MMMM Y') }} Tarihindeki Talepler
            </h1>
            <label for="search_demands" class="sr-only">Search</label>
            <div class="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-400" 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 text-gray-400 border border-gray-300 focus:outline-none rounded-lg w-80 bg-gray-50"
                    placeholder="Talep ara...">
            </div>
        </div>
        <div class="lg:grid lg:grid-cols-12 lg:gap-x-16">
            <ol
                class="officeList overflow-y-auto h-[calc(100vh-240px)] mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                @foreach ($tickets as $item)
                    <li data-status="{{ $item->status }}"
                        class="officeRow relative flex space-x-6 py-6 bg-theme_secondary_black rounded-3xl p-8 mt-4"
                        style="">
                        <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                            src="{{ getCdnFile(Auth::user()->branch->headOffice->office_logo) }}">
                        <a href="{{ route('branch.demandTrackingIndex', ['ticket_id' => $item->ticket_id]) }}"
                            class="w-full">
                            <div class="relative flex-auto">
                                <h3 class="pr-10 font-semibold xl:pr-0 text-gray-300 capitalize userFullName">
                                    {{ $item->user->user_departman->name }} <span class="text-xs pl-5">#{{ $item->ticket_id }}</span>
                                </h3>
                                <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                    <div data-popover-target-second="{{ $loop->iteration }}" data-popover-placement="right"
                                        class="flex items-center space-x-3">
                                        <dt class="flex items-center h-5 w-5 fill-gray-400">
                                            <i class="fa-solid fa-info-circle"></i>
                                        </dt>
                                        <div class="text-gray-300 capitalize">
                                            @if (count($item->demands) > 0)
                                                <div>
                                                    @php
                                                        $allDemandsQuantity = 0;
                                                        foreach ($item->demands as $demand) {
                                                            $quantity = $demand->quantity;
                                                            $allDemandsQuantity += $quantity;
                                                        }
                                                    @endphp
                                                    {{ $allDemandsQuantity }} Adet Çalışan Talep Ediliyor
                                                </div>
                                                <div popover-target-content="{{ $loop->iteration }}" role="tooltip"
                                                    class="absolute left-52 -top-2 z-[1000] invisible inline-block w-64 text-sm font-light text-gray-300 transition-opacity duration-300 bg-theme_black border border-gray-200 rounded-lg shadow-sm opacity-0">
                                                    <div class="flex flex-col gap-1 px-3 py-2 font-semibold">
                                                        @foreach ($item->demands as $demand)
                                                            <p class="bg-theme_secondary_black p-4 rounded-lg text-white">
                                                                {{ $demand->quantity . ' Adet ' . $demand->demandRole->title }}
                                                            </p>
                                                        @endforeach
                                                    </div>
                                                    <div data-popper-arrow></div>
                                                </div>
                                            @else
                                                Henüz Atama Yapılmamış
                                            @endif
                                        </div>
                                    </div>
                                    <div
                                        class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                        <dt class="flex items-center h-5 w-5 fill-gray-400">
                                            <i class="fa-solid fa-calendar"></i>
                                        </dt>
                                        <p class="text-gray-300 capitalize">
                                            {{ $item['date'] }}
                                        </p>
                                    </div>
                                    <div
                                        class="mt-2 flex items-center space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                        <dt class="flex items-center h-5 w-5 fill-gray-400">
                                            <i class="fa-solid fa-building"></i>
                                        </dt>
                                        <p class="text-gray-300 capitalize">
                                            {{ $item->department->name }}
                                        </p>
                                    </div>
                                </dl>
                            </div>
                        </a>
                        <div class="flex items-center text-gray-300 capitalize">
                            @php
                                $demand_status = '';
                                foreach ($item->demands as $demand) {
                                    if ($demand->demand_status == 3) {
                                        $demand_status = 3;
                                    } elseif ($demand->demand_status == 2) {
                                        $demand_status = 2;
                                    } elseif ($demand->demand_status == 1) {
                                        $demand_status = 1;
                                    } elseif ($demand->demand_status == 1 && $item->status == 1) {
                                        $demand_status = 4; // talep tamamlanmış
                                    } else {
                                        $demand_status = 0;
                                    }
                                }
                            @endphp
                            @php
                                if ($demand_status == 3) {
                                    $status = 'Şube onayı bekliyor';
                                    $color = 'bg-yellow-500';
                                } elseif ($demand_status == 2) {
                                    $status = 'Talep reddedildi';
                                    $color = 'bg-red-500';
                                } elseif ($demand_status == 1) {
                                    $status = 'Talep kabul edildi';
                                    $color = 'bg-green-500';
                                } elseif ($demand_status == 4) {
                                    $status = 'Talep tamamlandı';
                                    $color = 'bg-green-500';
                                } else {
                                    $status = 'Genel merkez onayı bekliyor';
                                    $color = 'bg-yellow-500';
                                }
                            @endphp
                            {{-- <p class="whitespace-nowrap text-sm mr-2">{{ $message }}</p> --}}
                            {{-- @php
                                if ($item->status == '0') {
                                    $status = 'Talep bekliyor';
                                    $color = 'bg-yellow-500';
                                } else {
                                    $status = 'Talep onaylandı';
                                    $color = 'bg-green-500';
                                }
                            @endphp --}}
                            {{-- <div class="relative flex items-center">
                                <span class="pl-4 whitespace-nowrap">{{ $status }}</span>
                                <span
                                    class="left-0 absolute inline-flex w-2 h-2 {{ $color }} animate-ping border-1 border-white rounded-full"></span>
                                <span
                                    class="left-0 absolute inline-flex w-2 h-2 {{ $color }}  border-white rounded-full"></span>
                                </div> --}}
                            @if ($demand_status != 3)
                                <div class="relative flex items-center mr-2">
                                    <span class="pl-4 whitespace-nowrap">{{ $status }}</span>
                                    <span
                                        class="left-0 absolute inline-flex w-2 h-2 {{ $color }} animate-ping border-1 border-white rounded-full"></span>
                                    <span
                                        class="left-0 absolute inline-flex w-2 h-2 {{ $color }}  border-white rounded-full"></span>
                                </div>
                            @endif
                            @if ($demand_status == 3)
                                @if ($demand_status != 0)
                                    <button value="{{ $item->ticket_id }}"
                                        class="mr-2 rejectButton inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-red-600">
                                        <i class="fa-solid fa-x"></i>
                                        Reddet
                                    </button>
                                @endif

                                @if ($demand_status != 0)
                                    <form method="POST" onsubmit="showLoading()"
                                        action="{{ route('branch.approveDepartmentRequest', [$item->ticket_id]) }}">
                                        @csrf
                                        <button
                                            class="inline-flex items-center px-2 py-1 rounded gap-2 font-medium text-white bg-green-600">
                                            <input type="hidden" name="ticket_id" value="{{ $item->ticket_id }}">
                                            <i class="fa-solid fa-check"></i>
                                            Onayla
                                        </button>
                                    </form>
                                @endif
                            @endif
                        </div>
                    </li>
                @endforeach
                @if (count($tickets) <= 0)
                    <x-noData>
                        <x-slot name="message">
                            Hiç Veri Bulunamadı
                        </x-slot>
                    </x-noData>
                @endif
            </ol>
            <div class="text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-4 xl:col-start-9">
                <div class="flex items-center text-gray-300">
                    {{-- <form action="" method="Get">
                        @csrf --}}
                    <button type="button" value="{{ $current_month->month - 1 }}" name="month"
                        class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 previous">
                        <span class="sr-only">Previous month</span>
                        <!-- Heroicon name: mini/chevron-left -->
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>
                    {{-- </form> --}}
                    <div class="flex-auto font-semibold">{{ $current_month->month_name }}</div>
                    {{-- <form action="" method="Get">
                        @csrf --}}
                    <button type="button" value="{{ $current_month->month + 1 }}" name="month"
                        class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 next">
                        <span class="sr-only">Next month</span>
                        <!-- Heroicon name: mini/chevron-right -->
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>
                    {{-- </form> --}}
                </div>
                <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-300">
                    <div>P</div>
                    <div>S</div>
                    <div>Ç</div>
                    <div>P</div>
                    <div>C</div>
                    <div>C</div>
                    <div>P</div>
                </div>
                <div class="isolate mt-2 grid grid-cols-7 gap-px  bg-gray-200 text-sm shadow ring-1 ring-gray-200">
                    @foreach ($allData as $data)
                        @php
                            $ticketDates = $allTickets
                                ->pluck('date')
                                ->map(function ($date) {
                                    return Carbon\Carbon::parse($date)->format('Y-m-d');
                                })
                                ->toArray();
                        @endphp
                        @if ($data->day == $current_day && $data->month == $current_month->month && $current_month->month == now()->format('m'))
                            {{-- bugun ise --}}
                            <button type="button"
                                class="data-button bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10"
                                value="{{ $data->date }}">
                                <time datetime="{{ $data->date }}"
                                    class="mx-auto flex h-7 w-7 items-center justify-center rounded-full font-semibold text-white {{ in_array($data->date, $ticketDates) ? 'bg-red-500' : 'bg-gray-900' }} ">{{ $data->day }}</time>
                            </button>
                        @else
                            <button type="button"
                                class="data-button bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10 group {{ in_array($data->date, $ticketDates) ? 'border-red-500' : '' }}"
                                value="{{ $data->date }}">
                                <time datetime="{{ $data->date }}"
                                    class="mx-auto flex h-7 w-7 items-center justify-center rounded-full group-hover:text-white {{ in_array($data->date, $ticketDates) ? 'bg-red-500 text-white' : 'group-hover:bg-gray-900' }} ">{{ $data->day }}</time>
                            </button>
                        @endif
                    @endforeach

                </div>
            </div>
        </div>
        <x-counter-div>
            <x-slot name="countedData">
                <span id="countedDatas">{{ count($tickets) }}</span>
            </x-slot>
        </x-counter-div>
    </div>
    <div class="rejectPopup hidden">
        <div
            class="fixed w-full flex items-center justify-center z-[200] top-0 left-0 p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:max-h-full">
            <div class="relative w-full max-w-md max-h-full">
                <div class="relative bg-theme_black rounded-lg shadow border border-gray-400">
                    <button type="button"
                        class="absolute closePopup top-3 right-2.5 text-gray-300 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                        data-modal-hide="popup-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <div class="p-6 text-center">
                        <svg class="mx-auto mb-4 text-gray-300 w-12 h-12 dark:text-gray-200" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                        <h3 class="mb-5 text-lg font-normal text-gray-300 capitalize">
                            Talep
                            reddedilecek onaylıyor
                            musunuz?
                        </h3>
                        <form action="{{ route('branch.rejectBranchDepartmentRequest') }}" method="POST"
                            onsubmit="showLoading()">
                            @csrf
                            <input class="ticketId" type="hidden" name="ticketId" value="">
                            <textarea class="input-2 resize-none w-full" name="note" rows="3"
                                placeholder="Reddetme nededinizi açıklayın." required></textarea>
                            <div class="flex justify-center items-center gap-4 mt-4">
                                <button type="button"
                                    class="closePopup inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-red-900 focus:ring-4 font-semibold bg-red-700">
                                    <i class="fa-solid fa-xmark"></i>
                                    Vazgeç
                                </button>
                                <button
                                    class="inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-green-900 focus:ring-4 font-semibold bg-green-700">
                                    <i class="fa-solid fa-check"></i>
                                    Onayla
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('#filterButton').click(function() {
            $('#filterDropDown').fadeToggle('slow');
        });

        // filtre
        document.getElementById('search_demands').addEventListener('input', function() {
            var searchText = this.value.toLowerCase();
            var tableRows = document.querySelectorAll('#demands_table tr');

            tableRows.forEach(function(row) {
                var rowData = row.textContent.toLowerCase();
                if (rowData.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });

        //filtre2
        $(document).ready(function() {
            // Filtre düğmelerine tıklama işlevi ekle
            $('.filter-button').click(function() {
                var status = $(this).data('status');
                filterTable(status);
            });

            function filterTable(status) {
                $('#demands_table tr').each(function() {
                    var rowData = $(this).data('status');
                    if (status === 2 || rowData === status) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
        });

        $('.rejectButton').click(function() {
            var ticketId = $(this).val();
            $('.ticketId').val(ticketId);
            $('.rejectPopup').show();
        });

        $('.closePopup').click(function() {
            $('.rejectPopup').hide();
        });

        $(document).ready(function() {
            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var title = $('#title');

            if (urlParams.has('date')) {
                var date = urlParams.get('date');

                $('#date').val(date);

                var dateObject = new Date(date);
                // Yeni tarih formatı oluşturma
                var formattedDate = new Intl.DateTimeFormat('tr-TR', {
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                }).format(dateObject);

                title.text(formattedDate + ' ' + 'Tarihindeki Talepler');
            } else {
                var today = new Date();
                var formattedToday = new Intl.DateTimeFormat('tr-TR', {
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                }).format(today);

                title.text(formattedToday + ' Tarihindeki Talepler');
            }
        });

        $('.previous').click(function() {
            var month = $(this).val();
            navigate('month=' + month);
        });

        $('.next').click(function() {
            var month = $(this).val();
            navigate('month=' + month);
        });

        $('.data-button').click(function() {
            var date = $(this).val();
            navigate('date=' + date);
        });

        function navigate(queryString) {
            var currentUrl = window.location.href;

            // Parametre adı kontrolü
            var paramName = queryString.split('=')[0];

            // Eğer aynı parametre adı varsa, mevcut parametreyi güncelle
            if (currentUrl.includes(paramName + '=')) {
                currentUrl = currentUrl.replace(new RegExp(paramName + '=[^&]+'), queryString);
            } else {
                // Parametre adı yoksa, yeni parametreyi ekleyin
                var separator = currentUrl.includes('?') ? '&' : '?';
                currentUrl = currentUrl + separator + queryString;
            }

            // Yeni URL'ye yönlendir
            window.location.href = currentUrl;
        }
    </script>
@endsection