@extends('layouts.app')
@section('title', __('lang_v1.' . $type . 's'))
@php
    $api_key = env('GOOGLE_MAP_API_KEY');
@endphp
@if (!empty($api_key))
    @section('css')
        @include('contact.partials.google_map_styles')
    @endsection
@endif
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black"> @lang('lang_v1.' . $type . 's')
            <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">@lang('contact.manage_your_contact', ['contacts' => __('lang_v1.' . $type . 's')])</small>
        </h1>
    </section>

    <!-- Main content -->
    <section class="content">
        @component('components.filters', ['title' => __('report.filters')])
            @if ($type == 'customer')
                <div class="col-md-3">
                    <div class="form-group">
                        <label>
                            {!! Form::checkbox('has_sell_due', 1, false, ['class' => 'input-icheck', 'id' => 'has_sell_due']) !!} <strong>@lang('lang_v1.sell_due')</strong>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>
                            {!! Form::checkbox('has_sell_return', 1, false, ['class' => 'input-icheck', 'id' => 'has_sell_return']) !!} <strong>@lang('lang_v1.sell_return')</strong>
                        </label>
                    </div>
                </div>
            @elseif($type == 'supplier')
                <div class="col-md-3">
                    <div class="form-group">
                        <label>
                            {!! Form::checkbox('has_purchase_due', 1, false, ['class' => 'input-icheck', 'id' => 'has_purchase_due']) !!} <strong>@lang('report.purchase_due')</strong>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>
                            {!! Form::checkbox('has_purchase_return', 1, false, ['class' => 'input-icheck', 'id' => 'has_purchase_return']) !!} <strong>@lang('lang_v1.purchase_return')</strong>
                        </label>
                    </div>
                </div>
            @endif
            <div class="col-md-3">
                <div class="form-group">
                    <label>
                        {!! Form::checkbox('has_advance_balance', 1, false, ['class' => 'input-icheck', 'id' => 'has_advance_balance']) !!} <strong>@lang('lang_v1.advance_balance')</strong>
                    </label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>
                        {!! Form::checkbox('has_opening_balance', 1, false, ['class' => 'input-icheck', 'id' => 'has_opening_balance']) !!} <strong>@lang('lang_v1.opening_balance')</strong>
                    </label>
                </div>
            </div>
            @if ($type == 'customer')
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="has_no_sell_from">@lang('lang_v1.has_no_sell_from'):</label>
                        {!! Form::select(
                            'has_no_sell_from',
                            [
                                'one_month' => __('lang_v1.one_month'),
                                'three_months' => __('lang_v1.three_months'),
                                'six_months' => __('lang_v1.six_months'),
                                'one_year' => __('lang_v1.one_year'),
                            ],
                            null,
                            ['class' => 'form-control', 'id' => 'has_no_sell_from', 'placeholder' => __('messages.please_select')],
                        ) !!}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="cg_filter">@lang('lang_v1.customer_group'):</label>
                        {!! Form::select('cg_filter', $customer_groups, null, ['class' => 'form-control', 'id' => 'cg_filter']) !!}
                    </div>
                </div>
            @endif

            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('allocate_to', __('lang.allocate_sales_person') . ':') !!}
                    {!! Form::select('allocate_to', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%']) !!}
                </div>
            </div>

            @if (config('constants.enable_contact_assign') === true)
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('assigned_to', __('lang.sales_person') . ':') !!}
                        {!! Form::select('assigned_to', getSalesPersons()??[], null, ['class' => 'form-control select2', 'placeholder' => __('lang.all'), 'style' => 'width:100%']) !!}
                    </div>
                </div>
            @endif

            <div class="col-md-3">
                <div class="form-group">
                    <label for="status_filter">@lang('sale.status'):</label>
                    {!! Form::select(
                        'status_filter',
                        ['active' => __('business.is_active'), 'inactive' => __('lang_v1.inactive')],
                        null,
                        ['class' => 'form-control', 'id' => 'status_filter', 'placeholder' => __('lang_v1.none')],
                    ) !!}
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('tags[]', __('lang.tags') . ':') !!}
                    <!-- زرار تحديد الكل -->
                    <button type="button"  class="btn btn-success btn-xs select_tags"><i class="fa fa-check" id="select_tags" style="font-size: 10px;"></i></button>
                    <!-- زرار إلغاء التحديد -->
                    <button type="button"  class="btn btn-danger btn-xs deselect_tags"><i class="fa fa-times" id="deselect_tags" style="font-size: 10px;"></i></button>
                    
                    <div class="form-group">
                        {!! Form::select('tags[]', getTags(), null, ['class' => 'form-control select2', 'id' => 'tags', 'multiple' => 'multiple', 'style' => 'width:100%']) !!}
                    </div>
                </div>
            </div>

            @includeIf('locations::layouts.location_filter')
        @endcomponent
        <input type="hidden" value="{{ $type }}" id="contact_type">
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => __('contact.all_your_contact', ['contacts' => __('lang_v1.' . $type . 's')]),
        ])
            @if (auth()->user()->can('supplier.create') ||
                    auth()->user()->can('customer.create') ||
                    auth()->user()->can('supplier.view_own') ||
                    auth()->user()->can('customer.view_own'))
                @slot('tool')
                    <div class="box-tools">
                        <a class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full btn-modal"
                                data-href="{{ action([\App\Http\Controllers\ContactController::class, 'create'], ['type' => $type]) }}"
                                data-container=".contact_modal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                                </svg> @lang('messages.add')
                        </a>
                    </div>
                @endslot
            @endif
            @if (auth()->user()->can('supplier.view') ||
                    auth()->user()->can('customer.view') ||
                    auth()->user()->can('supplier.view_own') ||
                    auth()->user()->can('customer.view_own'))
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="contact_table">
                        <thead>
                            <tr>
                                @if($type == 'customer')
                                <th><input type="checkbox" id="select-all-row" data-table-id="contact_table"></th>
                                @endif
                                <th class="tw-w-full">@lang('messages.action')</th>
                                <th>@lang('lang_v1.contact_id')</th>
                                <th>@lang('contact.name')</th>
                                <th>@lang('lang.locations')</th>
                                <th>@lang('business.email')</th>
                                @if ($type == 'supplier')
                                    <th>@lang('contact.tax_no')</th>
                                    <th>@lang('contact.pay_term')</th>
                                    <th>@lang('lang_v1.advance_balance')</th>
                                    <th>@lang('lang_v1.balance_due')</th>
                                    <th>@lang('lang_v1.added_on')</th>
                                    <th>@lang('business.address')</th>
                                    <th>@lang('contact.mobile')</th>
                                    <th>@lang('contact.total_purchase_due')</th>
                                    <th>@lang('lang_v1.total_purchase_return_due')</th>
                                @elseif($type == 'customer')
                                    <th>@lang('contact.tax_no')</th>
                                    <th>@lang('lang_v1.credit_limit')</th>
                                    <th>@lang('contact.pay_term')</th>
                                    <th>@lang('lang_v1.advance_balance')</th>
                                    <th>@lang('lang_v1.balance_due')</th>
                                    <th>@lang('lang_v1.added_on')</th>
                                    @if ($reward_enabled)
                                        <th id="rp_col">{{ session('business.rp_name') }}</th>
                                    @endif
                                    <th>@lang('lang_v1.customer_group')</th>
                                    <th>@lang('business.address')</th>
                                    <th>@lang('contact.mobile')</th>
                                    <th>@lang('contact.total_sale_due')</th>
                                    <th>@lang('lang_v1.total_sell_return_due')</th>
                                @endif
                                @php
                                    $custom_labels = json_decode(session('business.custom_labels'), true);
                                @endphp
                                <th>
                                    {{ $custom_labels['contact']['custom_field_1'] ?? __('lang_v1.contact_custom_field1') }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_2'] ?? __('lang_v1.contact_custom_field2') }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_3'] ?? __('lang_v1.contact_custom_field3') }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_4'] ?? __('lang_v1.contact_custom_field4') }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_5'] ?? __('lang_v1.custom_field', ['number' => 5]) }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_6'] ?? __('lang_v1.custom_field', ['number' => 6]) }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_7'] ?? __('lang_v1.custom_field', ['number' => 7]) }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_8'] ?? __('lang_v1.custom_field', ['number' => 8]) }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_9'] ?? __('lang_v1.custom_field', ['number' => 9]) }}
                                </th>
                                <th>
                                    {{ $custom_labels['contact']['custom_field_10'] ?? __('lang_v1.custom_field', ['number' => 10]) }}
                                </th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr class="bg-gray font-17 text-center footer-total">
                                @if($type == 'customer')
                                <td colspan="15">
                                    <div style="display: flex; width: 100%;">
                                        {!! Form::open(['url' => action([\App\Http\Controllers\ContactController::class, 'massDestroy']), 'method' => 'post', 'id' => 'mass_delete_form' ]) !!}
                                        {!! Form::hidden('selected_rows', null, ['id' => 'selected_rows']); !!}
                                        {!! Form::submit(__('lang_v1.delete_selected'), array('class' => 'tw-dw-btn tw-dw-btn-outline tw-dw-btn-xs tw-dw-btn-error', 'id' => 'deleted-selected', 'data-mass' => __('lang_v1.no_row_selected') )) !!}
                                        {!! Form::close() !!}

                                        <a class="tw-dw-btn tw-dw-btn-outline tw-dw-btn-xs tw-dw-btn-info" id="edit-selected"
                                            data-href="{{ action([\App\Http\Controllers\ContactController::class, 'editAllSelected']) }}"
                                            data-container=".contact_modal" data-mass="@lang('lang_v1.no_row_selected')">
                                            @lang('lang.update_all_selected')
                                        </a>
                                    </div>
                                </td>
                                @endif
                                @if ($type == 'supplier')
                                <td colspan="12">
                                    <strong>
                                        @lang('sale.total'):
                                    </strong>
                                </td>
                                @endif
                                <td class="footer_contact_due"></td>
                                <td class="footer_contact_return_due"></td>
                                <td colspan="10"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @endif
        @endcomponent

        <div class="modal fade contact_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>
        <div class="modal fade pay_contact_due_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"></div>

    </section>
    <!-- /.content -->
