@php use App\Models\Order\OrderTrackingServices; @endphp
@php /** @var OrderTrackingServices $orderTrackingServices */  @endphp

<div class="card">
    <div class="card-body">
        <label>
            Tracking - {{ $order->cart->shippingMethod?->title }}
        </label>
        <hr>

        <form method="post"
              id="tracking_form">
            {{--                                  action="{{ Helpers::domainroute('admin.page.orders.update-tracking-numbers', ['order' => $order->id]) }}">--}}
            @csrf
            @method('POST')

            <div id="tracking_service_block">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <select name="order_tracking_services_id" class="custom-select">
                                <option value=""> --- Select ---</option>
                                @foreach($orderTrackingServices as $trackingService)
                                    <option value="{{ $trackingService->id }}" {{ $order->order_tracking_services_id === $trackingService->id ? 'selected' : '' }}>
                                        {{ $trackingService->title }}
                                    </option>
                                @endforeach
                            </select>
                            @if ($errors->has('order_tracking_services_id'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('order_tracking_services_id') }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @if($order->tracking_numbers)

                    @foreach($order->tracking_numbers as $key => $tracking_number)

                        <div class="form-row" id="tracking_number_{{ $key }}">
                            <div class="col-md-10">
                                <div class="form-group">
                                    <a href="{{ $order->trackingService->url . $tracking_number}}"
                                       class="track_link" target="_blank" title="Track">Track</a>
                                    <input type="text" class="form-control" name="tracking_numbers[]"
                                           value="{{ $tracking_number }}" required>
                                </div>
                            </div>
                            @if ($loop->first)
                                <div class="col-md-2 text-center">
                                    <i onclick="addTrackingNumberRow(event)"
                                       class="mdi mdi-plus-circle green-plus-icon"></i>
                                </div>
                            @else
                                <div class="col-md-2 text-center">
                                    <i onclick="deleteTrackingNumberRow(event, '#tracking_number_{{ $key }}')"
                                       class="mdi mdi-minus-circle red-minus-icon"></i>
                                </div>
                            @endif
                        </div>
                    @endforeach
                @else

                    <div class="form-row" id="tracking_number_0">
                        <div class="col-md-10">
                            <div class="form-group">
                                <input type="text" class="form-control" name="tracking_numbers[]" value="" required>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <i onclick="addTrackingNumberRow(event)" class="mdi mdi-plus-circle green-plus-icon"></i>
                        </div>
                    </div>

                @endif
            </div>
        </form>

        @if($order->tracking_sent_at)
            <div class="row mt-1 mb-2">
                <div class="col-md-12">
                    <div style="color: black; background-color: #ffffff; text-align: center; border: 1px solid #38a3f8; padding: 10px; border-radius: 5px; }">
                        Mail sent: <strong>{{ $order->tracking_sent_at }}</strong>
                    </div>
                </div>
            </div>
        @endif

        <div class="row mt-1">
            <div class="col-md-6">
                <button onclick="updateTracingNumbers(event)" class="btn btn-primary btn-block" type="submit">
                    Update
                </button>
            </div>
            <div class="col-md-6">
                <button onclick="sendTrackingEmail(event)" class="btn btn-success btn-block" type="submit">
                    Send mail
                </button>
            </div>
        </div>
    </div>
</div><!-- card.Tracking -->

@push('script')

    <script>

        window.updateTracingNumbers = function (e) {

            if (confirm('Do you want to update tracking numbers?') !== true) {
                return;
            }

            let form = $('#tracking_form');

            axios.post(form.attr('action'), form.serialize())
                .then(function (response) {
                    if (!alert(response.data.message)) {
                        window.location.reload();
                    }
                })
                .catch(function (error) {
                    alert(error.response.data.message);
                });
        };

        window.sendTrackingEmail = function (e) {

            if (confirm('do you really want to send an email to the client?') !== true) {
                return;
            }

            axios.post('#', {})
                .then(function (response) {
                    if (!alert(response.data.message)) {
                        window.location.reload();
                    }
                })
                .catch(function (error) {
                    alert(error.response.data.message);
                });
        };

        window.addTrackingNumberRow = function (e) {
            e.preventDefault();
            let trackingNumbersCount = $('input[name*="tracking_numbers"]').length;

            $('#tracking_service_block').append(
                '<div class="form-row" id="tracking_number_' + trackingNumbersCount + '">' +
                '    <div class="col-md-10">' +
                '        <div class="form-group">' +
                '            <input type="text" class="form-control" name="tracking_numbers[]" value="" required>' +
                '        </div>' +
                '    </div>' +
                '    <div class="col-md-2 text-center">' +
                '        <i onclick="deleteTrackingNumberRow(event, \'#tracking_number_' + trackingNumbersCount + '\')"' +
                '           class="mdi mdi-minus-circle red-minus-icon"></i>' +
                '    </div>' +
                '</div>'
            );
        };

        window.deleteTrackingNumberRow = function (e, target) {
            e.preventDefault();
            $(target).remove();
        };

    </script>

@endpush