@extends('seller.layout.index')

@section('title', 'حق العمل نمایندگان')

@section('style')
    <style>
        .commission-filter {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .filter-row {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 180px;
        }

        .filter-group label {
            color: #4a5568;
            font-weight: 600;
            margin-bottom: 8px;
            display: block;
        }

        .filter-actions {
            display: flex;
            gap: 10px;
            margin-left: auto;
        }

        .btn-excel {
            background-color: #1d6f42;
            border-color: #1a633b;
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
        }

        .btn-excel:hover {
            background-color: #1a633b;
            border-color: #165530;
            color: white;
        }

        .commission-table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-collapse: separate;
        }

        .commission-table thead th {
            background-color: #2c3e50;       /* پس‌زمینه تیره */
            color: white !important;         /* رنگ متن سفید و مهم */
            font-weight: 600;
            padding: 12px 15px;
            text-align: right;
            border-bottom: 2px solid #34495e;
        }

        .commission-table tbody td {
            vertical-align: middle;
            padding: 12px 15px;
            color: #4a5568;
            border-bottom: 1px solid #edf2f7;
            background-color: #fff;
        }

        .commission-table tbody tr:last-child td {
            border-bottom: none;
        }

        .commission-table tbody tr:nth-child(even) {
            background-color: #f8fafc;
        }

        .commission-table tbody tr:hover {
            background-color: #f0f5ff;
        }

        .table-responsive {
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        .h3 {
            color: #2d3748;
            font-weight: 700;
        }

        .status-paid {
            color: #27ae60;
            font-weight: 600;
        }

        .status-pending {
            color: #f39c12;
            font-weight: 600;
        }

        .status-failed {
            color: #e74c3c;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
                align-items: stretch;
                gap: 15px;
            }

            .filter-actions {
                margin-left: 0;
                justify-content: flex-end;
            }
        }
    </style>
@endsection


@section('content')
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3 mb-0 text-gray-800">حق العمل نماینده</h1>
        </div>

        <div class="commission-filter">
            <form method="get" class="filter-form" action="{{route('seller.salary.index')}}">
                <div class="filter-row">
                    <div class="filter-group">
                        <label for="year" class="form-label">سال</label>
                        <select name="year" id="year" class="form-select">
                            @foreach ($jalaliYears as $year)
                                <option
                                    value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="filter-group">
                        <label for="month" class="form-label">ماه</label>
                        <select name="month" id="month" class="form-select">
                            @foreach ($jalaliMonths as $monthNumber => $monthName)
                                <option
                                    value="{{ $monthNumber }}" {{ $selectedMonth == $monthNumber ? 'selected' : '' }}>{{ $monthName }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="filter-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter me-1"></i> اعمال فیلتر
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table commission-table">
                <thead>
                <tr>
                    <th>شماره سفارش</th>
                    <th class="text-center">خریدار</th>
                    <th class="text-center">مبلغ کل سفارس</th>
                    <th class="text-center">وضعیت</th>
                    <th class="text-center">درصد کمیسیون</th>
                    <th class="text-center">کمیسیون دریافت شده</th>
                    <th class="text-center">مبلغ حق العمل</th>
                    <th class="text-center">تاریخ صدور</th>
                </tr>
                </thead>
                <tbody>

                @if($salesReportDetails)
                    @foreach ($salesReportDetails as $order)

                        <tr>
                            <td>{{$order->order_number}}</td>
                            <td class="text-center">{{ $order->user?->first_name }} {{ $order->user?->last_name }}</td>
                            <td class="text-center">{{$order->total_amount}}</td>
                            <td class="text-center">{{$order->getPaymentStatusAttribute($order->status)}}</td>
                            <td class="text-center">{{$order->pivot['commission_percentage']??''}}</td>
                            <td class="text-center">{{number_format($order->pivot['commission_earned_on_order'])??''}}</td>
                            <td class="text-center">{{($order->pivot['commission_earned_on_order']) !=null ?'محاسبه شده':'محاسبه نشده' }}</td>
                            <td class="text-center">{{$order->created_at->format('Y-m-d')}}</td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>
@endsection