@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Talep Oluştur' => '/company/new-request',
        ],
    ]) !!}
@endsection
@section('content')
    {{-- @include('components.sidebar') --}}
    {{-- @include('components.profile') --}}
    {{-- @include('components.links') --}} 
    <div class="container-app">
        <form action="{{ route('company.newRequest') }}" 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="relative">
                    <div data-popover-target-second="123" data-popover-placement="right">
                        <button type="button" class="inline-flex items-center gap-3 bg-blue-700 px-4 py-2 rounded-md text-white font-semibold">
                            <i class="fa-solid fa-info-circle"></i>
                           Yetkili Bilgileri
                        </button>
                    </div>
                    <div popover-target-content="123" role="tooltip"
                        class="absolute top-12 -right-4 z-20 invisible inline-block w-max text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
                        <div class="px-3 py-2 font-semibold">
                            <p class="whitespace-nowrap">
                                Ad: {{ $operationUser->full_name }}
                            </p>
                            <p class="whitespace-nowrap">
                                E-Posta: {{ $operationUser->email }}
                            </p>
                            <p class="whitespace-nowrap">
                                Telefon: {{ $operationUser->tel }}
                            </p>
                        </div>
                        <div data-popper-arrow></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 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>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <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 (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