@extends('superadmin::layouts.master')
@section('title',__('superadmin::referral.refer_a_friend'))
@section('extra-styles')
    <link rel="stylesheet" href="{{ asset('assets/vendors/css/pickers/daterange/daterangepicker.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/plugins/pickers/daterange/daterange.css') }}">
@endsection
@section('breadcrumb')
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('referral.index')}}">@lang('superadmin::referral.refer_a_friend')</a></li>
            <li class="breadcrumb-item"><a href="#">@lang('superadmin::referral.friends_list')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section>
    @include('superadmin::errors.lists')
    <section id="configuration" class="mt-2">
        <div class="row my-1" style="margin: 0px;">
            <div class="row">
                <div class="col-md-12">
                    <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        <div class="d-flex justify-content-between">
                            <span>{{ __('Filter') }} </span><i class="fa fa-angle-down"></i>
                        </div>
                    </button>
                </div>
            </div>
            <div class="collapse filter-section-collapse" id="collapseExample">
                <form action="{{ route('referral.index') }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                <div class="card card-body mb-0">
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="name">@lang('superadmin::referral.name')</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="text" name="name" value="{{ request()->get('name') }}" class="w-100 py-1 form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="email">@lang('superadmin::referral.email')</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="email" name="email" value="{{ request()->get('email') }}" class="w-100 py-1 form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="mobile">@lang('superadmin::referral.mobile')</label>
                                    </div>
                                    @if(Lang::locale() == 'ar')
                                        <div class="col-md-4">
                                            <input type="text" name="mobile" value="{{ request()->get('mobile') }}" class="w-100 form-control">
                                        </div>
                                        <div class="col-md-4">
                                            @include('superadmin::includes.selectCountry',['user' => ['country_code' => request('country_code')]])
                                        </div>
                                    @else
                                        <div class="col-md-4">
                                            @include('superadmin::includes.selectCountry',['user' => ['country_code' => request('country_code')]])
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" name="mobile" value="{{ request()->get('mobile') }}" class="w-100 form-control">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="website_id">@lang('superadmin::referral.company')</label>
                                    </div>
                                    <div class="col-md-8">
                                        <select name="website_id" class="w-100 py-1 form-control">
                                            <option value="">{{ __('All') }}</option>
                                            @foreach($companies as $id => $name)
                                                <option value="{{ $id }}" {{ request()->get('website_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="created_at_range">@lang('superadmin::referral.created_at')</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control daterange" id="created_at_range" placeholder="{{ __('superadmin::referral.select_a_date_range') }}" value="{{ request('created_at_from') && request('created_at_to') ? request('created_at_from') . ' - ' . request('created_at_to') : '' }}">
                                        <input type="hidden" name="created_at_from" id="created_at_from" value="{{ $errors->has('created_at_from') ? '' : request('created_at_from') }}">
                                        <input type="hidden" name="created_at_to" id="created_at_to" value="{{ $errors->has('created_at_to') ? '' : request('created_at_to') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="is_joined">@lang('superadmin::referral.is_joined')</label>
                                    </div>
                                    <div class="col-md-8">
                                        @php($isJoined = request()->get('is_joined'))
                                        <select name="is_joined" class="w-100 py-1 form-control">
                                            <option value="" {{ ($isJoined === null || $isJoined === '') ? 'selected' : '' }}>{{ __('All') }}</option>
                                            <option value="1" {{ ($isJoined === '1' || $isJoined === 1) ? 'selected' : '' }}>{{ __('Yes') }}</option>
                                            <option value="0" {{ ($isJoined === '0' || $isJoined === 0) ? 'selected' : '' }}>{{ __('No') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="joined_date_range">@lang('superadmin::referral.joined_at')</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control daterange" id="joined_date_range" placeholder="{{ __('superadmin::referral.select_a_date_range') }}" value="{{ request('joined_date_from') && request('joined_date_to') ? request('joined_date_from') . ' - ' . request('joined_date_to') : '' }}">
                                        <input type="hidden" name="joined_date_from" id="joined_date_from" value="{{ $errors->has('joined_date_from') ? '' : request('joined_date_from') }}">
                                        <input type="hidden" name="joined_date_to" id="joined_date_to" value="{{ $errors->has('joined_date_to') ? '' : request('joined_date_to') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-1">
                    <a href="{{ route('referral.index') }}">
                        <button type="button" class='btn btn-warning btn-min-width mr-1 mb-1'>{{ __('Clear') }}</button>
                    </a>
                    <button type="submit" class="btn btn-info btn-min-width mr-1 mb-1">{{ __('Apply') }}</button>
                </div>
            </div>
            </form>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="card">
                    <div class="card-body collapse in">
                        <table
                            class="table table-striped table-column dataex-res-configuration  @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                            <thead>
                                <tr>
                                    <th>@lang('superadmin::referral.name')</th>
                                    <th>@lang('superadmin::referral.mobile')</th>
                                    <th>@lang('superadmin::referral.email')</th>
                                    <th>@lang('superadmin::referral.added_by')</th>
                                    <th>@lang('superadmin::referral.created_at')</th>
                                    <th>@lang('superadmin::referral.notes')</th>
                                    <th>@lang('superadmin::referral.joined_at')</th>
                                    <th>@lang('Actions')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($referrals as $referral)
                                <tr>
                                    <td><a href="{{route('referral.show', $referral->id)}}">{{$referral->name}}</a></td>
                                    <td>{!! $referral->mobile ? str_replace("+", "00", App\Enums\PhoneCode::get($referral->country_code)) . '-' . $referral->mobile : '' !!}</td>
                                    <td>{{$referral->email}}</td>
                                    <td><a href="{{$referral->companyInfo()->hostname ? route('tenant.activity', ['tenant' => $referral->companyInfo()->id]) : "#" }}">{{$referral->companyInfo()->name}}</a></td>
                                    <td>{{$referral->created_at->format('Y/m/d')}}</td>
                                    <td>{{$referral->shortNotes ?? '-'}}</td>
                                    <td>@if($referral->joined_date) {{$referral->joined_date->format('Y/m/d')}} @else - @endif</td>
                                    <td>
                                        <a href="" target="_blank" class="delete-referral" data-toggle="modal"
                                           data-target="#emailResendModal"
                                           data-toggle="tooltip" data-id="{{$referral->id}}" data-placement="bottom" >
                                            <button class='btn btni rounded-circle font-small-2 btn-warning btn-xs btn-delete'
                                                    data-toggle="tooltip" data-placement="bottom">
                                                <i class="fa fa-envelope-o"></i>
                                            </button>
                                        </a>
                                        <a href="{{route('referral.show', $referral->id)}}"
                                           class='btn btni rounded-circle font-small-2 btn-primary btn-xs text-white' data-toggle="tooltip"
                                           data-placement="bottom" title="@lang('Show')"><i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{{route('referral.edit', $referral->id)}}"
                                           class='btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white'
                                           data-toggle="tooltip" data-placement="bottom" title="@lang('Edit')"><i
                                                class="fa fa-pencil"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{---------------- popup fo deleted user -------------------------------}}
    <div class="modal fade" id="emailResendModal" tabindex="-1" role="dialog" aria-labelledby="emailResendModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="emailResendModalLabel">@lang('superadmin::referral.resend_email_model_title')</h4>
                </div>
                <div class="modal-body">
                    <p>@lang('superadmin::referral.resend_email_model_description')</p>
                    <div class="response-container"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                    <button type="submit" class="btn btn-primary" id="resend-referral-email" data-id="0" data-url="{{ route('api.referral.resendReferralEmail') }}">@lang('Yes')</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('extra_scripts')
    <script src="{{ asset('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickadate/picker.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickadate/picker.date.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickadate/picker.time.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickadate/legacy.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickers/daterange/daterangepicker.js') }}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendors/js/pickers/dateTime/picker-date-time.js') }}" defer></script>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            (function ($) {
                // Initialize date range picker for created_at
                if (typeof $.fn.daterangepicker !== 'undefined') {
                    var createdAtConfig = {
                        autoUpdateInput: false,
                        locale: {
                            cancelLabel: '{{ __('Clear') }}',
                            applyLabel: '{{ __('Apply') }}',
                            format: 'YYYY-MM-DD',
                            @if (app()->getLocale() == 'ar')
                                direction: 'rtl',
                                separator: ' - ',
                                daysOfWeek: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
                                monthNames: [
                                    'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
                                ],
                                firstDay: 6,
                                customRangeLabel: 'نطاق مخصص',
                            @else
                                separator: ' - ',
                                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                                monthNames: [
                                    'January', 'February', 'March', 'April', 'May', 'June',
                                    'July', 'August', 'September', 'October', 'November', 'December'
                                ],
                                firstDay: 0,
                                customRangeLabel: 'Custom Range',
                            @endif
                        }
                    };
                    
                    if ($('#created_at_from').val() && $('#created_at_to').val()) {
                        createdAtConfig.startDate = moment($('#created_at_from').val(), 'YYYY-MM-DD');
                        createdAtConfig.endDate = moment($('#created_at_to').val(), 'YYYY-MM-DD');
                    }
                    
                    $('#created_at_range').daterangepicker(createdAtConfig);

                    $('#created_at_range').on('apply.daterangepicker', function(ev, picker) {
                        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
                        $('#created_at_from').val(picker.startDate.format('YYYY-MM-DD'));
                        $('#created_at_to').val(picker.endDate.format('YYYY-MM-DD'));
                    });

                    $('#created_at_range').on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                        $('#created_at_from').val('');
                        $('#created_at_to').val('');
                    });

                    // Initialize date range picker for joined_date
                    var joinedDateConfig = {
                        autoUpdateInput: false,
                        locale: {
                            cancelLabel: '{{ __('Clear') }}',
                            applyLabel: '{{ __('Apply') }}',
                            format: 'YYYY-MM-DD',
                            @if (app()->getLocale() == 'ar')
                                direction: 'rtl',
                                separator: ' - ',
                                daysOfWeek: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
                                monthNames: [
                                    'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
                                    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
                                ],
                                firstDay: 6,
                                customRangeLabel: 'نطاق مخصص',
                            @else
                                separator: ' - ',
                                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                                monthNames: [
                                    'January', 'February', 'March', 'April', 'May', 'June',
                                    'July', 'August', 'September', 'October', 'November', 'December'
                                ],
                                firstDay: 0,
                                customRangeLabel: 'Custom Range',
                            @endif
                        }
                    };
                    
                    if ($('#joined_date_from').val() && $('#joined_date_to').val()) {
                        joinedDateConfig.startDate = moment($('#joined_date_from').val(), 'YYYY-MM-DD');
                        joinedDateConfig.endDate = moment($('#joined_date_to').val(), 'YYYY-MM-DD');
                    }
                    
                    $('#joined_date_range').daterangepicker(joinedDateConfig);

                    $('#joined_date_range').on('apply.daterangepicker', function(ev, picker) {
                        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
                        $('#joined_date_from').val(picker.startDate.format('YYYY-MM-DD'));
                        $('#joined_date_to').val(picker.endDate.format('YYYY-MM-DD'));
                    });

                    $('#joined_date_range').on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                        $('#joined_date_from').val('');
                        $('#joined_date_to').val('');
                    });
                }

                // Populate the ID field
                $('.delete-referral').click(function(){
                    const This = $(this);
                   $('#resend-referral-email').data('id' , This.data('id'));
                });
                // Use AJAX to resend the email
                $('#resend-referral-email').click(function(){
                    // Clear the response div to start fresh
                    $('.modal-body .response-container').html('');
                    // Prepare and send the HTTP request to trigger the mail
                    const ActionUrl = $(this).data('url');
                    const Id= $(this).data('id');
                    $.ajax({
                        url: ActionUrl,
                        method: 'POST',
                        data: {
                            id: Id,
                            language: "{{app()->getLocale()}}"
                        },
                        success: function(response){
                            // Show a success message
                            $('.modal-body .response-container').append('<div class="alert alert-success">@lang("superadmin::referral.email_has_been_sent")</div>');
                            setTimeout(function (){
                                $('.modal-body .response-container').html('');
                                $('#emailResendModal').modal('hide');
                            }, 1000);
                            // Close the modal
                        },
                        error: function(error){
                            // Show an error message
                            $('.modal-body .response-container').append('<div class="alert alert-danger">@lang("superadmin::referral.email_was_not_sent")</div>');
                        }
                    })
                });
            })(jQuery);
        });

    </script>
@endsection