@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Hızlı Talep Tipleri' => '/operation/quick/demand/change/ticket-type',

            'Aylık Hızlı Talep' => '/operation/quick/monthly/demand',

            $department->name . ' Talepleri' => '/operation/monthly/department/' . $department->id . '/tickets',

            'Talep Detayı' => '/operation/monthly/department/' . $department->id . '/tickets/' . $ticket->id,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <form id="deleteForm" method="POST" action="{{ route('operation.deleteRequest', ['param' => 'monthly']) }}">
            @csrf
            <input type="hidden" name="demandId" id="demandId">
        </form>
        <form action="{{ route('operation.newRequest') }}" method="POST" onsubmit="showLoading()">
            @csrf
            <input type="hidden" name="department" value="{{ $department->user_id }}">
            <div class="flex justify-between">
                <div class="flex items-end gap-4">
                    <input type="date" name="start_date"
                        class="rounded-lg h-[40px] bg-theme_secondary_black border-none text-theme_white"
                        value="{{ Carbon\Carbon::parse($ticket->date)->format('Y-m-d') }}">
                    <select name="end_date" id=""
                        class="rounded-lg h-[40px] bg-theme_secondary_black border-none text-theme_white">
                        @php
                            use Carbon\Carbon;
                            $startDate = Carbon::parse($ticket->date);
                            $endDate = Carbon::parse($ticket->end_date);
                            $date = $startDate->diffInMonths($endDate);
                        @endphp
                        @for ($i = 1; $i <= 12; $i++)
                            <option value="{{ $i }}"
                                @if ($date == $i) @selected(true) @endif>{{ $i }}
                                Aylık</option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg border-t border-theme_secondary_black mt-4">
                <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">
                                Kategori
                            </th>
                            <th scope="col" class="px-6 py-3 text-center">
                                Adet
                            </th>
                            <th scope="col" class="px-6 py-3 text-center">
                                Saat
                            </th>
                            <th scope="col" class="px-6 py-3 text-center">
                                Not Ekle
                            </th>
                            <th scope="col" class="px-6 py-3 text-center w-12">
                                Sil
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($demands as $demand)
                            <input type="hidden" name="ticket" value="{{ $ticket->id }}">
                            <input type="hidden" name="user_id" value="{{ $department->user->id }}">
                            <tr data-id="1" class=" bg-theme_secondary_black hover:bg-teheme_third_black">
                                <td class="px-6 py-4 font-semibold text-theme_white">
                                    <select name="category[]"
                                        class="w-56 bg-gray-300 border border-gray-300 text-gray-600 text-sm rounded-lg">
                                        <option selected disabled>Çalışan Seç</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category['id'] }}"
                                                @if ($demand->category == $category['id']) @selected(true) @endif>
                                                {{ $category['title'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="flex items-center justify-center gap-2">
                                        <button
                                            class="decrement inline-flex items-center justify-center p-1 text-sm font-medium h-6 w-6 text-gray-600 bg-gray-300 border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-gray-300"
                                            type="button">
                                            <span class="sr-only">Azalt</span>
                                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                                fill="none" viewBox="0 0 18 2">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M1 1h16" />
                                            </svg>
                                        </button>
                                        <div>
                                            <input type="number" placeholder="1" value="{{ $demand->quantity }}"
                                                name="quantity[]"
                                                class="quantity bg-gray-300 text-center w-14 border border-gray-300 text-gray-600 text-sm rounded-lg">
                                        </div>
                                        <button
                                            class="increment inline-flex items-center justify-center h-6 w-6 p-1 text-sm font-medium text-gray-600 bg-gray-300 border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-gray-300"
                                            type="button">
                                            <span class="sr-only">Artır</span>
                                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                                fill="none" viewBox="0 0 18 18">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                    stroke-width="2" d="M9 1v16M1 9h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                                <td class="px-6 py-4 font-semibold text-center">
                                    <select name="hour[]"
                                        class="w-32 bg-gray-300 border border-gray-300 text-gray-600 text-sm rounded-lg">
                                        <option selected disabled>Saat Seç</option>
                                        @for ($i = 0; $i < count($hours); $i++)
                                            <option value="{{ $hours[$i] }}"
                                                @if ($demand->hour == $hours[$i]) @selected(true) @endif>
                                                {{ $hours[$i] }}
                                            </option>
                                        @endfor
                                    </select>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <textarea type="text" name="note[]" class="h-8 text-sm text-teheme_third_white rounded-md bg-theme_secondary_black">
                                        {{ $demand->note }}
                                    </textarea>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <button class="deleteDemandButton font-medium text-red-600 hover:underline"
                                        value="{{ $demand->id }}" type="button">Sil</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="flex justify-center gap-4 mt-8">
                <button type="button" id="addButton"
                    class="inline-flex items-center gap-3 bg-blue-700 px-4 py-2 rounded-md text-white font-semibold">
                    <i class="fa-sharp fa-solid fa-plus"></i>
                    Yeni Satır
                </button>
                <button type="submit"
                    class="inline-flex items-center gap-3 bg-green-700 px-4 py-2 rounded-md text-white font-semibold">
                    <i class="fa-regular fa-paper-plane"></i>
                    Gönder
                </button>
            </div>
        </form>
    </div>
    @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
@endsection
@section('javascript')
    <script>
        $('.deleteDemandButton').click(function() {
            var demandId = $(this).val();
            $('#demandId').val(demandId);
            $('#deleteForm').submit();
        });

        $(document).ready(function() {
            var categories = @json($categories);
            var hours = @json($hours);
            var nextDataId = 2;
            $('#addButton').click(function() {
                var newRow = `
            <tr data-id="${nextDataId}" class="bg-theme_secondary_black hover:bg-teheme_third_black" style="display: none;">
                <td class="px-6 py-4 font-semibold text-theme_white">
                    <select name="category[]" class="bg-gray-300 border border-gray-300 text-gray-600 text-sm rounded-lg">
                        <option selected disabled>Çalışan Seç</option>
                        ${categories.map(cat => `<option value="${cat.id}">${cat.title}</option>`).join('')}
                    </select>
                </td>
                <td class="px-2 py-4 text-center">
                    <div class="flex items-center justify-center gap-2">
                        <button class="decrement inline-flex items-center justify-center p-1 text-sm font-medium h-6 w-6 text-gray-600 bg-gray-300 border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-gray-300" type="button">
                            <span class="sr-only">Azalt</span>
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
                            </svg>
                        </button>
                        <div>
                            <input type="number" placeholder="1" value="1" name="quantity[]" class="quantity bg-gray-300 text-center w-14 border border-gray-300 text-gray-600 text-sm rounded-lg">
                        </div>
                        <button class="increment inline-flex items-center justify-center h-6 w-6 p-1 text-sm font-medium text-gray-600 bg-gray-300 border border-gray-300 rounded-full focus:outline-none hover:bg-gray-100 focus:ring-gray-300" type="button">
                            <span class="sr-only">Artır</span>
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
                            </svg>
                        </button>
                    </div>
                </td>
                <td class="px-2 py-4 font-semibold text-center">
                    <select name="hour[]" class="bg-gray-300 border border-gray-300 text-gray-600 text-sm rounded-lg">
                        <option selected disabled>Saat Seç</option>
                        ${hours.map(hour => `<option value="${hour}">${hour}</option>`).join('')}
                    </select>
                </td>
                <td class="px-1 py-4 text-center">
                    <textarea type="text" name="note[]"
                    class="w-full h-8 text-sm text-teheme_third_white rounded-md bg-theme_secondary_black"></textarea>
                </td>
                <td class="px-2 py-4 text-center">
                    <a href="#" class="delete font-medium text-red-600 dark:text-red-500 hover:underline">Sil</a>
                </td>
            </tr>`;

                nextDataId++;
                $('tbody').append(newRow);
                $('tbody tr:last').fadeIn(500);
            });


            // satir sil
            $('table').on('click', '.delete', function() {
                $(this).closest('tr').fadeOut(500);
            });
            // adet arttir azalt
            let currentValue = 1;
            let input;

            $(document).on('click', '.increment', function() {
                input = $(this).closest('.flex').find('.quantity');
                currentValue = parseInt(input.val());
                input.val(currentValue + 1);
            });

            $(document).on('click', '.decrement', function() {
                input = $(this).closest('.flex').find('.quantity');
                currentValue = parseInt(input.val());
                if (currentValue > 1) {
                    input.val(currentValue - 1);
                }
            });
        });
    </script>
@endsection