@extends('tenant.representatives.representative-tabs')
@php
    $activeTab = 'representatives';
@endphp
@section('style')
    <link rel="stylesheet" href="{{ asset('css/accounting/representatives/index.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
@endsection

@section('breadcrumb')
    @php
        $breadcrumb_items[ __('breadcrumb.home')] = '/';
        $breadcrumb_items[ __('breadcrumb.representatives')] = '#';
    @endphp

    @include('tenant.layouts.breadcrumb', [
        'items' => $breadcrumb_items,
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'representatives.index'])
@endsection

@section('content-field')
    <x-filter-form :title="__('breadcrumb.representatives')" :link="route('tenant.representatives.representatives.filter')">
        <div class="row">
            <div class="col-md-4">
                <label for="receivable_ids"> @lang('representatives/index.receivable')</label> <br>
                @php $selected_receivable_ids = request('receivable_ids')?? []; @endphp
                <select name="receivable_ids[]" id="receivable_ids" class="w-100" multiple>
                    <option value=""> @lang('representatives/index.select_receivable')</option>
                    @foreach ($receivableAccounts as $receivableAccount)
                        <option value="{{ $receivableAccount->id }}"
                            {{ in_array($receivableAccount->id, $selected_receivable_ids) ? 'selected' : '' }}>
                            {{ $receivableAccount->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label for="branch_ids">@lang('representatives/index.warehouses')</label> <br>
                @php $selected_branch_ids = request('branch_ids')?? []; @endphp
                <select name="branch_ids[]" id="branch_ids" class="w-100" multiple>
                    <option value="">@lang('representatives/index.select_warehouses') </option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}"
                            {{ in_array($branch->id, $selected_branch_ids) ? 'selected' : '' }}>
                            {{ $branch->name }}
                        </option>
                    @endforeach
                </select>

            </div>
            <div class="col-md-1">
                <br>
                <label for="is_saler">@lang('representatives/index.sales_representative') :</label>
                <input type="checkbox" name="is_saler" id="is_saler" value="1" class="custom-checkbox"
                    {{ request('is_saler') ? 'checked' : '' }}>
            </div>
            <div class="col-md-1">
                <br>
                <label for="is_collector">@lang('representatives/index.collection_representative') :</label>
                <input type="checkbox" name="is_collector" id="is_collector" value="1" class="custom-checkbox"
                    {{ request('is_collector') ? 'checked' : '' }}>
            </div>
            {{-- <div class="col-md-1">
                <br>
                <label for="is_delivery">@lang('representatives/index.delivery_representative') :</label>
                <input type="checkbox" name="is_delivery" id="is_delivery" value="1" class="custom-checkbox"
                    {{ request('is_delivery') ? 'checked' : '' }}>
            </div>
            <div class="col-md-1">
                <br>
                <label for="is_cash_van">@lang('representatives/index.cash_van_representative') :</label>
                <input type="checkbox" name="is_cash_van" id="is_cash_van" value="1" class="custom-checkbox"
                    {{ request('is_cash_van') ? 'checked' : '' }}>
            </div> --}}
        </div>
    </x-filter-form>
    <div class="mb-3 d-flex justify-content-between">
        <h4>@lang('representatives/index.representatives')</h4>
        @can('representatives-representatives-add')
            <a href="{{ route('tenant.representatives.representatives.create') }}" class="btn orange-btn">
                @lang('representatives/index.add_representative')  <i class="fas fa-plus-circle"></i>
            </a>
        @endcan
    </div>
    <div class="m-auto ">
        @php
            $table_options = [
                'lang' => ['noAvailableData' => __('noAvailableData.no_representatives')],
            ];
        @endphp

        <v-table :options="{{ json_encode($table_options) }}">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th class="xs-td">#</th>
                        <th class="text-center md-td">  @lang('representatives/index.representative_name')</th>
                        <th class="text-center md-td"> @lang('representatives/index.user_name') </th>
                        <th class="text-center md-td"> @lang('representatives/index.phone_number') </th>
                        <th class="text-center md-td"> @lang('representatives/index.warehouses')</th>
                        <th class="text-center sm-td"> @lang('representatives/index.receivables')</th>
                        <th class="text-center xs-td">  @lang('representatives/index.commission_rate') </th>
                        <th class="text-center sm-td">  @lang('representatives/index.sales_representative')</th>
                        <th class="text-center sm-td">  @lang('representatives/index.collection_representative')</th>
                        {{-- <th class="text-center sm-td">@lang('representatives/index.delivery_representative') </th> --}}
                        {{-- <th class="text-center sm-td">@lang('representatives/index.cash_van_representative')</th> --}}
                        <th class="text-center sm-td">@lang('general.procedures')</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($representatives as $representative)
                        <tr>
                            <td class="xs-td">{{ $loop->iteration }}</td>
                            <td class="md-td">{{ $representative->name }}</td>
                            <td class="md-td">{{ $representative->username }}</td>
                            <td class="md-td">{{ $representative->phone }}</td>
                            <td class="md-td">
                                @foreach ($representative->branch as $branch)
                                    {{ $branch->name }},
                                @endforeach
                            </td>
                            <td class="md-td">
                                @foreach ($representative->receivable_account as $account)
                                    {{ $account->name }},
                                @endforeach
                            </td>
                            <td class="xs-td">{{ $representative->commission_rate }}</td>
                            <td class="sm-td">{{ $representative->is_saler == 0 ? 'لا' : 'نعم' }}</td>
                            <td class="sm-td">{{ $representative->is_collector == 0 ? 'لا' : 'نعم' }}</td>
                            {{-- <td class="sm-td">{{ $representative->is_delivery == 0 ? 'لا' : 'نعم' }}</td> --}}
                            {{-- <td class="sm-td">{{ $representative->is_cash_van == 0 ? 'لا' : 'نعم' }}</td> --}}

                            <td class="xs-td">
                                <x-operations-btn>
                                    @can('representatives-representatives-edit')
                                        <li>
                                            <a class="btn show-edit-modal-btn"
                                                href="{{ route('tenant.representatives.representatives.edit', ['representative' => $representative->id]) }}">
                                                <i class="fas fa-edit"></i> @lang('general.edit')
                                            </a>
                                        </li>
                                    @endcan
                                    
                                    @can('representatives-representatives-delete')
                                        <li>
                                            <form
                                                action="{{ route('tenant.representatives.representatives.destroy', ['representative' => $representative->id]) }}"
                                                method="post">
                                                @csrf
                                                @method('delete')

                                                <button class="btn" name="delete" type="button">
                                                    <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                                </button>
                                            </form>
                                        </li>
                                    @endcan
                                </x-operations-btn>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                @if ($representatives->isEmpty())
                    <tfoot class="bordered-top bg-white">
                        <tr id="tFooteTarget" class="bordered-top">
                            <td colspan="13"> @lang('representatives/index.no_representatives_yet')</td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </v-table>
    </div>
@endsection

@push('script')
    <script>
        $(() => {
            $('button[name="delete"]').on('click', function(e) {
                $.confirm({
                    title:$lang('representatives/index.confirm_delete'),
                    content: $lang('representatives/index.will_delete_completely'),
                    type: 'red',
                    buttons: {
                        ok: {
                            text: $lang('general.yes'),
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: () => {
                                $(this).closest('form').submit();
                            }
                        },
                        cancel: {
                            text: $lang('general.no'),
                            btnClass: 'btn-default',
                            keys: ['esc'],
                            action: () => {
                                $(this).prop('checked', !$(this).prop('checked'));
                            }
                        }
                    }
                });
            });
        });
    </script>
@endpush