@extends('tenant.warehouses.warehouses-tabs')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.warehouses') => '/warehouses/sellers',
            __('breadcrumb.sellers') => '#',
        ],
    ])
@endsection

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

@section('content-field')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="d-flex justify-content-between">
            <h4>@lang('warehouses/sellers/index.sellers')</h4>

            <button class="btn btn-sm orange-btn mb-3" data-bs-toggle="modal" data-bs-target="#addNewSellerModal">
                <i class="fas fa-plus-circle"></i> @lang('warehouses/sellers/index.add_new_seller')
            </button>
        </div>

        <div>
            @include('tenant.warehouses.sellers.create')

            @include('tenant.warehouses.sellers.edit')

            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th class="md-td">#</th>
                        <th class="md-td">@lang('general.name')</th>
                        <th class="md-td">@lang('warehouses/sellers/index.phone_number')</th>
                        <th class="md-td">@lang('warehouses/sellers/index.commission_rate')</th>
                        <th class="md-td">@lang('warehouses/sellers/index.total_sales')</th>
                        <th class="md-td">@lang('warehouses/sellers/index.total_collected')</th>
                        <th class="md-td">@lang('warehouses/sellers/index.total_uncollected')</th>
                        <th class="sm-td">@lang('general.procedures')</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($sellers as $seller)
                        <tr>
                            <td class="xs-td eye-button">
                                <a href="{{ route('tenant.warehouses.sellers.show', $seller->id) }}" >
                                    <i class="dsip fas fa-eye mx-2"></i>
                                    <span>{{ $loop->iteration }}</span>
                                </a>              
                            </td>
                            <td class="md-td">{{ $seller->name }}</td>
                            <td class="md-td">{{ $seller->phone_number ?? '-' }}</td>
                            <td class="md-td">{{ $seller->commission_rate }}%</td>
                            <td class="md-td">{{ dn($seller->total_sales) }}</td>
                            <td class="md-td">{{ dn($seller->total_collected)  }}</td>
                            <td class="md-td">{{ dn($seller->total_uncollected) }}</td>
                    
                            <td class="sm-td">
                                <x-operations-btn>
                                    <li>
                                        <button class="btn edit-size-type-btn" data-SellerData="{{ json_encode($seller) }}"
                                            data-bs-toggle="modal" data-bs-target="#editSellerModal"
                                            title="{{ __('general.edit') }}">
                                            <i class="fas fa-edit"></i> @lang('general.edit')
                                        </button>
                                    </li>

                                    <li>
                                        <button class="btn delete-delivery-term-btn" data-sellerId="{{ $seller->id }}"
                                            title="{{ __('general.delete') }}">
                                            <i class="fas fa-trash-alt"></i> @lang('general.delete')
                                        </button>
                                    </li>
                                </x-operations-btn>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%">
                                @lang('warehouses/sellers/index.there_are_no_seller_yet')
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('script')
    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#addSellerForm').on('submit', function(event) {
                event.preventDefault();
                confirmAndSubmit('addSellerForm', {
                    type: 'green'
                });
            });

            $('#editSellerForm').on('submit', function(event) {
                event.preventDefault();
                confirmAndSubmit('editSellerForm', {
                    type: 'green'
                });
            });

            $('.edit-size-type-btn').on('click', function() {
                const seller_data = JSON.parse($(this).attr('data-SellerData'));
                $('#editSellerModal form').attr('action', `/warehouses/sellers/${seller_data.id}`);
                $('#editSellerModal input[name="name"]').val(seller_data.name);
                $('#editSellerModal input[name="phone_number"]').val(seller_data.phone_number);
                $('#editSellerModal input[name="commission_rate"]').val(seller_data.commission_rate);
                $('#editSellerModal #edit_seller_id').val(seller_data.id);
                $('#editSellerModal #edit_seller_id').trigger('change')
            });

            $('.delete-delivery-term-btn').on('click', function() {
                let that = this;

                $.confirm({
                    title: $lang(
                        'settings.warehouses.sellers.index.are_you_sure_you_want_to_delete_the_vendor'
                    ),
                    content: '',
                    type: 'red',
                    buttons: {
                        ok: {
                            text: $lang('general.yes'),
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: function() {
                                const seller_id = $(that).attr('data-sellerId');
                                const csrf_token = $('meta[name="csrf-token"]').attr('content');

                                let deleteForm = `
                                <form action="/warehouses/sellers/${seller_id}" method="POST" id="deleteSellerForm">
                                    <input type="hidden" name="_token" value="${csrf_token}">
                                    <input type="hidden" name="_method" value="DELETE">
                                </form>
                            `;

                                $('body').append(deleteForm);
                                $('#deleteSellerForm').trigger('submit');
                            }
                        },
                        cancel: {
                            text: $lang('general.cancel'),
                            btnClass: 'btn-default',
                            keys: ['esc']
                        }
                    }
                });
            });
        });
    </script>
@endpush