@extends('layouts.dashboard')

@section('content')

<style>
    #create-vendor-form {
        display: none;
    }

    .show-form {
        display: block !important;
    }

</style>

<div class="content-wrapper" style="min-height: 241px;">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Add Vendor</h1>
                </div>
                <div class="col-sm-6">
                    <a href="{{ url('/user/vendorlist') }}" class="btn btn-success float-right">All Vendors</a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="row">
            <div style="margin-left:auto; margin-right:auto;" class="col-md-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h3>Verify Vendor</h3>
                                <form id="checkVendorForm" action="{{ route('check-vendor') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="phone">Contact <span style="color:red;">*</span></label>
                                        <input type="text" name="phone" class="form-control" required pattern="\d{10}" title="Please enter a 10-digit phone number">
                                    </div>
                                    <div class="form-group">
                                        <label for="user_type">User Type</label>
                                        <input type="text" name="user_type" class="form-control" value="vendor" disabled>
                                    </div>
                                    <button type="button" class="btn btn-primary" onclick="checkVendor()">Submit</button>
                                </form>
                            </div>
                        </div>

                        <div class="card" id="create-vendor-form">
                            <div class="card-body">
                                <h3>Register New Vendor</h3>
                                <form id="addVendorForm" action="{{ route('create-vendor') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="phone">Contact <span style="color:red;">*</span></label>
                                        <input type="text" name="phone" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="user_type">User Type <span style="color:red;">*</span></label>
                                        <input type="text" name="user_type" class="form-control" value="vendor" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Display Name <span style="color:red;">*</span></label>
                                        <input type="text" name="name" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="email_id">Email ID <small>(optional) <span style="color:red;">Add Email id for receive otp on email</span></small></label>
                                        <input type="email" name="email_id" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="company_name">Company Name <small>(optional)</small></label>
                                        <input type="tet" name="company_name" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="alternet_number">Alternative Number <small>(optional)</small></label>
                                        <input type="text" name="alternet_number" class="form-control">
                                    </div>
                                    <button type="button" class="btn btn-success" onclick="createVendor()">Register Client</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function checkVendor() {

            var phoneNumber = $('#checkVendorForm input[name="phone"]').val();

            if (!phoneNumber || phoneNumber.length < 10) {
                Swal.fire({
                    title: 'Validation Error!',
                    text: 'Please enter a valid 10-digit phone number.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                });
                return; 
            }

            $.ajax({
                type: 'POST',
                url: '{{ route('check-vendor') }}',
                data: $('#checkVendorForm').serialize(),
                success: function (response) {
                    if (response.userExists) {
                        Swal.fire({
                            title: 'User Exists!',
                            text: 'The Vendor is already exists in the system.',
                            icon: 'info',
                            confirmButtonText: 'OK',
                        }).then((result) => {
                            if (!result.isConfirmed) {
                            } else {
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Register New Vendor!',
                            text: 'Click on "OK" button to Register New Vendor.',
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonText: 'OK',
                            cancelButtonText: 'Cancel',
                        }).then((result) => {
                            if (!result.isConfirmed) {
                            } else {
                                var verifiedContact = $('#checkVendorForm input[name="phone"]').val();
                                $('#create-vendor-form input[name="phone"]').val(verifiedContact);
                                $('#create-vendor-form').addClass('show-form');
                            }
                        });
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        function createVendor() {
            var formData = $('#addVendorForm').serialize();
            console.log(formData);

            var displayName = $('#addVendorForm input[name="name"]').val();

            if (!displayName || displayName.length < 3) {
                Swal.fire({
                    title: 'Validation Error!',
                    text: 'Please enter a valid Vendor Name.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                });
                return; 
            }

            $.ajax({
                type: 'POST',
                url: '{{ route('create-vendor') }}',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        title: 'Success!',
                        text: 'User Details Added. Click on the OK button to add services and location',
                        icon: 'success',
                        confirmButtonText: 'OK',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var userId = response.body.user_id;
                            var redirectUrl = '{{ url('/user/vendorDetails') }}/' + userId;
                            window.location.href = redirectUrl;
                        }
                    });
                },
                error: function (error) {
                    console.log(error);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Something went wrong while creating the user.',
                        icon: 'error',
                        confirmButtonText: 'OK',
                    });
                }
            });
        }

    </script>

@endsection