@extends('layouts.app')

@section('content')
    {{-- @include('components.sidebar') --}}
    {{-- @include('components.profile') --}}
    {{-- @include('components.links') --}}
    <div class="container-app">
        <form action="{{ route('customer.createDemand') }}" method="POST" onsubmit="showLoading()">
            @csrf
            <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="{{ date('Y-m-d') }}">
                    <input type="date" name="end_date"
                        class="rounded-lg bg-theme_secondary_black border-none text-theme_white"
                        value="{{ date('Y-m-d', strtotime('+1 day')) }}">
                </div>
                {{-- <div class="notArea backdrop-filter backdrop-brightness-[.2] fixed top-0 left-0 w-full h-full z-50 hidden">
                    <input type="hidden" id="trId">
                    <div class="flex justify-center items-center w-full h-full">
                        <div
                            class="flex flex-col items-center justify-center gap-4 px-10 py-5 rounded-lg bg-theme_black text-white">
                            <h1 class="font-semibold text-xl text-left w-full">
                                Notunuzu Giriniz
                            </h1>
                            <textarea class="rounded-lg w-96 h-36 resize-none bg-teheme_third_black"></textarea>
                            <div class="flex justify-end gap-4 w-full">
                                <button type="button" id="discard"
                                    class="inline-flex items-center gap-3 bg-red-700 px-4 py-2 rounded-md text-white font-semibold">
                                    <i class="fa-solid fa-xmark"></i>
                                    Vazgeç
                                </button>
                                <button type="button" id="saveNote"
                                    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-floppy-disk"></i>
                                    Kaydet
                                </button>
                            </div>
                        </div>
                    </div>
                </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>
                        <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                        {{-- <input type="hidden" name="ticket_id" value="{{ $data['ticket_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 ($data['category'] as $category)
                                        <option value="{{ $category['id'] }}">{{ $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="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-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($data['hours']); $i++)
                                        <option value="{{ $data['hours'][$i] }}">{{ $data['hours'][$i] }}</option>
                                    @endfor
                                </select>
                            </td>
                            {{-- <td class="px-6 py-4">
                                <input type="hidden" name="noteContent" id="noteContent">
                                <button type="button"
                                    class="inline-flex openPopUp h-[40px] items-center gap-3 bg-blue-700 px-4 py-2 rounded-md text-white font-semibold">
                                    <i class="fa-solid fa-note-sticky"></i>
                                </button>
                            </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"></textarea>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Sil</a>
                            </td>
                        </tr>
                    </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 src="{{ asset('js/new-request.js') }}"></script>
@endsection