@extends('layouts.app')

@section('content')
<div class="px-4 pb-60" x-data="{ showModal: false }">

    <div class="sm:flex sm:items-center gap-x-2">
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <div
                        class="bg-gradient-to-b from-stone-600 uppercase to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-lg">
                        CARİ HESAPLAR
                    </div>
                </nav>
            </div>
        </header>
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <a href="#" @click.prevent="showModal = true" type="button"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                        <span class="material-symbols-rounded text-stone-400">add</span>
                    </a>
                </nav>
            </div>
        </header>

    </div>

    {{-- Create Customer Modal --}}
    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
        @click.self="showModal = false">
        <div class="w-full max-w-md p-6 mx-4 bg-white rounded-lg shadow-xl" @click.stop>
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-stone-900">Yeni Müşteri Ekle</h3>
                <button @click="showModal = false" class="text-stone-400 hover:text-stone-600">
                    <span class="text-2xl material-symbols-rounded">close</span>
                </button>
            </div>

            <form action="{{ route('customers.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label for="name" class="block mb-1 text-sm font-medium text-stone-700">Ad <span
                            class="text-red-500">*</span></label>
                    <input type="text" name="name" id="name" required
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        placeholder="Müşteri adı" />
                </div>
                <div>
                    <label for="surname" class="block mb-1 text-sm font-medium text-stone-700">Soyad <span
                            class="text-red-500">*</span></label>
                    <input type="text" name="surname" id="surname" required
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        placeholder="Müşteri soyadı" />
                </div>
                <div>
                    <label for="phone" class="block mb-1 text-sm font-medium text-stone-700">Telefon</label>
                    <input type="tel" name="phone" id="phone"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        placeholder="0 (5XX) XXX XX XX" />
                </div>
                <div>
                    <label for="address" class="block mb-1 text-sm font-medium text-stone-700">Adres</label>
                    <textarea name="address" id="address" rows="2"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        placeholder="Müşteri adresi"></textarea>
                </div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" @click="showModal = false"
                        class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                        VAZGEÇ
                    </button>
                    <button type="submit"
                        class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                        KAYDET
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="max-w-6xl mt-4 pb-60">
        @if(session()->has('message'))
        <div class="px-4 py-2 mb-4 text-teal-700 bg-teal-100 rounded">
            {{ session('message') }}
        </div>
        @endif

        @if(session()->has('error'))
        <div class="px-4 py-2 mb-4 rounded text-rose-700 bg-rose-100">
            {{ session('error') }}
        </div>
        @endif

        {{-- Son cari hareketler --}}
        <div class="mb-6">
            <livewire:recent-customer-transactions />
        </div>

        <livewire:customer-list :customers="$customers" />
    </div>
</div>
@endsection