@extends('layouts.stock')

@section('title', 'My Stock')

@section('mobile_header')
    <div class="flex items-center justify-between p-4">
        <div class="flex items-center gap-3">
            <button class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" type="button">
                <span class="material-symbols-outlined">menu</span>
            </button>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100">My Stock</h1>
        </div>
        <div class="flex items-center gap-2">
            <a class="flex items-center justify-center p-2 rounded-lg hover:bg-primary/10 text-slate-700 dark:text-slate-200" href="{{ route('pharmacy.stock.index', ['tab' => $tab, 'q' => request('q')]) }}">
                <span class="material-symbols-outlined">search</span>
            </a>
            @include('pharmacy.partials.notifications_icon')
        </div>
    </div>
    <div class="flex border-b border-primary/10 px-4 gap-6 overflow-x-auto no-scrollbar">
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if($tab === 'all') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'all', 'q' => request('q')]) }}">
            <span class="text-sm font-bold">All Items</span>
        </a>
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if($tab === 'low') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'low', 'q' => request('q')]) }}">
            <span class="text-sm font-bold">Low Stock</span>
        </a>
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if($tab === 'expired') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'expired', 'q' => request('q')]) }}">
            <span class="text-sm font-bold">Expired</span>
        </a>
        <a class="flex flex-col items-center justify-center pb-3 pt-2 whitespace-nowrap @if($tab === 'recent') border-b-2 border-primary text-primary @else border-b-2 border-transparent text-slate-500 dark:text-slate-400 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'recent', 'q' => request('q')]) }}">
            <span class="text-sm font-bold">Recent</span>
        </a>
    </div>
@endsection

