@extends('layouts.whatsapp')
@section('content')
<div class="row">
    <div class="col-md-12">
        <h1>Send Recieve API</h1>
        <div class="card">
            <div class="card-header">
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <label class="form-label" for="customer_name">Customer Name</label>
                        <input type="text" class="form-control" name="customer_name" id="customer_name"/>
                    </div>
                    <div class="col">
                        <label class="form-label" for="town">Customer Location</label>
                        <input type="text" class="form-control" name="town" id="town"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label class="form-label" for="make_model">Make/Model Of Car</label>
                        <input type="text" class="form-control" name="make_model" id="make_model"/>
                    </div>
                    <div class="col">
                        <label class="form-label" for="mileage">Mileage Of Car</label>
                        <input type="text" class="form-control" name="mileage" id="mileage"/>
                    </div>
                    <div class="col">
                        <label class="form-label" for="year_manufacture">Year Of Manufacture Of Car</label>
                        <input type="text" class="form-control" name="year_manufacture" id="year_manufacture"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <label class="form-label">Message</label>
                                <textarea name="message" id="message" class="form-control" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <button class="btn btn-primary mt-2" id="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col" id="show_message">

                    </div>
                </div>
                <hr>
                <div class="row mt-4">
                    <div class="col">
                        <a href="{{asset('Send Recieve Api.postman_collection.json')}}" download="Send Recieve Api.postman_collection.json">Download Send Recieve Api.postman_collection.json</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script>
    $('#submit').on('click', function(e) {
        e.preventDefault();
        let url = "{{route('sendRecieve.api')}}";
        let message = $('#message').val();
        let customer_name = $('#customer_name').val();
        let town = $('#town').val();
        let make_model = $('#make_model').val();
        let mileage = $('#mileage').val();
        let year_manufacture = $('#year_manufacture').val();
        $.ajax({
            type: "POST",
            url: url,
            headers: {"Authorization": "Bearer tzIe5Sr1tksM809Yq5vd3hp3lldNDG9F"},
            data: {'message':message,'customer_name':customer_name,'town':town,'make_model':make_model,'mileage':mileage,'year_manufacture':year_manufacture},
            success: function(msg) {
                let message = msg.message;
                console.log(msg);
                $('#show_message').html(message);
                $('#show_json_message').text(JSON.stringify(msg));
            },
            error: function(error){
                let html = `<h6 class="text-danger">Error: ${error.responseJSON.message}</h6>`
                $('#show_message').html(html);
            }
        });
    });
</script>
@endpush