@extends('admin.layouts.app')

@section('title')
    {{ __('orders') }}
@endsection

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title line-height-36">Order List
                    <span class="ml-1 badge bg-primary">
                        {{ @$allOrders}}
                    </span>
                </h3>
                <div class="align-items-center  ml-auto">
                    @if (userCan('order.create'))
                    <a href="{{ route('order.create-order') }}"
                        class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                        <i class="fas fa-plus"></i>
                        &nbsp; {{ __('create') }}
                    </a>
                    @endif
                </div>
            
            </div>

            <form id="formSubmit" action="{{ route('order.index') }}" method="GET">
                <div class="row p-1 mt-2 mx-2">
                    <div class="col-md-2 dropdown">
                        {{-- <x-forms.input type="date" name="created_at" placeholder="Enter Created Date"
                            value="{{ old('created_at', request('created_at')) }}" /> --}}
                        <input type="text" id="created_at" name="created_at" value="{{ request('created_at') }}"
                            class="form-control" autocomplete="off" id="my_txtbox" placeholder="Date Range"
                            readonly />
                        <x-forms.error name="created_at" />
                    </div>

                    <div class="col-md-2 dropdown">
                        <select name="candidate_id" id="candidate_id" class="form-control select2candidate">
                            <option value="">Select Candidate</option>
                        </select> 
                    </div>

                    <div class="col-md-2 dropdown">
                        <select name="status" class="form-control select2bs4" id="status">
                            <option value="" class="d-none">
                                Select Status
                            </option>
                            <option value="paid" {{  request('status')== "paid" ? 'selected' : ''  }}>Paid</option>
                            <option value="unpaid" {{ request('status')== "unpaid" ? 'selected' : '' }}>Unpaid</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="text" @if (request('Keyword')) value="{{ request('Keyword') }}" @endif
                            id="Keyword" class="form-control mr-2"
                            placeholder="{{ __('search') }}..." name="Keyword" aria-label="">
                    </div>

                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary float-right"><i class="fas fa-search"></i> {{
                            __('search') }}</button>
                        @if (request('Keyword') || request('status') || request('candidate_id') ||
                        request('created_at'))
                        <a href="{{ route('order.index') }}"
                            class="mr-1 float-right btn btn-danger align-items-center justify-content-center"><i
                                class="fas fa-times"></i></a>
                        @endif

                    </div>


                </div>
           
            </form>
            @if (userCan('order.view'))
            <div class="">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table">
                            <thead>
                              <tr>
                                <th scope="col" >Order Id</th>
                                <th scope="col" >Package Name</th>
                                <th scope="col" >Name</th>
                                <th scope="col" >Stage</th>
                                {{-- <th scope="col" >Email</th> --}}
                                <th scope="col" >Amount</th>
                                <th scope="col" >Status</th>
                                <th scope="col" >Link</th>
                                {{-- <th scope="col" >Copy Link</th> --}}
                                <th scope="col" >Date</th>
                                <th scope="col" >Created By</th>
                                <th scope="col" >Updated By</th>
                                <th scope="col" >Action</th>
                              </tr>
                            </thead>
                            <tbody> 
                                @if(@$orders->count() > 0)
                                    @foreach (@$orders as $order)
                                        <tr>
                                            <th >{{@$order->id}}</th>
                                            <td >{{@$order->plan->title}}</td>
                                            <td > @if(@$order->candidate->id && @$order->candidate->user->id)
                                                <a target="_blank" href="{{ route('lead-management.edit', @$order->candidate->id) }}"  class="link">
                                                    {{@$order->name}} ({{@$order->candidate->user->id}}) 
                                                </a>
                                                @else 
                                                {{@$order->name}} ({{@$order->candidate->user->id}}) 
                                                @endif
                                            </td>
                                            <td >{{ @$order->candidate->user->stages ?? "--" }}</td>
                                            {{-- <td >{{@$order->email}}</td> --}}
                                            <td >{{@$order->country->currency}} {{@$order->amount}}</td>
                                            <td >
                                                @if (@$order->status == 'unpaid')
                                                    <span class="badge bg-warning fs-6 mt-1" style="color:white !important;">{{__(@$order->status)}}</span>
                                                @else
                                                    <span class="badge bg-success fs-6 mt-1">{{__(@$order->status)}}</span>
                                                @endif
                                            </td>
                                            @php
                                                $orderID = null;
                                                $orderURL = null;
                                                $orderID = Crypt::encryptString(@$order->id);
                                                if($orderID){
                                                     $orderURL = env('WEB_SITE_URL', 'https://www.gradding.com/') . 'payment/checkoutPayment/' . $orderID;
                                                }
                                            @endphp
                                            <td >
                                                @if (!empty(@$order->plan->whatsapp_template_name))
                                                    @if (userCan('order.copy'))
                                                        <a href="{{ $orderURL }}" data-id="{{$order->id}}" style="display:none">
                                                            <i class="fab fa-whatsapp"></i>
                                                        </a>
                                                        <button onclick="copyLink({{@$order->id}})" class="btn bg-success text-white btn-sm">Copy</button>
                                                    @else
                                                        No Permission
                                                    @endif
                                                    @if(!empty(@$order->plan->whatsapp_template_name))
                                                    <a href="javascript:;" style="font-size: 24px;" onclick="sendPaymentLink(
                                                        '{{ @$order->id }}',
                                                        '{{ @$order->plan->id }}',
                                                        '{{ @$order->candidate->user->name }}',
                                                        '{{ @$order->candidate->user->phone }}',
                                                        '{{ @$order->candidate->user->country_code }}',
                                                        '{{ @$order->candidate->user->country}}',
                                                        '{{ @$order->candidate->user->id }}',
                                                        '{{ @$order->plan->whatsapp_template_name }}',
                                                        '{{ @$order->plan->plan_summary }}',
                                                        '{{ @$order->plan->title }}',
                                                        '{{ @$order->plan->offer_price }}',
                                                        '{{ $orderURL }}',
                                                        '{{@$order->plan->planCategory->name }}',
                                                        )">
                                                        <i class="fab fa-whatsapp"></i>
                                                    </a>
                                                    @endif
                                               
                                                   
                                                @else
                                                    @if (userCan('order.copy'))
                                                        <a href="{{ $orderURL }}" data-id="{{$order->id}}" style="display:none">
                                                            <i class="fab fa-whatsapp"></i>
                                                        </a>
                                                        <button onclick="copyLink({{@$order->id}})" class="btn bg-success text-white btn-sm">Copy</button>
                                                    @else
                                                        No Permission
                                                    @endif
                                                @endif
                                            </td>
                                            {{-- <td > </td>    --}}
                                            <td >@if(!empty($order->created_at)){{ dateMonthTimeFormat(@$order->created_at) }}@else -- @endif</td>   
                                            <td >{{ @$order->createdByAdmin->name ?? "--" }}</td>
                                            <td >{{ @$order->updatedByAdmin->name ?? "--" }}</td>
                                            
                                            <td >
                                                <div class="d-flex justify-content-evenly">
                                                    @if($order->status == 'unpaid')
                                                         @if (userCan('order.edit'))
                                                        <a href="{{ route('order.edit-order', @$order->id) }}" class="btn btn-primary">
                                                        <i class="fas fa-edit"></i>
                                                        </a>
                                                        @endif
                                                        @if (userCan('order.delete'))
                                                        <form action="{{ route('order.delete', @$order->id) }}" class=""
                                                            method="POST"
                                                            onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}')">
                                                            @csrf
                                                            @method('delete')
                                                            <button  class="btn btn-danger">
                                                                <i type="submit" class="fas fa-trash"></i>
                                                            </button>
                                                        </form>
                                                        @endif
                                                    @endif
                                                
                                                </div>
                                            </td>                                                                                
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="10">
                                            <div class="container text-center">
                                                <x-not-found message="{{ __('no_data_found') }}" />
                                                @if (userCan('order.create'))
                                                    <a href="{{ route('order.create-order') }}" class="plan-btn btn btn-primary">
                                                        {{ __('add_your_first_order') }}
                                                    </a>
                                                @endif
                                            </div>                                    
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                        <div class="mt-3 d-flex justify-content-center">
                            {{ @$orders->links() }}
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>     
 
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script>
 $(document).ready(function () {
   
            var candidateId = '{{ request("candidate_id") }}';

            // $('.select2candidate').select2({
            //     theme: 'bootstrap4',
            //     ajax: {
            //         url: '{{ route('order.searchCandidate') }}',
            //         dataType: 'json',
            //         type: "POST",
            //         delay: 250,
            //         data: function (params) {
            //             return {
            //                 term: params.term,
            //                 _token: '{{ csrf_token() }}'
            //             };
            //         },
            //         processResults: function (data) {
            //             return {
            //                 results: data.map(function(item) {
            //                     console.log(item);
            //                     return {
            //                         id: item.id,
            //                         text: `${item.name} (${item.id})`
            //                     };
            //                 })
            //             };
            //         },
            //         cache: true
            //     },
            //     minimumInputLength: 1,
            //     placeholder: 'Search for Candidate',
            //     escapeMarkup: function (markup) {
            //         return markup;
            //     },
            //     templateSelection: function (data) {
            //         return data.text;
            //     }
            // });

            $('.select2candidate').select2({
                theme: 'bootstrap4',
                ajax: {
                    url: '{{ route('order.searchCandidate') }}',
                    dataType: 'json',
                    type: "GET",
                    quietMillis: 50,
                    data: function (term) {
                        console.log('item',term);
                        return {
                            term : term,
                        };
                    },
                    processResults: function (data) {
                        console.log('data',data)
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: `${item.name} (${item.user_id})`
                                }
                            })
                        };
                    }
                }
            });

            if (candidateId) {
                $.ajax({
                    url: '{{ route('order.searchCandidate') }}',
                    type: "GET",
                    dataType: 'json',
                    data: { id: candidateId, _token: '{{ csrf_token() }}' },
                    success: function (item) {
                        console.log(item);
                        $('.select2candidate').append(new Option(`${item.name} (${item.id})`, item.id, true, true)).trigger('change');
                    }
                });
            }

            $('.select2bs4').select2({
                theme: 'bootstrap4',
                minimumResultsForSearch: 8,
            })

         
        });

        $('input[name="created_at"]').daterangepicker({
            autoUpdateInput: false,
            // maxDate: new Date(),
            locale: {
                cancelLabel: 'Clear'
            }
        });
        $('input[name="created_at"]').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
        });

        $('input[name="created_at"]').on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
        });

        function copyLink(orderId) {
            var linkToCopy = $("a[data-id='" + orderId + "']").attr("href");
            var input = document.createElement("input");
            input.setAttribute("value", linkToCopy);
            document.body.appendChild(input);
            input.select();
            document.execCommand("copy");
            document.body.removeChild(input);
            alert("Link copied to clipboard");
        }
    </script>
    <script>
        // function sendPaymentLink(orderId,planId,name,phone,countryCode,country,user_id) { 
        function sendPaymentLink(orderId,planId,name,phone,countryCode,country,user_id,templates_type,plan_summary,plan_name,plan_amount,link,plan_category) { 
            if(!confirm("Sending Payment link to "+ name+ "?"))  return false
            if (!orderId) {
                toastr.error("orderId is required.");
                return;
            }

            if (!planId) {
                toastr.error("planId is required.");
                return;
            }

            if (!name) {
                toastr.error("name is required.");
                return;
            }

            if (!phone) {
                toastr.error("Phone is required.");
                return;
            }
        
            var newPhone = countryCode + phone;

            // Handle special case for "India"
            if (country == "India") {
                newPhone = countryCode + phone.slice(-10);
            }

            // Remove any whitespace from the phone number
            newPhone = newPhone.replace(/\s/g, '');

            // Additional parameters
            var additionalData = {
                "template": templates_type,
                "sendTo": newPhone,
                "countryCode": countryCode,
                "user_id": user_id,
                "name": name,
                "plan_summary": plan_summary,
                "plan_name": plan_name,
                "plan_amount": plan_amount + " /-",
                "link": link,
                "applications": "10",
                "plan_category": plan_category,

            };

            $.ajax({
                url: "{{ route('commonController.customWhatsApp')}}",
                type: "post",
                data: {
                    template: templates_type,
                    data: additionalData,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    toastr.success("WhatsApp Message send successfully!");
                },
                error: function(xhr, status, error) {
                    toastr.error(status + " : Error WhatsApp Message. Please try again later.");
                }
            });

        };
    </script>
@endsection

@section('style')
    <link href="{{ asset('path-to-your-font-awesome-css/all.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
        .btn-heigth{
            height: 42px;
        }
    </style>
@endsection