@extends('layouts.app')
@section('content')
<style>
  label.error {
    color: red;
    font-size: 0.9em;
    margin-top: 4px;
    display: block;
  }
</style>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
    <div class="page-wrapper">
        <div class="row page-titles">

            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.vendor_plural2') }}</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{!! route('vendors') !!}">{{ trans('lang.vendor_plural2') }}</a>
                    </li>
                    <li class="breadcrumb-item active">{{ trans('lang.create_vendors') }}</li>
                </ol>
            </div>
            <div>
                <form action="{{ route('vendors.store') }}" id="vendorForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div id="data-table_processing" class="dataTables_processing panel panel-default"
                            style="display: none;">{{ trans('lang.processing') }}
                        </div>
                        <div class="error_top"></div>
                        @include('alerts.error_messages')
                        <div class="row restaurant_payout_create">
                            <div class="restaurant_payout_create-inner">
                                <fieldset>
                                    <legend>{{ trans('lang.vendor_user_details') }}</legend>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.first_name') }}</label>
                                        <div class="col-7">
                                            <input type="text" class="form-control user_first_name" required
                                                onkeypress="return chkNumbers2(event,'error4')"  value="{{ old('first_name') }}" name="first_name">
                                            <div id="error4" class="err"></div>

                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_first_name_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.last_name') }}</label>
                                        <div class="col-7">
                                            <input type="text"  value="{{ old('last_name') }}" name="last_name" class="form-control user_last_name"
                                                onkeypress="return chkNumbers2(event,'error5')">
                                            <div id="error5" class="err"></div>

                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_last_name_help') }}
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.email') }}</label>
                                        <div class="col-7">
                                            <input type="email"  value="{{ old('email') }}" name="email" class="form-control user_email" required>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_email_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.password') }}</label>
                                        <div class="col-7">
                                            <input type="password" name="password" class="form-control user_password"
                                                required>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.user_password_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">Phone</label>
                                        <div class="col-7 d-flex align-items-start">
                                            <input id="phone2" type="tel" name="user_phone_display" class="form-control"
                                                value="{{ old('phone_number', $phone_number ?? '') }}" />
                                        </div>

                                        <input type="hidden" name="user_phone_country_code" id="phone_country_code2"
                                            value="{{ old('phone_country_code', $phone_country_code ?? '') }}">
                                        <input type="hidden" name="phone_number" id="phone_number2"
                                            value="{{ old('phone_number', $phone_number ?? '') }}">

                                        <div id="phone_error" class="text-danger"></div>
                                        <small class="form-text text-muted w-50">Enter your phone number with
                                            country.</small>
                                    </div>

                                    <div class="form-group row width-100">
                                        <label class="col-3 control-label">{{ trans('lang.profile_image') }}</label>
                                        <input type="file" name="profile_picture" onChange="handleFileSelectowner(event)"
                                            class="col-7">
                                        <div id="uploding_image_owner"></div>
                                        <div class="uploaded_image_owner" style="display:none;"><img
                                                id="uploaded_image_owner" src="" width="150px" height="150px;">
                                        </div>
                                    </div>

                                </fieldset>

                                <fieldset>
                                    <legend>{{ trans('lang.business_details') }}</legend>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.business_name') }}</label>
                                        <div class="col-7">
                                            <input  value="{{ old('business_name') }}" name="business_name" type="text" class="form-control restaurant_name"
                                                required>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.restaurant_name_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Category Dropdown --}}
                                    {{-- <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.category') }}</label>
                                        <div class="col-7">
                                            <select id="category" name="category" class="form-control" required>
                                                <option value="">{{ trans('lang.select_cuisines') }}</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.restaurant_cuisines_help') }}
                                            </div>
                                        </div>
                                    </div> --}}

                                    {{-- Subcategory Dropdown (Multiselect) --}}
                                    {{-- <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.sub_category') }}</label>
                                        <div class="col-7">
                                            <select id="subcategories" name="subcategories[]" class="form-control" multiple
                                                required>
                                             
                                            </select>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.restaurant_cuisines_help') }}
                                            </div>
                                        </div>
                                    </div> --}}

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">Phone</label>
                                        <div class="col-7 d-flex align-items-start">
                                            <input id="phone" type="tel" name="phone_display"
                                                class="form-control"
                                                value="{{ old('phone_display', $customer->phone ?? '') }}" />
                                        </div>

                                        <input type="hidden" name="phone_country_code" id="phone_country_code"
                                            value="{{ old('phone_country_code', $customer->phone_code ?? '') }}">
                                        <input type="hidden" name="phone_number" id="phone_number"
                                            value="{{ old('phone_number', $customer->phone ?? '') }}">

                                        <div id="phone_error" class="text-danger"></div>
                                        <small class="form-text text-muted w-50">Enter your phone number with
                                            country.</small>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.restaurant_address') }}</label>
                                        <div class="col-7">
                                            <input type="text" value="{{ old('address') }}" name="address" class="form-control restaurant_address"
                                                required>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.restaurant_address_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-100">
                                        <div class="col-12">
                                            <h6>* Don't Know your cordinates ? use <a target="_blank"
                                                    href="https://www.latlong.net/">Latitude
                                                    and Longitude Finder</a></h6>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.restaurant_latitude') }}</label>
                                        <div class="col-7">
                                            <input name="latitude"  value="{{ old('latitude') }}" class="form-control restaurant_latitude"
                                                step="any" type="number" min="-90" max="90">
                                            <div class="form-text text-muted">
                                                {{ trans('lang.restaurant_latitude_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label
                                            class="col-3 control-label">{{ trans('lang.restaurant_longitude') }}</label>
                                        <div class="col-7">
                                            <input name="longitude"  value="{{ old('longitude') }}" class="form-control restaurant_longitude"
                                                step="any" type="number" min="-180" max="180">
                                            <div class="form-text text-muted">
                                                {{ trans('lang.restaurant_longitude_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row width-50">
                                        <label class="col-3 control-label">{{ trans('lang.restaurant_image') }}</label>
                                        <div class="col-7">
                                            <input type="file" name="image"
                                                onChange="handleFileSelect(event,'photo')">
                                            <div id="uploding_image_restaurant"></div>
                                            <div class="uploaded_image" style="display:none;"><img id="uploaded_image"
                                                    src="" width="150px" height="150px;"></div>
                                            <div class="form-text text-muted">
                                                {{ trans('lang.vendor_image_help') }}
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div class="form-group row width-100">
                                    <label class="col-3 control-label ">{{trans('lang.restaurant_description')}}</label>
                                    <div class="col-7">
                                    <textarea name="description" rows="7" class="restaurant_description form-control"
                                              id="restaurant_description"></textarea>
                                    </div>
                                </div> --}}
                                </fieldset>



                            </div>
                        </div>
                    </div>

                    <div class="form-group col-12 text-center">
                        <button type="submit" class="btn btn-primary  create_restaurant_btn"><i class="fa fa-save"></i>
                            {{ trans('lang.save') }}
                        </button>
                        <a href="{!! route('vendors') !!}" class="btn btn-default"><i
                                class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.1.1/compressor.min.js"
        integrity="sha512-VaRptAfSxXFAv+vx33XixtIVT9A/9unb1Q8fp63y1ljF+Sbka+eMJWoDAArdm7jOYuLQHVx5v60TQ+t3EA8weA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script>

    <script>
        $(document).ready(function() {
            
        // $('#vendorForm').on('submit', function(e) {
        //     e.preventDefault(); // Stop submission
        //     // if (!$(this).valid()) {
        //     //     console.log("Form validation failed");
        //     //     e.preventDefault(); // Stop submission
        //     // } else {
        //     //     console.log("Form is valid");
        //     //     e.preventDefault(); 
        //     // }
        // });
            $('#vendorForm').validate({
                rules: {
                    first_name: {
                        required: true,
                        maxlength: 100
                    },
                    last_name: {
                        required: true,
                        maxlength: 100
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    phone_display: {
                        required: true,
                        digits: true
                    },
                    business_name: {
                        required: true,
                        maxlength: 150
                    },
                    address: {
                        required: true
                    },
                    latitude: {
                        required: true,
                        number: true,
                        min: -90,
                        max: 90
                    },
                    longitude: {
                        required: true,
                        number: true,
                        min: -180,
                        max: 180
                    },
                    image: {
                        extension: "jpg|jpeg|png|gif",
                        filesize: 2 * 1024 * 1024 // 2MB
                    },
                    profile_picture: {
                        extension: "jpg|jpeg|png|gif",
                        filesize: 2 * 1024 * 1024 // 2MB
                    }
                },
                messages: {
                    first_name: {
                        required: "Please enter first name"
                    },
                    last_name: {
                        required: "Please enter last name"
                    },
                    email: {
                        required: "Please enter email",
                        email: "Enter a valid email"
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: "Password must be at least 6 characters long"
                    },
                    phone_display: {
                        required: "Please enter phone number",
                        digits: "Only digits allowed"
                    },
                    business_name: {
                        required: "Business name is required"
                    },
                    address: {
                        required: "Address is required"
                    },
                    latitude: {
                        required: "Latitude is required",
                        number: "Must be a number",
                        min: "Minimum latitude is -90",
                        max: "Maximum latitude is 90"
                    },
                    longitude: {
                        required: "Longitude is required",
                        number: "Must be a number",
                        min: "Minimum longitude is -180",
                        max: "Maximum longitude is 180"
                    },
                    image: {
                        extension: "Only image files (jpg, jpeg, png, gif) are allowed"
                    },
                    profile_picture: {
                        extension: "Only image files (jpg, jpeg, png, gif) are allowed"
                    }
                }
            });

            // Custom validator for file size
            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'File size must be less than 2MB');
        });

    </script>
    <script>
        $(document).ready(function() {
            $('#subcategories').select2({
                placeholder: 'Select Subcategories',
                width: '100%'
            });

            $('#category').on('change', function() {
                const categoryId = $(this).val();

                $('#subcategories').empty(); // Clear old options

                if (categoryId) {
                    $.ajax({
                        url: '{{ route('get.subcategories') }}',
                        type: 'GET',
                        data: {
                            category_id: categoryId
                        },
                        success: function(data) {
                            if (data.length) {
                                $.each(data, function(index, subcategory) {
                                    $('#subcategories').append(
                                        $('<option>', {
                                            value: subcategory.id,
                                            text: subcategory.name
                                        })
                                    );
                                });
                            } else {
                                $('#subcategories').append(
                                    '<option value="">{{ trans('lang.no_subcategories_found') }}</option>'
                                );
                            }
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                }
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const input = document.querySelector("#phone");
            if (!input) return;

            const iti = window.intlTelInput(input, {
                separateDialCode: true,
                initialCountry: "auto",
                geoIpLookup: function(callback) {
                    fetch(
                            "https://ipinfo.io?token=YOUR_TOKEN"
                        ) // ← Optional, replace with your token or remove
                        .then(res => res.json())
                        .then(data => callback(data.country))
                        .catch(() => callback("us"));
                },
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
            });

            // Restore existing values (Edit case)
            const storedCode = document.getElementById("phone_country_code").value;
            const storedNumber = document.getElementById("phone_number").value;
            if (storedCode) {
                const countryData = iti.getSelectedCountryData();
                const allCountries = window.intlTelInputGlobals.getCountryData();
                const match = allCountries.find(c => `+${c.dialCode}` === storedCode);
                if (match) {
                    iti.setCountry(match.iso2);
                }
            }
            if (storedNumber) {
                input.value = storedNumber;
            }

            // On form submit: update hidden fields
            input.form.addEventListener("submit", function() {
                const selected = iti.getSelectedCountryData();
                document.getElementById("phone_country_code").value = `+${selected.dialCode}`;
                document.getElementById("phone_number").value = input.value.trim();
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const input = document.querySelector("#phone2");
            if (!input) return;

            const iti = window.intlTelInput(input, {
                separateDialCode: true,
                initialCountry: "auto",
                geoIpLookup: function(callback) {
                    fetch(
                            "https://ipinfo.io?token=YOUR_TOKEN"
                        ) // ← Optional, replace with your token or remove
                        .then(res => res.json())
                        .then(data => callback(data.country))
                        .catch(() => callback("us"));
                },
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
            });

            // Restore existing values (Edit case)
            const storedCode = document.getElementById("phone_country_code2").value;
            const storedNumber = document.getElementById("phone_number2").value;
            if (storedCode) {
                const countryData = iti.getSelectedCountryData();
                const allCountries = window.intlTelInputGlobals.getCountryData();
                const match = allCountries.find(c => `+${c.dialCode}` === storedCode);
                if (match) {
                    iti.setCountry(match.iso2);
                }
            }
            if (storedNumber) {
                input.value = storedNumber;
            }

            // On form submit: update hidden fields
            input.form.addEventListener("submit", function() {
                const selected = iti.getSelectedCountryData();
                document.getElementById("phone_country_code2").value = `+${selected.dialCode}`;
                document.getElementById("phone_number2").value = input.value.trim();
            });
        });
    </script>
@endsection