@extends('admin.layouts.app')
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.businesses.index')}}">@lang('admin.businesses')</a></li>
                    <li class="breadcrumb-item active"><a href="{{route('admin.businesses.create')}}"></a>@lang('admin.create')</li>
                </ol>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div id="alert-placeholder"></div>

                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">@lang('admin.create')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form id ="businessForm" action="{{ route('admin.businesses.store') }}" method="POST">
                                    @csrf
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <!-- Business Name -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.name')</label>
                                                    <input type="text" name="name" class="form-control"
                                                        placeholder="@lang('admin.name')">
                                                    <span class="text-danger" id="error-name"></span>
                                                </div>

                                                <!-- Business Logo -->
                                                <div class="mb-3 row">
                                                    <label for="formFile" class="form-label">@lang('user.logo')</label>
                                                    <div class="text-center col-md-10">
                                                        <input class="form-control edit-image" type="file" name="logo"
                                                            accept="image/*" data-business-id="">
                                                        <span class="text-danger" id="error-image"></span>
                                                    </div>
                                                    <div class="text-center col-md-2">

                                                        <img id="edit-preview-image-before-upload"
                                                            src="{{ asset('dummy_user.png') }}" alt="business Image"
                                                            class="img-fluid rounded-circle"
                                                            style="max-width: 70px;width: 70px;height: 70px;">

                                                    </div>
                                                </div>

                                                <!-- Business Status -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.status')</label>
                                                    <select class="form-control" name="status">
                                                        <option value="1">
                                                            @lang('user.active')</option>
                                                        <option value="0">
                                                            @lang('user.Inactive')</option>
                                                    </select>
                                                    <span class="text-danger" id="error-status"></span>
                                                </div>

                                                <!-- Plan -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.plan')</label>
                                                        <select name="plan_id" class="form-control">
                                                            @foreach ($plans as $plan)
                                                                <option value="{{ $plan->id }}">
                                                                    {{ $plan->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    <span class="text-danger" id="error-package"></span>
                                                </div>

                                                <!-- start_date -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.start_date')</label>
                                                    <input type="date" id="start_date" name="start_date" class="form-control">
                                                    <span class="text-danger" id="error-start_date"></span>
                                                </div>
                                                
                                                 <!-- Business price -->
                                                 <div class="mb-3">
                                                    <label class="form-label">@lang('admin.price')</label>
                                                    <input type="number"
                                                        value="{{ isset($business) && !empty($business) ? $business->price : '' }}"
                                                        name="price" class="form-control" placeholder="@lang('admin.price')">
                                                    <span class="text-danger" id="error-price"></span>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.skip_assignee')</label>
                                                    <select class="form-control" name="skip_assignee">
                                                        <option value="1">@lang('admin.yes')</option>
                                                        <option value="0" selected>@lang('admin.no')</option>
                                                    </select>
                                                    <span class="text-danger" id="error-whatsapp_phone_verification_status"></span>
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <!-- WhatsApp Business ID -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.whatsapp_app_id')</label>
                                                    <input type="text" name="whatsapp_app_id" class="form-control"
                                                        placeholder="@lang('admin.whatsapp_app_id')">
                                                    <span class="text-danger" id="error-whatsapp_app_id"></span>
                                                </div>

                                                <!-- WhatsApp Business ID -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.whatsapp_business_id')</label>
                                                    <input type="text" name="whatsapp_business_id"
                                                        class="form-control" placeholder="@lang('admin.whatsapp_business_id')">
                                                    <span class="text-danger" id="error-whatsapp_business_id"></span>
                                                </div>

                                                <!-- WhatsApp Phone Number ID -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.whatsapp_phone_number_id')</label>
                                                    <input type="tel" name="whatsapp_phone_number_id"
                                                        class="form-control" placeholder="@lang('admin.whatsapp_phone_number_id')">
                                                    <span class="text-danger" id="error-whatsapp_phone_number_id"></span>
                                                </div>

                                                <!-- WhatsApp Access Token -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.whatsapp_access_token')</label>
                                                    <textarea name="whatsapp_access_token" class="form-control" placeholder="@lang('admin.whatsapp_access_token')"></textarea>
                                                    <span class="text-danger" id="error-whatsapp_access_token"></span>
                                                </div>

                                                <!-- WhatsApp Phone Verification Status -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.whatsapp_phone_verification_status')</label>
                                                    <select class="form-control" name="whatsapp_phone_verification_status">
                                                        <option value="1">@lang('user.active')</option>
                                                        <option value="0" selected>@lang('user.Inactive')</option>
                                                    </select>
                                                    <span class="text-danger" id="error-whatsapp_phone_verification_status"></span>
                                                </div>

                                                 <!-- Notes -->
                                                 <div class="mb-3">
                                                    <label class="form-label">@lang('admin.notes')</label>
                                                    <textarea name="notes" class="form-control" placeholder="@lang('admin.notes')"></textarea>
                                                    <span class="text-danger" id="error-notes"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <hr>
                                    <div class="form-group" style="display:flex; justify-content: space-around;">
                                        <label>
                                            <input type="radio"  name="option"  value="owner" onclick="showDiv('owner')"> @lang('admin.new_owner')
                                          </label>
                                          <label>
                                            <input type="radio"  checked name="option"  value="select_owner" onclick="showDiv('select_owner')"> @lang('admin.existence_owner')
                                          </label>
                                    </div>
                                   
                                    <div id="select_owner" style="display:block" class="hidden">
                                        <select class="form-control select2-user" name="owner_id">
                                            @foreach ($owners as $owner)
                                                <option value="{{ $owner->id }}"
                                                    {{ isset($business) && !empty($business) && $business->owner_id == $owner->id ? 'selected' : '' }}>
                                                    {{ $owner->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                     
                                    <fieldset id="owner" class="hidden">
                                        <input id="new_owner" type="hidden" name="new_owner" value="0">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.name')</label>
                                                    <input type="text" name="owner_name" class="form-control" placeholder="@lang('admin.name')">
                                                    <span class="text-danger" id="error-owner_name"></span>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.email')</label>
                                                    <input type="email"  autocomplete="off" name="email" class="form-control" placeholder="Email">
                                                    <span class="text-danger" id="error-email"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.mobile')</label>
                                                    <input type="tel" name="mobile" autocomplete="off" class="form-control" placeholder="Mobile">
                                                    <span class="text-danger" id="error-mobile"></span>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.password')</label>
                                                    <input type="password" autocomplete="new-password" name="password" class="form-control"
                                                        placeholder="Password">
                                                    <span class="text-danger" id="error-password"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="formFile" class="form-label">@lang('user.image')</label>
                                            <div class="text-center col-md-10">
                                                <input class="form-control owner-edit-image" type="file" name="image"
                                                    accept="image/*">
                                                <span class="text-danger" id="error-image"></span>
                                            </div>
                                            <div class="text-center col-md-2">
                                                <img id="edit-preview-owner-image-before-upload"
                                                    src="{{ asset('dummy_user.png') }}" alt="user Image"
                                                    class="img-fluid rounded-circle"
                                                    style="max-width: 100px; height: auto;">
                                            </div>
                                        </div>
                                    </fieldset>
                                    <button type="submit" class="btn btn-primary"
                                        style="margin-top: 30px;">Create</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .hidden {
          display: none;
        }
    </style>
@endsection
@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#businessForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var formData = new FormData(this);
                //formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        toastr.success(response.message);
                        window.location.href = response.redirect;
                    },
                    error: function(response) {
                        console.log('Error:', response);
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#error-' + key).text(value[0]);
                            }
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });


            $('.edit-image').change(function() {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#edit-preview-image-before-upload').attr('src', e.target.result);
                };

                reader.readAsDataURL(this.files[0]);
            });

            $('.packagesSelect').select2({
                placeholder: "{{__('admin.roles')}}",
                allowClear: true,
                ajax: {
                    url: "{{ route('admin.fetchPackages') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        // Convert object keys to array of objects
                        var results = Object.keys(data).map(function(key) {
                            return {
                                id: key,
                                text: data[key]
                            };
                        });
                        return {
                            results: results
                        };
                    }
                }
            })

            $('.select2-user').select2({
                placeholder: "{{ __('user.select_an_owner') }}",
                allowClear: true,
                ajax: {
                    url: "{{ route('admin.fetchUsers') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        return {
                            results: data.map(function(user) {
                                return {
                                    id: user.id,
                                    text: user.name + ' (' + user.email + ')'
                                };
                            })
                        };
                    }
                }
            });


            $('.rolesSelect').select2({
                placeholder: "{{ __('admin.roles') }}",
                allowClear: true,
                ajax: {
                    url: "{{ route('admin.fetchAgentRoles') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        // Convert object keys to array of objects
                        var results = Object.keys(data).map(function(key) {
                            return {
                                id: key,
                                text: data[key]
                            };
                        });
                        return {
                            results: results
                        };
                    }
                }
            })

            $('.edit-image').change(function() {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#edit-preview-image-before-upload').attr('src', e.target.result);
                };

                reader.readAsDataURL(this.files[0]);
            });
        });
        function showDiv(id) {
            if(id == "select_owner"){
                $('#new_owner').val(0);
                    $('#select_owner').show();
                    $('#select_owner select').prop('disabled', false);
                    $(this).text("{{__('admin.create')}}");
                    $('#owner').slideUp();
            }else{
                $('#new_owner').val(1);
                    $('#select_owner').hide();
                    $('#select_owner').prop('disabled', true);
                    $(this).text("{{__('admin.select')}}");
                    $('#owner').slideDown();
            }
            var divsToHide = document.querySelectorAll('.hidden');
            for (var i = 0; i < divsToHide.length; i++) {
            divsToHide[i].style.display = 'none';
            }
            document.getElementById(id).style.display = 'block';
        }
    </script>
@endsection