@extends('layouts.master')

@section('page_title', 'Call Status Details')
@section('title', 'Call Status Details')
@section('main_item', 'Oder')
@section('sub_item', 'Call Status Details')

@section('content')
    <style>
        div.dt-buttons {
            position: relative;
            float: right;
        }

        div.dataTables_filter {
            margin-top: 7px
        }
    </style>
    <div class="col-md-12" style="padding-bottom: 20px;padding-right: 30px;">
        <form action="{{ route('reports.callindex') }}" method="get" id="filter_form">
            <div class="btn-group" role="group" aria-label="Basic example" style="float: right;">
                <a href="{{ route('reports.callindex') }}" id="pending" class="btn btn-primary  submit-filters"
                    data-type="pending">Pending
                </a>
                <a href="{{ route('reports.callindex') }}" id="confirm" class="btn btn-primary  submit-filters"
                    data-type="confirm">Confirm
                </a>
                <a href="{{ route('reports.callindex') }}" id="not_confirm" class="btn btn-primary  submit-filters"
                    data-type="not_confirm">Not Confirm
                </a>
                <a href="{{ route('reports.callindex') }}" id="hold_oders" class="btn btn-primary  submit-filters"
                    data-type="hold_oders">Hold Orders
                </a>
                <a href="{{ route('reports.callindex') }}" id="cancel" class="btn btn-primary  submit-filters"
                    data-type="cancel">Cancel Orders
                </a>
            </div>
    </div>
    
    <div class="col-12">
        <div class="card">

                <div id="accordion">

                    <div class="border-bottom card-header" style="background-color: white; cursor: pointer;"
                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h4 class="mb-0 header-title">
                            Filter
                        </h4>
                    </div>
                    <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class ="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="supplier">Customer Name</label>
                                        <input id="customer_name" name="customer_name" type="text" class="form-control"
                                            placeholder="Search for Customer Name..."
                                            aria-label="Search for Customer Name..." value="{{ request('customer_name') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="supplier">Customer Mobile Number</label>
                                        <input id="mobile" name="mobile" type="number" class="form-control"
                                            placeholder="Search for Customer Mobile Number..."
                                            aria-label="Search for Customer Mobile Number..."
                                            value="{{ request('mobile') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="reportrange" style="font-weight: bold"> Date </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="dates" id="date"
                                                value="{{ request('dates') }}" readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="ref_no">Order ID</label>
                                        <input id="ref_no" name="ref_no" type="text" class="form-control"
                                            placeholder="Search for..." aria-label="Search for..."
                                            value="{{ request('ref_no') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" style="font-weight: bold">Sort As</label>
                                    <select class="form-control select2" name="sort">
                                        <option value="">All</option>
                                        <option value="desc" @if (request('sort') == 'desc') selected @endif>Descending
                                        </option>
                                        <option value="asc" @if (request('sort') == 'asc') selected @endif>Ascending
                                        </option>
                                    </select>
                                </div>
                              
                                <div class="col-md-3" @if ($settings->product_filter_enable != '1') style="display: " @endif>
                                    <div class="form-group">
                                        <label style="font-weight: bold" for="p_name">Product Name</label>
                                        <select class="form-control select2" id="p_name" name="p_name">
                                            <option value="">All</option>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}"
                                                    @if (request('p_name') == $product->id) selected @endif>{{ $product->product_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <button type="submit" class="btn btn-primary px-5 py-2" id="btn-search"
                                    data-type="table">Filter</button>
                                <a href="{{ route('reports.callindex') }}" class="btn btn-danger px-5 py-2">Reset</a>
                            </div>
    
                            <input type="hidden" name="data_type" id="data_type" value="{{ request('data_type') }}">
                            </form>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <div class="col-12 mt-2" style="width: 1440px;">
        <div class='card'>
            <div class="card-body">
                <div>
                    <a href="{{ route('reports.new_callindex') }}"
                        class="btn btn-primary float-right px-5 py-2 submit-filters" data-type="excel">Download
                        Excel</a>
                </div>
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover" style="width: 100%">
                        <thead class="thead-dark">
                            <tr>
                                <th>Action</th>
                                <th>Call Status</th>
                                <th>Order ID</th>
                                <th>Waybill No</th>
                                <th>Customer</th>
                                @if ($settings->hide_payment_status != '1')<th>Payment Status</th> @endif
                                <th>Payment Method</th>
                                <th>Invoice Total</th>
                                <th>Last Status</th>
                                <th>Next Call Date</th>
                                <th>Call Attempt</th>
                                <th>Sale Date</th>
                                <th>Updated</th>
                                {{-- showproduct name and qty --}}
                                <th>Sale Items</th>
                            </tr>
                            <!--end tr-->
                        </thead>
                        <tbody>
                            @foreach ($sales as $sale)
                                <tr>
                                    <td>
                                        @php
                                        @endphp
                                        <div class="dropdown">
                                            @if ($sale->call_status == 'cancel')
                                                <button class="btn btn-info dropdown-toggle" type="button"
                                                    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
                                                    aria-expanded="false" disabled>Action
                                                @else
                                                    <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">Action
                                            @endif
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                @php
                                                    $user = Auth::user();
                                                @endphp
                                                <a href="{{ url('orders/' . $sale->id . '/edit') }}" target="_blank"
                                                    class="dropdown-item" data-toggle="tooltip" data-placement="top"
                                                    title="Edit Order"><i class="fas fa-edit text-success font-16"></i>
                                                    Edit</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @php
                                            // $city = City::where('id', $sale->customer->city)->first();
                                        @endphp
                                        @if ($sale->call_status == 'pending')
                                            <span class="badge badge-warning">Pending</span>
                                        @elseif ($sale->call_status == 'confirm')
                                            <span class="badge badge-success">Confirm</span>
                                        @elseif ($sale->call_status == 'not_confirm')
                                            <span class="badge badge-secondary">Not Confirm</span>
                                        @elseif ($sale->call_status == 'cancel')
                                            <span class="badge badge-danger">Cancel Order</span>
                                        @elseif ($sale->call_status == 'hold_oders')
                                            <span class="badge badge-primary" style="background: #0DFF5D;">Hold
                                                Order</span>
                                        @else
                                            <span class="badge badge-info">Not Available</span>
                                        @endif
                                        @if ($sale->call_status != 'cancel')
                                            {{-- // if ($city->name_en != 'Other')  --}}
                                            <a href="javascript:void(0)" id="add"
                                                data-href="{{ url('call-status/' . $sale->id . '/add') }}"
                                                class="dropdown-item"><i class="fa fa-edit text-success font-16"></i></a>
                                        @endif
                                        @if ($sale->call_status == 'duplicate')
                                            <span class="badge badge-danger">Duplicate</span>
                                            {{-- // } --}}
                                        @endif
                                    </td>
                                    <td>
                                        @if (!empty($sale->invoice_no))
                                            {{ $sale->invoice_no }}
                                        @elseif(!empty($sale->ref_no))
                                            {{ $sale->ref_no }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    
                                    <td>
                                        @if (!empty($sale->waybill_no))
                                            {{ $sale->waybill_prefix . $sale->waybill_no . $sale->waybill_postfix }}
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                  
                                    <td>
                                        {{ $sale->customer->name }}
                                    </td>
                                    @if ($settings->hide_payment_status != '1')
                                    <td>
                                        {{ $sale->payment_status }}
                                    </td>
                                    @endif
                                    <td>{{ $sale->payment_method }}</td>
                                    <td>{{ number_format($sale->invoice_nettotal, 2) }}</td>
                                   
                                    <td>
                                        @php
                                            $call_status = App\CallStatus::where('sale_id', $sale->id)
                                                ->get()
                                                ->last();
                                        @endphp
                                        @if (!empty($call_status->call_status_reason))
                                            <span class="badge badge-info">{{ $call_status->call_status_reason }} </span>
                                        @else
                                            <span class="badge badge-info">N/A</span>
                                        @endif
                                    </td>
                                   
                                    <td>
                                   
                                        @if (!empty($sale->next_call_date))
                                            {{ Carbon\Carbon::parse( $sale->next_call_date)->format('Y-m-d') }}

                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    {{-- <td>
                                        @php
                                            $call_status = App\CallStatus::where('sale_id', $sale->id)
                                                ->get()
                                                ->last();
                                        @endphp
                                        @if (!empty($call_status->next_call_date))
                                            {{ Carbon\Carbon::parse($call_status->next_call_date)->format('Y-m-d') }}
                                        @else
                                            N/A
                                        @endif
                                    </td> --}}
                                    <td>
                                        @php
                                            $call_status = App\CallStatus::where('sale_id', $sale->id)->count();
                                        @endphp
                                        {{ $call_status }}
                                    </td>
                                    <td>
                                        @php
                                            $dates = Carbon\Carbon::parse($sale->sale_date)->toDateString();
                                        @endphp
                                        {{ $dates }}
                                    </td>
                                    <td>{{ Carbon\Carbon::parse($sale->updated_at)->toDateString() }}</td>
                                    {{-- showproduct name and qty --}}
                                    <td>
                                        @foreach($sale->saleItems as $saleItem)
                                            {{ $saleItem->product->product_name }} - {{ $saleItem->qty }} , <br>
                                        @endforeach
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            {{-- <tr>
                                <th colspan="10" style="text-align: center"></th>
                                <th style="font-weight: bold">Total</th>
                                <th colspan="1"></th>
                            </tr> --}}
                        </tfoot>
                    </table>
                    <div class="d-flex justify-content-end">
                        {{ $sales->appends($_GET)->links() }}
                    </div>
                    <div>
                        @php
                        $count = $sales->count();
                    @endphp
                        <span style="font-weight: bold">Total Count&nbsp;&nbsp;
                            {{ $count }}
                            {{-- add under this --}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input class="form-check-input" id="customer_profile_enable" type="text" name="customer_profile_enable"
        value="{{ $settings->customer_profile_enable }}" hidden>
    <input class="form-check-input" id="order_batch_enable" type="text" name="order_batch_enable"
        value="{{ $settings->order_batch_enable }}" hidden>
    <div id="call-status" class="modal fade"></div>
    <div id="status-gender" class="modal fade"></div>
    <div id="status-resources" class="modal fade"></div>
@endsection
@section('scripts')
    <script>
        $(document).on('change', '#reportrange ,#status, #id', function() {
            table.ajax.reload();
        })
        $(document).on('click', '.date_range ', function() {
            let report = $(this).attr('id');
            $('#status').val(report);
            localStorage.setItem("dropstatus", report);
            table.ajax.reload();
        })
        $(document).on('click', '#add', function() {
            $('#call-status').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#call-status').modal('show');
            })
        });
        $(document).on('change', '#call_status', function() {
            let val = $(this).val();

            if (val === 'hold_oders') {
                $('.response').attr('hidden', true);
                $('.call_date').attr('hidden', false);
            } else {
                $('.response').attr('hidden', false);
                $('.call_date').attr('hidden', true);
                $('.next_call_date').val('');
            }
            if (val === 'confirm' || val === 'cancel' || val === 'not_confirm') {
                $('#call_status_sms').prop('checked', true);
                $("#call_status_sms").prop("disabled", false);
            } else {
                $('#call_status_sms').prop('checked', false);
                $("#call_status_sms").prop("disabled", true);
            }
        })

        $(document).on('click', '#update_payment', function() {
            let call_status = $('#call_status').val();
            let call_status_reason = $('#call_status-reson').val();
            let sale_note = $('#sale_note').val();
            let next_call_date = $('.next_call_date').val();
            let id = $('#sale_id').val();
            let user_ids = $('#user_ids').val();
            let remark = $('#remark').val();
            var call_status_sms = "0";
            if ($('#call_status_sms').prop("checked") == true) {
                call_status_sms = "1";
            }
            let url = "{{ route('call-status.update-status') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'call_status': call_status,
                    'id': id,
                    'user_ids': user_ids,
                    'remark': remark,
                    'call_status_reason': call_status_reason,
                    'next_call_date': next_call_date,
                    'call_status_sms': call_status_sms,
                    'sale_note': sale_note
                },
                success: function(response) {
                    if (response == 'ok') {
                        $('#call-status').modal('hide');
                        document.location.reload();
                        table.ajax.reload();
                    }
                }
            });
        });
        $(document).on('click', '#gender_change_status', function() {
            $('#status-gender').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#status-gender').modal('show');
            })
        });

        $(document).on('click', '#update_gender_status', function() {
            let gender = $('#gender').val();
            let id = $('#sale_id').val();
            let url = "{{ route('gender-status.update-status') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'gender': gender,
                    'id': id,
                },
                success: function(response) {
                    $('#status-gender').modal('hide');
                    $.toast({
                        heading: 'Successfully update.!',
                        text: response.msg,
                        position: 'top-right',
                        bgColor: '#1ecab8',
                        icon: 'success',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    })
                    document.location.reload();
                    table.ajax.reload();
                }
            });
        });
        $(document).on('click', '#resources_change_status', function() {
            $('#status-resources').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#status-resources').modal('show');
            })
        });

        $(document).on('click', '#update_resources_status', function() {
            let resources = $('#resources').val();
            let id = $('#sale_id').val();
            let url = "{{ route('resources-status.update-status') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'resources': resources,
                    'id': id,
                },
                success: function(response) {
                    $('#status-resources').modal('hide');
                    $.toast({
                        heading: 'Successfully update.!',
                        text: response.msg,
                        position: 'top-right',
                        bgColor: '#1ecab8',
                        icon: 'success',
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    })
                    document.location.reload();
                    table.ajax.reload();
                }
            });
        });
        $(document).on('click', '.submit-filters', function(e) {
            e.preventDefault()
            let data_type = $(this).data('type');
            $('#data_type').val(data_type);
            $('#filter_form').submit();
        });
        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#date span').html(start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'));
        }
        var current_year = (new Date()).getFullYear() + "-01-01";
        $('#date').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'All Data': ['2020-01-01', moment()],
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Day before yesterday': [moment().subtract(2, 'days'), moment().subtract(2, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
                    'month')],
                'Last 6 Months': [moment().subtract(5, 'month'), moment()],
            },
            locale: {
                format: 'Y-MM-DD'
            }
        }, cb);
        $(document).ready(function() {
            var getUrlParameter = function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;
                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };
            var report_date = getUrlParameter('dates');
            myString = report_date.split('+-+').join('/');
            var result = myString.split('/');
            $('#date').daterangepicker({
                startDate: result[0],
                endDate: result[1],
                ranges: {
                    'All Data': ['2020-01-01', moment()],
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                locale: {
                    format: 'Y-M-DD'
                }
            });

        });

        document.addEventListener('DOMContentLoaded', function () {
            const storedDataType = document.getElementById('data_type').value;            
            if (storedDataType) {
                document.querySelectorAll('.submit-filters').forEach(function (button) {
                    if (button.getAttribute('data-type') === storedDataType) {
                        button.classList.add('active');
                    }
                });
            }
        });

    </script>
@endsection