@section("title", "BizMan | Customer Detail")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Customer Details') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-7xl flex flex-col gap-5 mx-auto sm:px-6 lg:px-8">
            <div class="flex items-center justify-between gap-2">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-2xl text-black">Customer Details</p>
                    <p>Informasi lengkap tentang customer</p>
                </div>
                <a href="{{ route('customers.index') }}"
                    class="bg-gray-500 whitespace-nowrap hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                    Back
                </a>
            </div>
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <!-- Customer Information -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Customer Information</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            <p class="mb-2"><strong>Name:</strong> {{ $customer->name }}</p>
                            <p class="mb-2"><strong>Company:</strong> {{ $customer->company_name }}</p>
                            <p class="mb-2"><strong>Created at:</strong>
                                {{ $customer->created_at->format('d M Y H:i') }}</p>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Contact Information</h3>
                        <div class="bg-gray-50 p-4 rounded space-y-3">
                            <!-- Email -->
                            <div class="flex items-center gap-3">
                                <div
                                    class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                        </path>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 font-medium">Email Address</p>
                                    <p class="text-sm text-gray-800">{{ $customer->email }}</p>
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="flex items-center gap-3">
                                <div
                                    class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                        </path>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 font-medium">Phone Number</p>
                                    <p class="text-sm text-gray-800">{{ $customer->phone }}</p>
                                </div>
                            </div>

                            <!-- Address -->
                            <div class="flex items-start gap-3">
                                <div
                                    class="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                        </path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 font-medium">Full Address</p>
                                    <p class="text-sm text-gray-800">{{ $customer->address }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Notes -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Additional Notes</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            @if ($customer->notes)
                                <p class="text-sm text-gray-700 whitespace-pre-line">{{ $customer->notes }}</p>
                            @else
                                <p class="text-gray-500">No additional notes for this customer.</p>
                            @endif
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-between">
                        <a href="{{ route('customers.index') }}"
                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                            Back to Customers
                        </a>
                        <div class="flex gap-2">
                            <form action="{{ route('customers.destroy', $customer->id) }}" method="POST"
                                onsubmit="return confirm('Yakin ingin menghapus customer ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    data-customer="{{ $customer["name"] }}"
                                    class="delete-btn bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                                    Delete Customer
                                </button>
                            </form>
                            <a href="{{ route('customers.edit', $customer->id) }}"
                                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                Edit Customer
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.delete-btn').forEach(button => {
                    button.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        const form = this.closest('.delete-form');
                        const customerName = this.getAttribute('data-customer');

                        Swal.fire({
                            title: 'Are you sure?',
                            text: `You are about to delete customer "${customerName}". This action cannot be undone!`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Yes, delete it!',
                            cancelButtonText: 'Cancel'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>