@section('mobile_content')
    <div class="flex-1 overflow-y-auto p-4 space-y-4">
        <form class="flex gap-2" method="GET" action="{{ route('pharmacy.stock.index') }}">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <div class="flex-1 relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
                <input class="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-primary focus:border-primary outline-none text-sm transition-all" name="q" value="{{ request('q') }}" placeholder="Search medicine..." type="text">
            </div>
            <button class="bg-primary text-white p-2.5 rounded-xl shadow-lg shadow-primary/20 flex items-center justify-center" type="submit">
                <span class="material-symbols-outlined">filter_list</span>
            </button>
        </form>

        <div class="grid grid-cols-2 gap-3">
            <div class="bg-primary/5 dark:bg-primary/10 border border-primary/20 p-3 rounded-xl">
                <p class="text-[10px] uppercase tracking-wider font-bold text-primary/70">Total Stock</p>
                <p class="text-xl font-bold">{{ number_format($summary['total']) }}</p>
            </div>
            <div class="bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900/30 p-3 rounded-xl">
                <p class="text-[10px] uppercase tracking-wider font-bold text-red-500">Critical items</p>
                <p class="text-xl font-bold text-red-600">{{ number_format($summary['low'] + $summary['expired']) }}</p>
            </div>
        </div>

        <div class="space-y-3">
            <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Inventory Items</h3>

            @foreach($stocks as $stock)
                @php
                    $isExpired = $stock->expiry_date ? $stock->expiry_date->lt(now()->startOfDay()) : false;
                    $isLow = ! $isExpired && $stock->quantity <= $lowThreshold;
                    $badgeClass = $isExpired ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' : ($isLow ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400');
                    $badgeText = $isExpired ? 'Expired' : ($isLow ? 'Low Stock' : 'Available');
                    $totalValue = (float) ($stock->quantity ?? 0) * (float) ($stock->unit_price ?? 0);
                    $visibilityText = $stock->visibility === 'visible' ? 'Visible' : 'Hidden';
                    $visibilityBadgeClass = $stock->visibility === 'visible'
                        ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                        : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
                    $typeLabel = $stock->listing_type === 'swap' ? 'Swap' : 'Sell';
                    $typeIcon = $stock->listing_type === 'swap' ? 'swap_horiz' : 'sell';
                @endphp
                <div class="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm flex flex-col gap-3">
                    <div class="flex justify-between items-start">
                        <div class="flex gap-3">
                            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined">medication</span>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-900 dark:text-slate-100">{{ $stock->medicine?->name }}</h4>
                                <div class="mt-1 flex flex-wrap items-center gap-2">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300" title="{{ $typeLabel }}">
                                        <span class="material-symbols-outlined text-sm leading-none">{{ $typeIcon }}</span>
                                        <span class="sr-only">{{ $typeLabel }}</span>
                                    </span>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold {{ $visibilityBadgeClass }}">{{ $visibilityText }}</span>
                                    <span class="text-xs text-slate-500 dark:text-slate-400">Total Stock Value: <span class="font-bold">{{ number_format($totalValue, 2) }} DH</span></span>
                                </div>
                            </div>
                        </div>
                        <span class="{{ $badgeClass }} text-[10px] font-bold px-2 py-1 rounded-full uppercase">{{ $badgeText }}</span>
                    </div>
                    <div class="grid grid-cols-2 gap-4 pt-2 border-t border-slate-50 dark:border-slate-700/50">
                        <div>
                            <p class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-bold">Quantity</p>
                            <p class="text-sm font-semibold">{{ $stock->quantity }} {{ $stock->unit }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-bold">Expiry</p>
                            <p class="text-sm font-semibold @if($isExpired) text-red-500 @endif">{{ $stock->expiry_date?->format('M Y') }}</p>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2">
                        <a class="inline-flex items-center gap-1 px-3 py-2 rounded-xl border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-xs font-semibold" href="{{ route('pharmacy.stock.edit', $stock) }}">
                            <span class="material-symbols-outlined text-base">edit</span>
                            Edit
                        </a>
                        <form method="POST" action="{{ route('pharmacy.stock.destroy', $stock) }}">
                            @csrf
                            @method('DELETE')
                            <button class="inline-flex items-center gap-1 px-3 py-2 rounded-xl border border-red-200 dark:border-red-900/40 text-red-600 dark:text-red-400 text-xs font-semibold" type="submit" onclick="return confirm('Remove this stock?')">
                                <span class="material-symbols-outlined text-base">delete</span>
                                Remove
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

        <div>
            {{ $stocks->links() }}
        </div>

        <div class="h-24"></div>
    </div>

    <a class="fixed right-6 bottom-24 bg-primary text-white flex items-center gap-2 px-6 py-4 rounded-full shadow-2xl shadow-primary/40 active:scale-95 transition-transform z-40 md:hidden" href="{{ route('pharmacy.stock.create') }}">
        <span class="material-symbols-outlined">add</span>
        <span class="font-bold">Add Stock</span>
    </a>

    <nav class="sticky bottom-0 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 px-6 py-2 flex justify-between items-center z-50 md:hidden">
        <a class="flex flex-col items-center gap-1 text-slate-400" href="{{ route('pharmacy.marketplace') }}">
            <span class="material-symbols-outlined">storefront</span>
            <span class="text-[10px] font-medium">Market</span>
        </a>
        <a class="flex flex-col items-center gap-1 text-slate-400" href="{{ route('pharmacy.community.index') }}">
            <span class="material-symbols-outlined">forum</span>
            <span class="text-[10px] font-medium">Community</span>
        </a>
        <a class="flex flex-col items-center gap-1 text-primary" href="{{ route('pharmacy.stock.index') }}">
            <span class="material-symbols-outlined">inventory_2</span>
            <span class="text-[10px] font-bold">Stock</span>
        </a>
        <a class="flex flex-col items-center gap-1 text-slate-400" href="{{ route('pharmacy.profil') }}">
            <span class="material-symbols-outlined">account_circle</span>
            <span class="text-[10px] font-medium">Profile</span>
        </a>
    </nav>
@endsection

@section('desktop_content')
    <div class="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
            <div>
                <h1 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight">My Stock</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-1 text-base">Manage your medical inventory and monitor stock levels in real-time.</p>
            </div>
            <a class="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-xl font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] transition-all" href="{{ route('pharmacy.stock.create') }}">
                <span class="material-symbols-outlined">add</span>
                <span>Add Stock</span>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm">
                <div class="flex items-center gap-4">
                    <div class="size-12 rounded-xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600">
                        <span class="material-symbols-outlined">inventory_2</span>
                    </div>
                    <div>
                        <p class="text-sm text-slate-500 font-medium">Total Items</p>
                        <p class="text-2xl font-bold">{{ number_format($summary['total']) }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm">
                <div class="flex items-center gap-4">
                    <div class="size-12 rounded-xl bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center text-orange-600">
                        <span class="material-symbols-outlined">warning</span>
                    </div>
                    <div>
                        <p class="text-sm text-slate-500 font-medium">Low Stock Alerts</p>
                        <p class="text-2xl font-bold text-orange-600">{{ number_format($summary['low']) }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm">
                <div class="flex items-center gap-4">
                    <div class="size-12 rounded-xl bg-red-50 dark:bg-red-900/20 flex items-center justify-center text-red-600">
                        <span class="material-symbols-outlined">event_busy</span>
                    </div>
                    <div>
                        <p class="text-sm text-slate-500 font-medium">Expiring Soon</p>
                        <p class="text-2xl font-bold text-red-600">{{ number_format($summary['expiring_soon']) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <div class="flex border-b border-slate-200 dark:border-slate-700">
                <a class="px-6 py-3 text-sm @if($tab === 'all') font-bold text-primary border-b-2 border-primary @else font-medium text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'all', 'q' => request('q')]) }}">All Medicines</a>
                <a class="px-6 py-3 text-sm @if($tab === 'low') font-bold text-primary border-b-2 border-primary @else font-medium text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'low', 'q' => request('q')]) }}">Low Stock</a>
                <a class="px-6 py-3 text-sm @if($tab === 'expired') font-bold text-primary border-b-2 border-primary @else font-medium text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'expired', 'q' => request('q')]) }}">Expired</a>
                <a class="px-6 py-3 text-sm @if($tab === 'reserved') font-bold text-primary border-b-2 border-primary @else font-medium text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'reserved', 'q' => request('q')]) }}">Reserved</a>
                <a class="px-6 py-3 text-sm @if($tab === 'recent') font-bold text-primary border-b-2 border-primary @else font-medium text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 @endif" href="{{ route('pharmacy.stock.index', ['tab' => 'recent', 'q' => request('q')]) }}">Recent</a>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                            <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Medicine Name</th>
                            <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Quantity</th>
                            <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Expiry Date</th>
                            <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Type</th>
                            <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        @foreach($stocks as $stock)
                            @php
                                $isExpired = $stock->expiry_date ? $stock->expiry_date->lt(now()->startOfDay()) : false;
                                $isLow = ! $isExpired && $stock->quantity <= $lowThreshold;
                                $statusText = $isExpired ? 'Expired' : ($isLow ? 'Low Stock' : ucfirst($stock->status));
                                $statusClass = $isExpired ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400' : ($isLow ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400');
                                $dotClass = $isExpired ? 'bg-red-500' : ($isLow ? 'bg-orange-500' : 'bg-green-500');
                                $totalValue = (float) ($stock->quantity ?? 0) * (float) ($stock->unit_price ?? 0);
                                $visibilityText = $stock->visibility === 'visible' ? 'Visible' : 'Hidden';
                                $visibilityBadgeClass = $stock->visibility === 'visible'
                                    ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
                                    : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400';
                                $typeLabel = $stock->listing_type === 'swap' ? 'Swap' : 'Sell';
                                $typeIcon = $stock->listing_type === 'swap' ? 'swap_horiz' : 'sell';
                            @endphp
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/30 transition-colors">
                                <td class="px-6 py-5">
                                    <div class="flex flex-col">
                                        <span class="font-bold text-slate-900 dark:text-white">{{ $stock->medicine?->name }}</span>
                                        <div class="mt-1 flex flex-wrap items-center gap-2">
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300" title="{{ $typeLabel }}">
                                                <span class="material-symbols-outlined text-sm leading-none">{{ $typeIcon }}</span>
                                                <span class="sr-only">{{ $typeLabel }}</span>
                                            </span>
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold {{ $visibilityBadgeClass }}">{{ $visibilityText }}</span>
                                            <span class="text-xs text-slate-400">Total Stock Value: <span class="font-bold">{{ number_format($totalValue, 2) }} DH</span></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold @if($isLow) text-orange-600 @endif">{{ $stock->quantity }} {{ $stock->unit }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5 text-sm text-slate-600 dark:text-slate-400">{{ $stock->expiry_date?->format('Y-m-d') }}</td>
                                <td class="px-6 py-5">
                                    <span class="inline-flex items-center px-3 py-1 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg font-bold" title="{{ $typeLabel }}">
                                        <span class="material-symbols-outlined text-base leading-none">{{ $typeIcon }}</span>
                                        <span class="sr-only">{{ $typeLabel }}</span>
                                    </span>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold {{ $statusClass }}">
                                        <span class="size-1.5 rounded-full {{ $dotClass }}"></span>
                                        {{ $statusText }}
                                    </span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <div class="flex justify-end gap-3 text-slate-400">
                                        <a class="hover:text-primary transition-colors flex items-center gap-1" href="{{ route('pharmacy.stock.edit', $stock) }}">
                                            <span class="material-symbols-outlined text-xl">edit</span>
                                            <span class="text-xs font-bold">Edit</span>
                                        </a>
                                        <form method="POST" action="{{ route('pharmacy.stock.destroy', $stock) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button class="hover:text-red-500 transition-colors flex items-center gap-1" type="submit" onclick="return confirm('Remove this stock?')">
                                                <span class="material-symbols-outlined text-xl">delete</span>
                                                <span class="text-xs font-bold">Remove</span>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-4">
            {{ $stocks->links() }}
        </div>
    </div>
@endsection