@extends('layouts.app')
@section('content')
    {{-- @include('components.sidebar')
    @include('components.profile') --}}
    @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
    <div class="container-app">
        <div class="flex gap-4">
            <div
                class="flex flex-col gap-6 3xl:justify-between bg-theme_secondary_black text-gray-300 rounded-md overflow-y-auto p-4 w-3/4">
                <div class="flex flex-col">
                    <div class="flex px-4 pb-4 items-center justify-between">
                        <div class="flex items-center gap-4 w-1/2">
                            <div class="flex items-center w-8">
                                <i class="text-3xl fa-regular fa-note-sticky"></i>
                            </div>
                            <h1 class="font-bold text-sm uppercase">Teklif</h1>
                        </div>
                        <a href="{{ route('admin.offer.edit', $offer->id) }}" class="button-2">
                            Düzenle
                        </a>
                    </div>
                    <div
                        class="flex flex-col gap-8 border-y-2 border-teheme_third_black px-4 py-4 items-center justify-between">
                        <div class="flex items-start justify-start w-full">
                            <div class="flex items-center gap-4 w-1/2">
                                <div class="w-8">
                                    <i class="text-xl fa-regular fa-building"></i>
                                </div>
                                <h1 class="font-bold text-sm uppercase">
                                    {{ $offer->headOffice->office_title }}
                                </h1>
                            </div>
                            <div class="flex gap-4 items-center">
                                <i class="fa-regular fa-calendar"></i>
                                @php
                                    $date = \Carbon\Carbon::parse($offer->update_date);
                                    $date = $date->isoFormat('D MMMM Y');
                                @endphp
                                {{ $date }}
                            </div>
                        </div>
                        <div class="flex items-center font-semibold justify-between w-full text-gray-400 text-xs uppercase">
                            <div class="w-1/2">
                                <h1 class="ml-12">
                                    {{ $offer->headOffice->address }}
                                </h1>
                                <div class="flex gap-4">
                                    <p class="ml-12">
                                        {{ $offer->headOffice->tax_admin }}
                                    </p>
                                    <p>
                                        {{ $offer->headOffice->office_tax_no }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="flex flex-col gap-8 border-b-2 border-teheme_third_black px-4 py-4 items-center justify-between">
                        <div class="flex items-start justify-start w-full">
                            <div class="ml-12 flex gap-4 items-center">
                                <i class="fa-regular fa-calendar"></i>
                                @php
                                    $offerDate = \Carbon\Carbon::parse($offer->offer_date);
                                    $offerDate = $offerDate->isoFormat('D MMMM Y');
                                @endphp
                                {{ $offerDate }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col gap-16">
                    <div>
                        <table class="w-full text-sm text-left text-gray-400">
                            <thead class="text-xs text-theme_white uppercase">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left w-1/4">
                                        Hizmet / Ürün
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left">
                                        Miktar
                                    </th>
                                    <th scope="col" class="px-6 py-3 w-44 text-left">
                                        Birim
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left">
                                        Br. Fiyat
                                    </th>
                                    <th scope="col" class="px-6 py-3 w-44 text-left">
                                        Vergi
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left">
                                        Toplam
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($offer->offerProducts as $product)
                                    <tr class="border-t border-teheme_third_black">
                                        <th class="px-6 py-4 whitespace-nowrap">
                                            <input type="text" disabled
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 product_amount"
                                                value="{{ $product->product_name }}">
                                        </th>
                                        <td class="px-6 py-4 text-center">
                                            <input type="text" name="product_amount[]" disabled
                                                value="{{ $product->product_amount }}"
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 product_amount">
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            @php
                                                $unit = $product->unit;
                                                if ($unit == 'piece') {
                                                    $unit = 'Adet';
                                                } elseif ($unit == 'hourly') {
                                                    $unit = 'Saatlik';
                                                } elseif ($unit == 'daily') {
                                                    $unit = 'Günlük';
                                                } elseif ($unit == 'monthly') {
                                                    $unit = 'Aylık';
                                                }
                                            @endphp
                                            <input type="text" disabled
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 product_amount"
                                                value="{{ $unit }}">
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="text" name="unit_amount[]" disabled
                                                    value="{{ $product->unit_amount }}"
                                                    class="bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1 price">
                                                <div class="absolute top-[2px] right-2 text-lg">
                                                    ₺
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <div class="flex items-center w-full">
                                                <div
                                                    class="flex items-center text-xs px-1 bg-theme_black border-teheme_third_black border-t border-b border-l justify-center h-8 rounded-tl-md rounded-bl-md">
                                                    KDV
                                                </div>
                                                <select name="tax_rate[]" disabled
                                                    class="p-1 bg-theme_secondary_black border-teheme_third_black h-8 rounded-tr-md rounded-br-md w-full text-sm tax">
                                                    <option selected disabled>% {{ $product->tax_rate }}</option>
                                                </select>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="text" disabled value="{{ $product->total_amount }}"
                                                    class="bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1 total_amount focus:ring-0"
                                                    readonly>
                                                <div class="absolute top-[2px] right-2 text-lg">
                                                    ₺
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex flex-col items-end p-4">
                            <div class="flex justify-between border-t border-teheme_third_black w-[380px] p-2">
                                <h1 class="font-bold text-sm uppercase">Ara Toplam</h1>
                                <span>
                                    <input class="bg-theme_secondary_black border-none text-right max-w-full focus:ring-0"
                                        readonly type="text" name="sub_total" value="{{ $offer->sub_total }}"> ₺
                                </span>
                            </div>
                            <div class="flex justify-between border-t border-teheme_third_black w-[380px] p-2">
                                <h1 class="font-bold text-sm uppercase">Toplam KDV</h1>
                                <span>
                                    <input class="bg-theme_secondary_black border-none text-right max-w-full focus:ring-0"
                                        readonly type="text" name="tax" value="{{ $offer->tax }}"> ₺
                                </span>
                            </div>
                            <div class="flex justify-between border-t border-teheme_third_black w-[380px] p-2">
                                <h1 class="font-bold text-sm uppercase">Genel Toplam</h1>
                                <span>
                                    <input class="bg-theme_secondary_black border-none text-right max-w-full focus:ring-0"
                                        readonly type="text" name="total" value="{{ $offer->total }}"> ₺
                                </span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="w-1/4 flex flex-col gap-6 text-gray-300">
                <div class="flex flex-col gap-8 bg-theme_secondary_black rounded-md p-4">
                    <div class="flex w-full gap-4">
                        <button class="button-2 w-full">
                            Paylaş
                        </button>
                        <button class="button-2 w-full">
                            Yazdır
                        </button>
                    </div>
                </div>
                <div class="flex items-center justify-between bg-theme_secondary_black rounded-md p-4 text-gray-300">
                    <h1 class="font-bold text-sm uppercase">Durum</h1>
                    <p class="font-bold text-xs uppercase">Onay Bekliyor</p>
                </div>
            </div>
        </div>
    </div>
@endsection