@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'İmza Föyü İşlemleri' => '/accounting/signature-sheet/index',
            'Ekle' => '/accounting/signature-sheet/create',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <form action="{{ route('accounting.signatureSheetCreatePost') }}" method="POST" onsubmit="showLoading()"
            enctype="multipart/form-data" class="mt-4">
            @csrf
            <x-common.card>
                <x-slot name="title">İmza föyü ekleyin</x-slot>
                <x-slot name="body">
                    <div class="form_cols_2">

                        <div class="py-2 flex flex-col justify-end">
                            <span class="mb-2 text-lg text-theme_white">Firma</span>
                            <select class="input-2" name="head_office_id" id="office">
                                <option selected disabled>Firma Seçiniz</option>
                                @foreach ($headOffices as $headOffice)
                                    <option value="{{ $headOffice->id }}">
                                        {{ $headOffice->office_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="py-2 flex flex-col justify-end">
                            <span class="mb-2 text-lg text-theme_white">Şube</span>
                            <select class="input-2" name="branch_office_id" id="branch">
                            </select>
                        </div>

                        <div class="py-2 flex flex-col justify-end">
                            <span class="mb-2 text-lg text-theme_white">Departman</span>
                            <select class="input-2" name="department_id" id="department">
                            </select>
                        </div>

                        <div class="py-2 flex flex-col justify-end">
                            <span class="mb-2 text-lg text-theme_white">Föy Dosyası</span>
                            <input class="input-2 file-input mt-0 p-2.5 border border-[#6b7280]" type="file" name="file"
                                value="{{ old('file') }}">
                        </div>

                        <div class="py-2 flex flex-col">
                            <span class="mb-2 text-lg text-theme_white">Açıklama</span>
                            <input type="text" class="input-2" name="description" value="{{ old('description') }}" />
                        </div>

                        <div class="py-2 flex flex-col justify-end">
                            <span class="mb-2 text-lg text-theme_white">Tarih</span>
                            <input type="date" class="input-2" name="date" value="{{ old('date') }}" />
                        </div>

                        <div class="flex items-end justify-end col-span-2">
                            <button type="submit" class="button-3">
                                Kaydet
                                <i class="fa-solid fa-save"></i>
                            </button>
                        </div>
                    </div>
                </x-slot>
            </x-common.card>
        </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>
        let department = $('#department');
        let office = $('#office');
        let branch = $('#branch');

        function updateDepart(select, data) {
            data.forEach(item => {
                var option = $('<option>', {
                    value: item.id,
                    text: item.name
                });
                select.append(option);
            });
            select.trigger('change');
        }

        function updateBranch(select, data) {
            select.empty();
            var defaultOption = $('<option>', {
                value: '',
                text: 'Şube Seç',
                selected: true,
                disabled: true
            });
            select.append(defaultOption);
            data.forEach(item => {
                var option = $('<option>', {
                    value: item.id,
                    text: item.branch_name
                });
                select.append(option);
            });
        }

        office.change(function() {
            var office = $(this).val();

            $.ajax({
                type: "GET",
                url: "/get/departments/for/company/or/branches",
                data: {
                    headOfficeId: office
                },
                success: function(response) {
                    department.empty();
                    branch.empty();

                    if (response.branches && response.branches.length > 0) {
                        updateBranch(branch, response.branches);
                    }
                    if (response.departments && response.departments.length > 0) {
                        updateDepart(department, response.departments);
                    }

                    department.trigger('change');
                },
            });
        });

        branch.change(function() {
            var office = $(this).val();

            $.ajax({
                type: "GET",
                url: "/get/departments/for/company/or/branches",
                data: {
                    branchId: office
                },
                success: function(response) {
                    department.empty();

                    if (response.departments && response.departments.length > 0) {
                        updateDepart(department, response.departments);
                    }
                },
            });
        });
    </script>
@endsection