@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Personel İzinleri' => '/department/day-off/index',
            'Detay' => '/department/day-off/detail/' . $user->id,
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="lg:grid lg:grid-cols-12 lg:gap-x-16 ">
            <div class="mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9">
                <div class="flex items-center text-gray-300">
                    <form action="" method="Get" onsubmit="showLoading()">
                        @csrf
                        <button type="submit" 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>
                            <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" onsubmit="showLoading()">
                        @csrf
                        <button type="submit" 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>
                            <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)
                        @if ($data->day == $current_day && $data->month == $current_month->month && $current_month->month == now()->format('m'))
                            <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 {{ in_array($data->date, $dayOffs) ? 'bg-red-500' : 'bg-gray-900' }}  font-semibold text-white">{{ $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, $dayOffs) ? '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, $dayOffs) ? 'bg-red-500 text-white' : 'group-hover:bg-gray-900' }} ">{{ $data->day }}</time>
                            </button>
                        @endif
                    @endforeach
                </div>
            </div>
            <input type="hidden" id="day_off_input">
            <ol class="mt-10 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                <form method="POST" action="{{ route('department.createDayOffPersonel') }}" onsubmit="showLoading()">
                    @csrf
                    <div class="flex flex-col justify-end">
                        <input id="personel_user_id" type="hidden" name="personel_user_id" value="{{ $user->id }}">
                        <div class="flex justify-end pb-6 gap-3">
                            <select class="input-2 pl-2 pr-8" name="day_off_type" id="day_off_type">
                                <option value="disabled" selected disabled>İzin Tipi Seçiniz</option>
                                <option value="0">Ücretsiz İzin</option>
                                <option value="1">Haftalık İzin</option>
                                <option value="2">Raporlu İzin</option>
                            </select>
                            <input name="day_off_start_day" type="date" class="input-2" value="{{ date('Y-m-d') }}">
                        </div>
                        <textarea name="day_off_reason" placeholder="İzin nedeni" class="input-2 resize-none px-6 py-4" required rows="10"></textarea>
                        <div class="flex justify-end gap-6 mt-4">
                            <button id="deleteButton" type="button" class="hidden button-3 bg-red-800 px-6">Sil</button>
                            <button id="saveButton" class="button-3 px-6">Kaydet</button>
                        </div>
                    </div>
                </form>
            </ol>
        </div>
    </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>
        let dayOffInput = $('#day_off_input');
        $('.data-button').click(function() {
            var date = $(this).val();
            var personelUserId = $('#personel_user_id').val();
            var textarea = $('textarea');
            var dayOffType = $('#day_off_type');

            $.ajax({
                type: "GET",
                url: '/department/off-day/info/user/' + personelUserId + '/date/' + date + '',
                data: {
                    userId: personelUserId,
                    date: date,
                },
                dataType: "JSON",
                success: function(response) {
                    textarea.empty();
                    dayOffInput.empty();
                    dayOffInput.val(response.id);
                    textarea.text(response.day_off_reason);
                    if (response.day_off_type != undefined) {
                        $('#day_off_type').val(response.day_off_type);
                    } else {
                        $('#day_off_type').val('disabled');
                    }
                    if (jQuery.isEmptyObject(response)) {
                        $('#saveButton').show();
                        $('#deleteButton').hide();
                    } else {
                        $('#saveButton').hide();
                        $('#deleteButton').show();
                    }
                },
            });
        });

        $('#deleteButton').click(function() {
            var dayOff = dayOffInput.val();
            $.ajax({
                method: "GET",
                url: '/department/delete/dayOff/' + dayOff,
                success: function(response) {
                    console.log(response);
                    location.reload();
                },
                error: function(response) {
                    console.log(response);
                }
            });
        });
    </script>
@endsection