@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5> <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('follow_up_table') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>Follow Up</h5>
        </div>
    </div>
    <div class="card p-3 m-2">
        <h6>Personal Details</h6>
        <form action="{{ route('add_followup_form') }}" method="POST" id="followupForm">
            @csrf
            <div class="row g-2">
                <div class="col-lg-6">
                    <label class="form-label">Phone Number *</label>
                    <input type="text" class="form-control @error('phone_number') is-invalid @enderror"
                        placeholder="Enter Phone Number" name="phone_number" id="phone_number"
                        value="{{ old('phone_number') }}">
                    @error('phone_number')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-6">
                    <label class="form-label">Name *</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                        id="customer_name" value="{{ old('name') }}" readonly>
                    @error('name')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>Weight(KG)</label>
                    <input type="text" class="form-control @error('weight') is-invalid @enderror" name="weight"
                        value="{{ old('weight') }}">
                    @error('weight')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>Fat(%)</label>
                    <input type="text" class="form-control @error('fat') is-invalid @enderror" name="fat"
                        value="{{ old('fat') }}">
                    @error('fat')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>BMI</label>
                    <input type="text" class="form-control @error('bmi') is-invalid @enderror" name="bmi"
                        value="{{ old('bmi') }}">
                    @error('bmi')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>VF</label>
                    <input type="text" class="form-control @error('vf') is-invalid @enderror" name="vf"
                        value="{{ old('vf') }}">
                    @error('vf')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>BMR</label>
                    <input type="text" class="form-control @error('bmr') is-invalid @enderror" name="bmr"
                        value="{{ old('bmr') }}">
                    @error('bmr')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>BA</label>
                    <input type="text" class="form-control @error('ba') is-invalid @enderror" name="ba"
                        value="{{ old('ba') }}">
                    @error('ba')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>MM %</label>
                    <input type="text" class="form-control @error('mm') is-invalid @enderror" name="mm"
                        value="{{ old('mm') }}">
                    @error('mm')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-3">
                    <label>Next Followup</label>
                    <input type="date" class="form-control @error('next_followup') is-invalid @enderror"
                        name="next_followup" value="{{ old('next_followup') }}">
                    @error('next_followup')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="text-center mt-3">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    Submit
                </button>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $('#phone_number').on('blur', function() {
            let phone = $(this).val();
            $.ajax({
                url: "{{ route('get_customer_name') }}",
                type: "GET",
                data: {
                    phone_number: phone
                },
                success: function(res) {
                    if (res.status) {
                        $('#customer_name').val(res.name);
                    } else {
                        $('#customer_name').val('');
                         showToast(response.message, "error");
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });
        });
    </script>
@endsection