@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.edit_vendor') }}</li>
            </ol>
        </div>

        <div>
            <form  id="vendorForm" action="{{ route('vendors.update', $vendor->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <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.admin_area') }}</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" name="first_name"
                                            value="{{ old('first_name', $vendor->user->first_name ?? '') }}" required>
                                    </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" name="last_name" class="form-control"
                                            value="{{ old('last_name', $vendor->user->last_name ?? '') }}">
                                    </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" name="email" class="form-control"
                                            value="{{ old('email', $vendor->user->email ?? '') }}" required>
                                    </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"
                                            placeholder="Leave blank to keep existing password">
                                    </div>
                                </div>

                                <div class="form-group row width-50">
                                    <label class="col-3 control-label">{{ trans('lang.user_phone') }}</label>
                                    <div class="col-7">
                                        <input type="text" name="phone" class="form-control"
                                            value="{{ old('phone', $vendor->user->phone ?? '') }}">
                                    </div>
                                </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" class="col-7">
                                    @if(!empty($vendor->user->profile_picture))
                                        <div class="col-7 offset-3 mt-2">
                                            <img src="{{ asset($vendor->user->profile_picture) }}" width="100" height="100" />
                                        </div>
                                    @endif
                                </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 name="business_name" type="text" class="form-control"
                                            value="{{ old('business_name', $vendor->business_name) }}" required>
                                    </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_number', $vendor->phone ?? '') }}" />
                                        </div>

                                        <input type="hidden" name="phone_country_code" id="phone_country_code"
                                            value="{{ old('phone_country_code', $vendor->phone_code ?? '') }}">
                                        <input type="hidden" name="phone_number" id="phone_number"
                                            value="{{ old('phone_number', $vendor->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.email') }}</label>
                                        <div class="col-7">
                                            <input type="email" name="email" value="{{ old('email', $vendor->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.restaurant_address') }}</label>
                                    <div class="col-7">
                                        <input type="text" name="address" class="form-control"
                                            value="{{ old('address', $vendor->address) }}" required>
                                    </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" class="form-control" type="number" step="any"
                                            value="{{ old('latitude', $vendor->latitude) }}">
                                    </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" class="form-control" type="number" step="any"
                                            value="{{ old('longitude', $vendor->longitude) }}">
                                    </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">
                                        {{-- @if(!empty($vendor->image))
                                            <div class="mt-2">
                                                <img src="{{ asset($vendor->image) }}" width="100" height="100" />
                                            </div>
                                        @endif --}}
                                        <div class="form-text text-muted">
                                                {{ trans('lang.vendor_image_help') }}
                                            </div>
                                    </div>
                                    
                                </div>
                                 @if ($vendor->getMedia('images')->count())
                                <table class="table mt-3">
                                    <thead>
                                        <tr>
                                            <th>{{ trans('lang.image') }}</th>
                                            <th>{{ trans('lang.actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($vendor->getMedia('images') as $media)
                                            <tr>
                                                <td>
                                                    <img src="{{ $media->getUrl() }}" alt="gallery"
                                                        class="img-thumbnail" style="width: 150px;">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                        onclick="deleteMedia('{{ route('stores.media.destroy', [$vendor->id, $media->id]) }}')">
                                                        ✕ Delete
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @endif
                            </fieldset>

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

                <div class="form-group col-12 text-center">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>
                        {{ trans('lang.update') }}
                    </button>
                    <a href="{!! route('vendors') !!}" class="btn btn-default"><i
                            class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                </div>
            </form>
        </div>
    </div>
</div>
 <form id="delete-media-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@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();
            });
        });
         function deleteMedia(url) {
            console.log(url);
            if (confirm('Are you sure you want to delete this image?')) {
                const form = document.getElementById('delete-media-form');
                form.action = url;
                form.submit();
            }
        }
    </script>
@endsection