@extends('business.layouts.app')

@section('content')
<main class="main-content">
    <div x-data="profileCrud()" x-cloak>

        <div class="glass-nav d-flex justify-content-between align-items-center">
            <div>
                <button class="btn btn-white shadow-sm border d-lg-none me-2" @click="sidebarOpen = true">
                    <i class="bi bi-list"></i>
                </button>
                <h4 class="fw-800 mb-0">My Profile</h4>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-xl-5 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <form @submit.prevent="submitForm()">
                            @csrf
                            <div class="form-group mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" x-model="form.name" class="form-control" placeholder="enter your name">
                            </div>
                            <div class="form-group mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" x-model="form.email" class="form-control" placeholder="enter your email address">
                            </div>
                            <div class="form-group mb-3">
                                <label for="whatsapp_no" class="form-label">WhatsApp Number</label>
                                <input type="number" maxlength="10" x-model="form.whatsapp_no" class="form-control" placeholder="enter your whatsapp #">
                            </div>
                            <button class="btn btn-primary" type="submit">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>

    </div>
        
</main>
@endsection
@push('inline-scripts')
    <script>
        function profileCrud() {
            return {
                isLoading: false,
                form: {
                    id: "{{ Auth::user()->id }}",
                    name: "{{ Auth::user()->name }}",
                    email: "{{ Auth::user()->email }}",
                    whatsapp_no: "{{ Auth::user()->whatsapp_no }}",
                },

                submitForm() {
                    //
                },
            };
        }
    </script>
@endpush