How to echo product_id

To echo the product_id value, you can simply use {{ $product->id }} in your blade template.

In the provided code, the product_id value is already being assigned to the product_id property of the Vue instance. You can access this value in your watch method and pass it along with the date value to your server using Axios.

To display the product_id value in your template, you can add a new element to your HTML and bind it to the product_id property using Vue's data binding syntax. Here's an example:

<div>
  Product ID: <span v-text="product_id"></span>
</div>

This will display the product_id value in the HTML.

Here's the updated code with the changes:

@extends('Admin.master')

@section('title', 'مدیریت گارانتی')

@section('content')

    <div id="app" class="container-fluid">
        <div class="row">
            <div class="me-auto fw-bold fs-3 col-md-3 mb-3">
                <span class="me-2"><i class="far fa-calendar-check"></i></span>
                <span>@yield('title')</span>
            </div>
            <div class="row">
                <div class="col-lg-6 mb-3 datePickerApp">
                    <label for="date" class="col-form-label">تاریخ</label>
                    <date-picker type="date" id="date" name="date" value="{{ old('date') }}" v-model="date"></date-picker>
                </div>
            </div>
            <div id="showType">

            </div>
            <div>
              Product ID: <span v-text="product_id"></span>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <button type="submit" class="btn btn-success">ذخیره</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('script')

    <script src="{{ asset('themes/vue/vue.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment.min.js') }}"></script>
    <script src="{{ asset('themes/vue/moment-jalaali.js') }}"></script>
    <script src="{{ asset('themes/vue/vue-persian-datetime-picker-browser.js') }}"></script>
    <script src="{{ asset('themes/js/axios.min.js') }}"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                dates: [],
                products: [],
                warranties: [],
                date: '',
                product_id: {{ $product->id }},
                warranty_id: {{ $warranty->id }},
            },
            watch: {
                date(newDate) {
                    const showType = document.getElementById('showType');
                    showType.textContent = newDate;
                    axios.get('{{ route('product.warranty.save') }}', {
                        date: newDate,
                        product_id: this.product_id,
                        warranty_id: this.warranty_id,
                    })
                        .then(response => {
                            console.log('Response:', response.data);
                            window.location.href = '{{ route('product.warranty.save') }}';
                        })
                        .catch(error => {
                            console.log('Error:', error);
                        });
                }
            },
            components: {
                DatePicker: VuePersianDatetimePicker
            }
        });
    </script>

@endpush

In the WarrantyController.php file, you can access the product_id value using $request->input('product_id') and echo it to the page. Here's an example:

public function save(Request $request)
{
    $product_id = $request->input('product_id');
    echo "Product ID: $product_id";
}