@extends('layouts.app')

@section('content')
<!--begin::Toolbar-->
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <!--begin::Toolbar container-->
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <!--begin::Page title-->
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <!--begin::Title-->
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('customers.listing') }}</h1>
            <!--end::Title-->
            <!--begin::Breadcrumb-->
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <!--begin::Item-->
                <li class="breadcrumb-item text-muted">
                    <a href="{{ url('/') }}" class="text-muted text-hover-primary">{{ __('common.home') }}</a>
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="breadcrumb-item text-muted">{{ __('common.customers') }}</li>
                <!--end::Item-->
            </ul>
            <!--end::Breadcrumb-->
        </div>
        <!--end::Page title-->
        <!--begin::Actions-->
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <!--begin::Primary button-->
            @can('Create:Customer')
                @if(app('current_company')->canCreateCustomer())
                    <a href="{{ route('customers.create') }}" class="btn btn-sm fw-bold btn-primary">{{ __('customers.add') }}</a>
                @else
                    <button type="button" class="btn btn-sm fw-bold btn-primary" onclick="Swal.fire({text: 'Müşteri limitinize ulaştınız. Devam etmek için lütfen paketinizi yükseltin.', icon: 'warning', confirmButtonText: 'Tamam'})">{{ __('customers.add') }}</button>
                @endif
            @endcan
            <!--end::Primary button-->
        </div>
        <!--end::Actions-->
    </div>
    <!--end::Toolbar container-->
</div>
<!--end::Toolbar-->

<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-xxl">
        <!--begin::Card-->
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                    <!--begin::Search-->
                    <form action="{{ route('customers.index') }}" method="GET" class="d-flex align-items-center position-relative my-1">
                        <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control form-control-solid w-250px ps-13" placeholder="{{ __('customers.search') }}" />
                        @if(request('sort'))
                            <input type="hidden" name="sort" value="{{ request('sort') }}">
                        @endif
                        @if(request('direction'))
                            <input type="hidden" name="direction" value="{{ request('direction') }}">
                        @endif
                    </form>
                    <!--end::Search-->
                </div>
                <!--begin::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-125px">
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'customer_code', 'direction' => request('sort') === 'customer_code' && request('direction') === 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 text-hover-primary d-flex align-items-center">
                                        {{ __('messages.customer_code') }}
                                        @if(request('sort') === 'customer_code')
                                            <i class="ki-duotone ki-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} ms-1 fs-7"><span class="path1"></span><span class="path2"></span></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="min-w-125px">
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'first_name', 'direction' => request('sort') === 'first_name' && request('direction') === 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 text-hover-primary d-flex align-items-center">
                                        {{ __('messages.first_name') }}
                                        @if(request('sort') === 'first_name')
                                            <i class="ki-duotone ki-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} ms-1 fs-7"><span class="path1"></span><span class="path2"></span></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="min-w-125px">
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'last_name', 'direction' => request('sort') === 'last_name' && request('direction') === 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 text-hover-primary d-flex align-items-center">
                                        {{ __('messages.last_name') }}
                                        @if(request('sort') === 'last_name')
                                            <i class="ki-duotone ki-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} ms-1 fs-7"><span class="path1"></span><span class="path2"></span></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="min-w-125px">{{ __('messages.phone') }}</th>
                                <th class="min-w-125px">
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'email', 'direction' => request('sort') === 'email' && request('direction') === 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 text-hover-primary d-flex align-items-center">
                                        {{ __('messages.email') }}
                                        @if(request('sort') === 'email')
                                            <i class="ki-duotone ki-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} ms-1 fs-7"><span class="path1"></span><span class="path2"></span></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="min-w-125px">
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => request('sort') === 'created_at' && request('direction') === 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 text-hover-primary d-flex align-items-center">
                                        {{ __('messages.created_at') }}
                                        @if(request('sort') === 'created_at')
                                            <i class="ki-duotone ki-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} ms-1 fs-7"><span class="path1"></span><span class="path2"></span></i>
                                        @endif
                                    </a>
                                </th>
                                <th class="text-end min-w-100px">{{ __('common.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            @foreach($customers as $customer)
                            <tr>
                                <td>
                                    <a href="{{ route('customers.show', ['customer' => $customer]) }}" class="text-gray-800 text-hover-primary fw-bold">{{ $customer->customer_code }}</a>
                                </td>
                                <td>
                                    <a href="{{ route('customers.show', ['customer' => $customer]) }}" class="text-gray-800 text-hover-primary fw-bold">{{ $customer->first_name }}</a>
                                </td>
                                <td>
                                    <a href="{{ route('customers.show', ['customer' => $customer]) }}" class="text-gray-800 text-hover-primary fw-bold">{{ $customer->last_name }}</a>
                                </td>
                                <td>
                                    <a href="{{ route('customers.show', ['customer' => $customer]) }}" class="text-gray-600 text-hover-primary">{{ $customer->phone }}</a>
                                </td>
                                <td>
                                    <a href="{{ route('customers.show', ['customer' => $customer]) }}" class="text-gray-600 text-hover-primary">{{ $customer->email ?? '-' }}</a>
                                </td>
                                <td>
                                    <a href="{{ route('customers.show', ['customer' => $customer]) }}" class="text-gray-600 text-hover-primary">{{ $customer->created_at ? $customer->created_at->format('d.m.Y H:i') : '-' }}</a>
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex align-items-center gap-2">
                                        <a href="{{ route('customers.show', ['customer' => $customer]) }}"
                                           class="btn btn-icon btn-sm btn-light-primary"
                                           title="{{ __('common.view') }}">
                                            <i class="ki-duotone ki-eye fs-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                        </a>
                                        @can('Update:Customer')
                                            <a href="{{ route('customers.edit', ['customer' => $customer]) }}"
                                               class="btn btn-icon btn-sm btn-light-warning"
                                               title="{{ __('common.edit') }}">
                                                <i class="ki-duotone ki-notepad-edit fs-4"><span class="path1"></span><span class="path2"></span></i>
                                            </a>
                                        @endcan
                                        @can('Delete:Customer')
                                            <form action="{{ route('customers.destroy', ['customer' => $customer]) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                        class="btn btn-icon btn-sm btn-light-danger"
                                                        title="{{ __('common.delete') }}">
                                                    <i class="ki-duotone ki-trash fs-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!--end::Table-->
                <!--begin::Pagination-->
                <div class="d-flex flex-stack flex-wrap pt-10">
                    <div class="fs-6 fw-semibold text-gray-700">
                        {{ __('customers.showing_entries', ['from' => $customers->firstItem() ?? 0, 'to' => $customers->lastItem() ?? 0, 'total' => $customers->total()]) }}
                    </div>
                    <ul class="pagination">
                        {{ $customers->links('pagination::bootstrap-5') }}
                    </ul>
                </div>
                <!--end::Pagination-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
</div>
<!--end::Content-->
@endsection

@push('scripts')
<script src="{{ asset('metronic/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script>
    // Simple DataTable initialization if needed, although Metronic usually has a dedicated JS for this
    // For now we use standard Bootstrap 5 pagination from Laravel
</script>
@endpush