@stop
@section('javascript')
    <script src="{{ asset('modules/locations/js/app.js?v=' . time()) }}"></script>

    <script>
        $(document).ready(function () {
            // تفعيل select2
            $('#tags').select2();

            // تحديد الكل
            $('.select_tags').click(function () {
                let allOptions = $('#tags option').map(function () {
                    return $(this).val();
                }).get();

                $('#tags').val(allOptions).trigger('change');
            });

            // إلغاء التحديد
            $('.deselect_tags').click(function () {
                $('#tags').val(null).trigger('change');
            });
        });

         $(document).ready(function () {
            $('.allocate_sales_person').select2();

            $('.select_all_users').click(function () {
                let allOptions = $('.allocate_sales_person option').map(function () {
                    return $(this).val();
                }).get();

                $('.allocate_sales_person').val(allOptions).trigger('change');
            });

            $('.deselect_all_users').click(function () {
                $('.allocate_sales_person').val(null).trigger('change');
            });
        });
    </script>
    <script type="text/javascript">
        $(document).on('shown.bs.modal', '.contact_modal', function(e) {
            initAutocomplete();
        });
    </script>

    <script>
        // لازم تكون Global علشان callback يلاقيها
        window.initAutocomplete = function() {
            const defaultLocation = { lat: 30.0444, lng: 31.2357 }; // Cairo

            const mapEl = document.getElementById('mapCreate');
            if (!mapEl) return;

            window._map = new google.maps.Map(mapEl, {
            center: defaultLocation,
            zoom: 13,
            mapTypeId: 'roadmap'
            });

            let marker = null;

            function placeMarker(location) {
                if (marker) {
                    marker.setPosition(location);
                } else {
                    marker = new google.maps.Marker({
                    position: location,
                    map: window._map
                    });
                }

                // ضبط الإحداثيات
                const latInput = document.getElementById("latitude");
                const lngInput = document.getElementById("longitude");
                if (latInput && lngInput) {
                    // location ممكن تكون LatLng أو object، فنتعامل مع الحالتين
                    const lat = typeof location.lat === 'function' ? location.lat() : location.lat;
                    const lng = typeof location.lng === 'function' ? location.lng() : location.lng;
                    latInput.value = lat;
                    lngInput.value = lng;
                }
            }

            // click على الخريطة يضيف/ينقل الـ marker
            window._map.addListener("click", function (event) {
                placeMarker(event.latLng);
            });

            // Autocomplete
            const input = document.getElementById("autocomplete");
            if (input) {
                const autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.bindTo("bounds", window._map);

                autocomplete.addListener("place_changed", () => {
                    const place = autocomplete.getPlace();
                    if (!place.geometry) {
                    alert("لا توجد تفاصيل متاحة لهذا المكان: '" + (place.name || input.value) + "'");
                    return;
                    }

                    if (place.geometry.viewport) {
                    window._map.fitBounds(place.geometry.viewport);
                    } else {
                    window._map.setCenter(place.geometry.location);
                    window._map.setZoom(15);
                    }

                    placeMarker(place.geometry.location);
                });
            }
        };

        // جهّز أي UI إضافي مرّة واحدة
        $(function () {
            if ($('#tracker_trip_schedule_id').length) {
            $('#tracker_trip_schedule_id').select2({
                placeholder: 'اختر أو اكتب وسم المسار',
                tags: true,
                allowClear: true
            });
            }
        });
    </script>

    <script 
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDr423M1AYPV2kqWYrYeOckUL3APmmKKTA&libraries=places&callback=initAutocomplete"
        async defer>
    </script>
@endsection