@extends('layouts.app')

@section('content')

<div class="">
    <main>

        <div class="px-4 py-4 mx-auto sm:px-6 lg:px-8">

            {{--BREADCRUMB--}}
            <nav class="flex pb-4" aria-label="Breadcrumb">
                <ol role="list" class="flex items-center space-x-4 uppercase">
                    <li>
                        <div>
                            <a href="{{ route('dashboard') }}" class="text-stone-400 hover:text-stone-500">
                                <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                        clip-rule="evenodd" />
                                </svg>
                                <span class="sr-only">Home</span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                                aria-hidden="true">
                                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                            </svg>
                            <a href="{{ route('companies.index') }}"
                                class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">HESAPLAR</a>
                        </div>
                    </li>
                    @if ($company != null)
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                                aria-hidden="true">
                                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                            </svg>
                            <a href="{{ route('companies.show', $company->slug) }}"
                                class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700"
                                aria-current="page">{{ $company->name }}</a>
                        </div>
                    </li>
                    @endif
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                                aria-hidden="true">
                                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                            </svg>
                            <div class="ml-4 text-sm font-medium text-stone-500" aria-current="page">
                                {{ isset($transaction) ?
                                ($type == 'received' ? 'TAHSİLAT DÜZENLE' : 'ÖDEME DÜZENLE') :
                                ($type == 'received' ? 'TAHSİLAT OLUŞTUR' : 'ÖDEME OLUŞTUR')
                                }}
                            </div>
                        </div>
                    </li>
                </ol>
            </nav>

            <div
                class="grid items-start grid-cols-1 grid-rows-1 mx-auto gap-x-8 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">

                <!--SIDEBAR-->
                @if ($company != null)
                <div class="lg:col-start-3 lg:row-end-1">
                    <h2 class="sr-only">Özet</h2>
                    <div class="bg-white rounded-lg shadow-sm ring-1 ring-stone-300">
                        <dl class="flex flex-wrap">
                            <div class="flex-auto p-6">
                                <dt class="text-lg font-semibold text-stone-900">İŞLETME BİLGİLERİ</dt>
                                <dd class="grid gap-1 mt-2 text-left text-stone-500 justify-items-start">
                                    <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                        <label for="date"
                                            class="block text-sm font-medium leading-6 text-stone-500">İŞLETME
                                            ADI</label>
                                        <span>{{ $company->name }}</span>
                                    </div>
                                    <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                        <label for="date"
                                            class="block text-sm font-medium leading-6 text-stone-500">BAKİYE</label>
                                        <span>{{ number_format($company->getCompanyBalance(), 2, ',', '.') }}</span>
                                    </div>
                                </dd>
                            </div>
                        </dl>
                    </div>
                </div>
                @endif

                <!--FORM-->
                <form
                    action="{{ isset($transaction) ? route('transactions.update', $transaction) : route('transactions.store') }}"
                    method="POST" enctype="multipart/form-data"
                    class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                    @csrf
                    @if(isset($transaction))
                    @method('PATCH')
                    @endif

                    <div class="p-8">
                        {{--CONTENT--}}
                        @include('partials.receipt-header')

                        <div class="mt-3 sm:mt-4">
                            <div
                                x-data="{ selected: '{{ old('payment_type', isset($transaction) ? $transaction->payment_type : 'bank_transfer') }}' }">

                                <div class="w-1/2 mt-4">
                                    @if ($company != null)
                                    <input type="text" hidden="" name="company_id" value="{{ $company->id }}">
                                    @else
                                    <div class="col-span-2">
                                        <label for="company_id"
                                            class="block text-sm leading-6 text-stone-500">İŞLETME</label>
                                        <select id="company_id" name="company_id"
                                            class="mt-1 block w-full bg-stone-50 rounded-md border-0 py-1.5 pl-3 pr-10 text-stone-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-stone-600 sm:text-sm sm:leading-6">
                                            @foreach($companies_all as $item)
                                            <option value="{{ $item->id }}" {{ (isset($transaction) && $transaction->
                                                company_id == $item->id) ? 'selected' : '' }}>
                                                {{ $item->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @endif
                                </div>

                                {{--İLETİŞİM YÖNTEMİ--}}
                                <div class="w-3/4 mt-4">
                                    <fieldset>
                                        <legend class="text-sm/6 text-stone-500">ÖDEME ŞEKLİ
                                        </legend>
                                        <div class="grid grid-cols-2 mt-2 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
                                            <label aria-label="bank_transfer"
                                                aria-description="Last message sent an hour ago to 621 users"
                                                class="relative flex p-4 bg-white border rounded-lg shadow-xs cursor-pointer focus:outline-hidden"
                                                :class="{ 'border-stone-600 ring-2 ring-stone-600': selected === 'bank_transfer', 'border-gray-300': selected !== 'bank_transfer' }">
                                                <input type="radio" name="payment_type" value="bank_transfer"
                                                    class="sr-only" x-model="selected">
                                                <span class="flex flex-1">
                                                    <span class="flex flex-col">
                                                        <span
                                                            class="mt-2 text-3xl material-symbols-rounded text-stone-700">
                                                            payments
                                                        </span>
                                                        <span
                                                            class="block text-sm font-medium text-stone-700">HAVALE/EFT</span>
                                                    </span>
                                                </span>
                                                <svg class="text-teal-600 size-5" viewBox="0 0 20 20"
                                                    fill="currentColor" aria-hidden="true"
                                                    x-show="selected === 'bank_transfer'">
                                                    <path fill-rule="evenodd"
                                                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                                <span class="absolute border-2 rounded-lg pointer-events-none -inset-px"
                                                    aria-hidden="true"
                                                    :class="{ 'border-stone-600': selected === 'bank_transfer', 'border-transparent': selected !== 'bank_transfer' }"></span>
                                            </label>
                                            <label aria-label="credit_card"
                                                aria-description="Last message sent an hour ago to 621 users"
                                                class="relative flex p-4 bg-white border rounded-lg shadow-xs cursor-pointer focus:outline-hidden"
                                                :class="{ 'border-stone-600 ring-2 ring-stone-600': selected === 'credit_card', 'border-gray-300': selected !== 'credit_card' }">
                                                <input type="radio" name="payment_type" value="credit_card"
                                                    class="sr-only" x-model="selected">
                                                <span class="flex flex-1">
                                                    <span class="flex flex-col">
                                                        <span
                                                            class="mt-2 text-3xl material-symbols-rounded text-stone-700">
                                                            credit_card
                                                        </span>
                                                        <span class="block text-sm font-medium text-stone-700">KREDİ
                                                            KARTI</span>
                                                    </span>
                                                </span>
                                                <svg class="text-teal-600 size-5" viewBox="0 0 20 20"
                                                    fill="currentColor" aria-hidden="true"
                                                    x-show="selected === 'credit_card'">
                                                    <path fill-rule="evenodd"
                                                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                                <span class="absolute border-2 rounded-lg pointer-events-none -inset-px"
                                                    aria-hidden="true"
                                                    :class="{ 'border-stone-600': selected === 'credit_card', 'border-transparent': selected !== 'credit_card' }"></span>
                                            </label>
                                            <label aria-label="check"
                                                aria-description="Last message sent an hour ago to 621 users"
                                                class="relative flex p-4 bg-white border rounded-lg shadow-xs cursor-pointer focus:outline-hidden"
                                                :class="{ 'border-stone-600 ring-2 ring-stone-600': selected === 'check', 'border-gray-300': selected !== 'check' }">
                                                <input type="radio" name="payment_type" value="check" class="sr-only"
                                                    x-model="selected">
                                                <span class="flex flex-1">
                                                    <span class="flex flex-col">
                                                        <span
                                                            class="mt-2 text-3xl material-symbols-rounded text-stone-700">
                                                            checkbook
                                                        </span>
                                                        <span
                                                            class="block text-sm font-medium text-stone-700">ÇEK</span>
                                                    </span>
                                                </span>
                                                <svg class="text-teal-600 size-5" viewBox="0 0 20 20"
                                                    fill="currentColor" aria-hidden="true"
                                                    x-show="selected === 'check'">
                                                    <path fill-rule="evenodd"
                                                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                                <span class="absolute border-2 rounded-lg pointer-events-none -inset-px"
                                                    aria-hidden="true"
                                                    :class="{ 'border-stone-600': selected === 'check', 'border-transparent': selected !== 'check' }"></span>
                                            </label>
                                        </div>
                                    </fieldset>
                                </div>

                                <div class="w-1/2 mt-4">
                                    <div class="col-span-2">
                                        <label for="bank_id" class="block text-sm leading-6 text-stone-500">ÖDEME
                                            YÖNTEMİ</label>
                                        <select id="bank_id" name="bank_id"
                                            class="mt-1 block w-full bg-stone-50 rounded-md border-0 py-1.5 pl-3 pr-10 text-stone-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-stone-600 sm:text-sm sm:leading-6">
                                            @foreach($bank_accounts as $bank)
                                            <option value="{{ $bank->id }}" {{ (isset($transaction) && $transaction->
                                                bank_id == $bank->id) ? 'selected' : '' }}>
                                                {{ $bank->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="grid grid-cols-6 gap-4 py-6 -space-y-px isolate">

                                    <div class="col-span-2">
                                        <label for="date" class="block text-sm leading-6 text-stone-500">İŞLEM
                                            TARİHİ</label>
                                        <div class="mt-1">
                                            <input type="date" name="date" id="date"
                                                class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                value="{{ old('date', isset($transaction) ? $transaction->date->format('Y-m-d') : \Carbon\Carbon::now()->format('Y-m-d')) }}">
                                        </div>
                                    </div>

                                    <div class="grid items-center grid-cols-6 col-span-6 gap-4">
                                        <div class="col-span-4">
                                            <label for="note"
                                                class="block text-sm leading-6 text-stone-500">AÇIKLAMA/NOT</label>
                                            <div class="mt-1">
                                                <input type="text" name="note" id="note"
                                                    class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="Örn; Ürün satışı"
                                                    value="{{ old('name', isset($transaction) ? $transaction->name : '') }}">
                                            </div>
                                        </div>
                                        <div class="col-span-2">
                                            <label for="amount"
                                                class="block text-sm leading-6 text-stone-500">TUTAR</label>
                                            <div class="relative mt-1">
                                                <input type="number" name="amount" id="amount" step="0.01" min="0"
                                                    class="block w-full text-right bg-stone-50 rounded-md border-0 py-2.5 pr-7 text-stone-900 ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-lg sm:leading-6"
                                                    placeholder="0.00" aria-describedby="price-currency"
                                                    value="{{ old('amount', isset($transaction) ? $transaction->amount : ($company ? abs($company->getCompanyBalance()) : '0.00')) }}"
                                                    @click="$event.target.select()">
                                                <div
                                                    class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                    <span class="text-stone-500 sm:text-sm">TRY</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="text" hidden="" name="type" value="{{ $type }}">

                                    <div x-show="selected === 'check'"
                                        class="grid items-center grid-cols-6 col-span-6 gap-4 py-4 border-t-2 border-dashed border-stone-600/10">
                                        <div class="col-span-2">
                                            <label for="due_date" class="block text-sm leading-6 text-stone-500">ÇEK
                                                VADESİ</label>
                                            <div class="mt-1">
                                                <input type="date" name="due_date" id="due_date"
                                                    class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    value="{{ old('due_date', isset($transaction) && $transaction->due_date ? $transaction->due_date->format('Y-m-d') : \Carbon\Carbon::now()->addDays(90)->format('Y-m-d')) }}">
                                            </div>
                                        </div>
                                        <div class="col-span-2">
                                            <label for="number" class="block text-sm leading-6 text-stone-500">ÇEK
                                                NO</label>
                                            <div class="mt-1">
                                                <input type="text" name="number" id="number"
                                                    class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="A235678"
                                                    value="{{ old('number', isset($transaction) ? $transaction->number : '') }}">
                                            </div>
                                        </div>
                                        <div class="col-span-2">
                                            <label for="bank_name" class="block text-sm leading-6 text-stone-500">ÇEK
                                                BANKA</label>
                                            <div class="mt-1">
                                                <input type="text" name="bank_name" id="bank_name"
                                                    class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="HALKBANK"
                                                    value="{{ old('bank_name', isset($transaction) ? $transaction->bank_name : '') }}">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    {{--BUTTONS--}}
                    <div
                        class="flex items-center justify-end px-4 py-4 border-t gap-x-4 bg-gradient-to-l from-stone-900/10 rounded-b-xl sm:px-8">
                        @include('modals.cancel', [
                        'title' => 'YAPTIĞINIZ DEĞİŞİKLİKLER KAYBOLACAK!',
                        'subtitle' => 'İPTAL ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                        'route' => route('dashboard'),
                        'button' => 'VAZGEÇ',
                        'cancel' => 'HAYIR, GERİ DÖN',
                        'confirm' => 'EVET, İPTAL ET'
                        ])
                        @include('modals.confirm', [
                        'title' => isset($transaction) ? 'FİŞ GÜNCELLENECEK' : 'FİŞ OLUŞTURULACAK',
                        'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                        'route' => '#',
                        'button' => isset($transaction) ? 'GÜNCELLE' : 'OLUŞTUR',
                        'cancel' => 'HAYIR, GERİ DÖN',
                        'confirm' => isset($transaction) ? 'EVET, GÜNCELLE' : 'EVET, OLUŞTUR'
                        ])
                    </div>
                </form>
            </div>
        </div>
    </main>
</div>

@endsection

@section('scripts')
@endsection

@section('outerScripts')
@endsection