@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="mt-20 w-full px-10 bg-theme_secondary_black rounded-2xl p-8">
        <div class="flex ">
            <div class="w-2/3">
                <img src="{{ asset('assets/logo-white.png') }}" alt="logo" class="w-44">
                <div class="text-gray-300 font-bold text-lg mt-6">
                    <p>Toc Grup Hazir Yemek Organizasyon Ve Temizlik Hizmetleri Anonim Sirketi</p>
                    <p>Atakent mh. Mithatpasa Cd. Cagla Plaza No:116/18</p>
                </div>
                <div class="text-gray-300 mt-4">
                    <p class="font-bold text-lg">Istanbul/Umraniye</p>
                    <p>0216 706 03 071</p>
                </div>
                <div class="mt-4 text-gray-300">
                    <p class="font-bold text-lg">VD: Alemdag</p>
                    <p>8450708572</p>
                </div>
            </div>
            <div class="w-1/3 p-2 mt-12">
                <p class="text-3xl text-gray-300 text-right font-extrabold">TEKLIF</p>
                <hr class="border-2 mt-2">
                <div class="text-gray-300 mt-4">
                    <span class="font-bold text-xl">Musteri</span>
                    <p>A Plus Hastahane Otelcilik Hizmetleri Anonim Sirketi</p>
                    <p>Eyup Sultan Mah. Ibni sina Cad. No: 12 Sancaktepe</p>
                    <p>Istanbul / Sancaktepe</p>
                    <p>VD: ANADOLU KURUMLAR</p>
                    <p>2280082757</p>
                </div>
                <hr class="mt-2">
                <div class="flex flex-row text-gray-300 mt-2 items-center justify-between">
                    <p class="font-bold text-xl">TEKLIF TARIHI</p>
                    <p class="text-xl">16 Kasim 2023</p>
                </div>
            </div>
        </div>
        <div class="w-full text-gray-300 mt-8">
            <table class="w-full">
                <thead class="border-b text-lg">
                    <tr>
                        <th class="text-left">
                            <p>Hizmet/ Urun</p>
                        </th>
                        <th class="text-center">
                            <p>Miktar</p>
                        </th>
                        <th class="text-center">
                            <p>Br. Fiyati</p>
                        </th>
                        <th class="text-center">
                            <p>KDV</p>
                        </th>
                        <th class="text-right">
                            <p>Toplam</p>
                        </th>
                    </tr>
                </thead>
                <tbody class="border-b">
                    <tr>
                        <td class="py-6 text-left">
                            <p>Hizmet Bedeli</p>
                        </td>
                        <td class="text-center">
                            <p>40 Adet</p>
                        </td>
                        <td class="text-center">
                            <p>28.000,00 ₺</p>
                        </td>
                        <td class="text-center">
                            <p>%20</p>
                        </td>
                        <td class="text-right">
                            <p>1.120.000,00 ₺</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="text-right text-gray-300 mt-16 flex justify-end gap-4">
            <div class="flex flex-col gap-5 ">
                <div class="flex justify-between gap-24 items-center">
                    <p class="font-bold text-lg">ARA TOPLAM</p>
                    <p>1.120.000,00 ₺</p>
                </div>
                <div class="flex justify-between gap-24 items-center">
                    <p class="font-bold text-lg">BRUT TOPLAM</p>
                    <p>1.120.000,00 ₺</p>
                </div>
                <div class="flex justify-between gap-24 items-center">
                    <p class="font-bold text-lg">TOPLAM K.D.V</p>
                    <p>224.000,00 ₺</p>
                </div>
                <div class="flex justify-between gap-24 items-center">
                    <p class="font-bold text-lg">GENEL TOPLAM</p>
                    <p>1.344.000,00 ₺</p>
                </div>
            </div>
        </div>
        <div class="flex justify-center items-center gap-4 mt-4">
            <button
                class="inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-red-900 focus:ring-4 font-semibold bg-red-700">
                <i class="fa-solid fa-xmark"></i>
                Reddet
            </button>
            <button
                class="inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-green-900 focus:ring-4 font-semibold bg-green-700">
                <i class="fa-solid fa-check"></i>
                Kabul Et
            </button>
        </div>
    </div>
@endsection