@extends('admin::layouts.app')

@section('content')
<section class="content mb-5">
    <div class="container-fluid">
        <form class="form" role="post-data" method="POST" action="/api/admin/workshops" redirect="/admin/workshops" enctype="multipart/form-data">
            <div class="row titlepad publsih-sticky">
                <div class="col-md-12">
                    <div class="mt-3 mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <h4>{{ __('admin.my_workshop') }}</h4>
                            <p class="page-sub-head">{{ __('admin.add_workshop') }}</p>

                        </div>
                        <div class="col-md-4 text-sm-right mt-2">
                            <button type="button" class="btn-md px-3 py-2 btn-primary" role="button" data-request="ajax-submit" data-target="[role=post-data]"><i class="fa fa-check-square-o"></i>
                                {{ __('admin.submit') }}</button>
                            <a href="javascript:history.back()" class="btn-md px-3 py-2 btn-secondary"><i class="fa fa-chevron-circle-left"></i> {{ __('static.cancel') }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="tabData mt-4">
                        <h6>{{ __('admin.enter_the_details_below_for_create_edit_workshops') }}</h6>
                        <div class="mt-2 mb-2">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        @if (auth()->user()->hasRole([app\helpers\ConstantHelper::INDIVIDUAL_USER]))
                        <input type="hidden" name="admin_id" value="{{ auth()->user()->id }}" />
                        {{-- <input type="hidden" name="staff_id[]" value="{{ auth()->user()->id }}" /> --}}
                        @endif
                        <div class="pb-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>{{ __('admin.workshop_name_in_english') }} <span class="text-red">*</span></label>
                                        <input type="text" class="form-control" placeholder="{{ __('placeholder.enter_workshop_name_english') }}" name="name_en" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>{{ __('admin.workshop_name_in_arabic') }} <span class="text-red">*</span></label>
                                        <input type="text" class="form-control" placeholder="{{ __('placeholder.enter_workshop_name_arabic') }}" name="name_ar" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>{{ __('admin.slot_in_min') }} <span class="text-red">*</span></label>
                                        <input type="text" class="form-control numberonly" placeholder="{{ __('placeholder.enter_slot') }}" name="slot" />
                                    </div>
                                </div>

            
                    </div>
                    <div class="row">
                     
               
    </div>
    @if (auth()->user()->hasRole([app\helpers\ConstantHelper::BUSINESS_USER]))
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>{{ __('admin.select_workshop_admin') }}</label>
                <select name="admin_id" class="select2 form-control" data-placeholder="{{ __('placeholder.choose_workshop_admin') }}">
                    <option value="">{{ __('admin.select_workshop_admin') }}</option>
                    @forelse($branchAdmins as $branchAdmin)
                    <option value="{{ $branchAdmin->id }}">{{ $branchAdmin->name }}
                    </option>
                    @empty
                    @endforelse
                </select>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>{{ __('admin.select_staff') }} <span class="text-red">*</span></label>
                <select name="staff_id[]" class="select2 form-control" data-placeholder="{{ __('placeholder.choose_staff') }}" multiple>
                    @forelse($staffs as $staff)
                    <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                    @empty
                    @endforelse
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>{{ __('admin.workshop_image') }} <span class="text-red">*</span></label>
                <input type="file" class="form-control numberonly"  name="workshop_image" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>{{ __('admin.workshop_owner_image') }} <span class="text-red">*</span></label>
                <input type="file" class="form-control numberonly" name="owner_image" />
            </div>
        </div>
    </div>
    @endif
    </div>
    </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link text-black shadow-none pl-0 pb-0 staturightghead">{{ __('admin.status_update') }}</button>
                </h5>
            </div>
            <div class="card-body">
                <div>
                    <label class="logCheck mb-3">
                        <input type="radio" checked name="status" value="active">
                        <div>{{ __('admin.active') }}</div>
                        <span class="checkmark"></span>
                    </label>

                    <label class="logCheck mb-0">
                        <input type="radio" name="status" value="inactive">
                        <div>{{ __('admin.inactive') }}</div>
                        <span class="checkmark"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="tabData">
            <div class="">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>{{ __('admin.select_address') }} <span class="text-red">*</span></label>
                            <input id="map-search" class="form-control searchinput search-address controls" type="text" placeholder="{{ __('placeholder.search_address') }}" style="position: absolute; right: 72px; top: 36px; z-index: 1;" />
                            <div class="position-relative">
                                <div id="map" style="height: 500px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link text-black shadow-none pl-0 pb-0 staturightghead">{{ __('admin.selected_manually_address') }}</button>
                </h5>
            </div>

            <div class="card-body">
                <input type="text" id="latitude" name="latitude" placeholder="Latitude" hidden />
                <input type="text" id="longitude" name="longitude" placeholder="Longitude" hidden />
                <div class="form-group">
                    <label>{{ __('admin.country') }} <span class="text-red">*</span></label>
                    <input type="text" class="form-control border" placeholder="{{ __('placeholder.enter_country') }}" id="country" name="country" />
                </div>
                <div class="form-group">
                    <label>{{ __('admin.state') }} <span class="text-red">*</span></label>
                    <input type="text" class="form-control border" placeholder="{{ __('placeholder.enter_state') }}" id="state" name="state" />
                </div>
                <div class="form-group">
                    <label>{{ __('admin.city') }} <span class="text-red">*</span></label>
                    <input type="text" class="form-control border" placeholder="{{ __('placeholder.enter_city') }}" id="city" name="city" />
                </div>

                <div class="form-group">
                    <label>{{ __('admin.area') }} <span class="text-red">*</span></label>
                    <input type="text" class="form-control border" placeholder="{{ __('placeholder.enter_area') }}" id="area" name="area" />
                </div>

                <div class="form-group">
                    <label>{{ __('admin.address') }} <span class="text-red">*</span></label>
                    <input type="text" class="form-control border" placeholder="{{ __('placeholder.enter_address') }}" id="address" name="address" />
                </div>

                <div class="form-group">
                    <label>{{ __('admin.postal_code') }} <span class="text-red">*</span></label>
                    <input type="text" class="form-control border" placeholder="{{ __('placeholder.enter_postal_code') }}" id="postal_code" name="postal_code" />
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="tabData">
            <div class="pb-4">
                <div class="row">
                    <div class="col-md-12">
                        <label>{{ __('admin.working_hours') }} <span class="text-red">*</span></label>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered admintable border-0 working-table" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th>Sr.No.</th>
                                        <th>{{ __('admin.weekDays') }}</th>
                                        <th>{{ __('admin.opening_time') }}</th>
                                        <th>{{ __('admin.closing_time') }}</th>
                                        <!-- <th>Break Start</th>
                                                                                                                                                                        <th>Break End</th> -->
                                        <th>{{ __('admin.status') }}</th>
                                    </tr>
                                </tbody>
                                <tbody>
                                    @foreach ($weekDays as $key => $weekDay)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td><input type="hidden" name="data[{{ $weekDay }}][day]" value="{{ $weekDay }}" />{{ __('static.' . $weekDay) }}
                                        </td>
                                        <td><input type="time" class="form-control border" placeholder="{{ __('placeholder.enter_am_time') }}" name="data[{{ $weekDay }}][opening_time]" /></td>
                                        <td><input type="time" class="form-control border" placeholder="{{ __('placeholder.enter_pm_time') }}" name="data[{{ $weekDay }}][closing_time]" /></td>
                                        <!-- <td><input type="time" class="form-control border"
                                                                                                                                                                                    placeholder="Enter AM Time"
                                                                                                                                                                                    name="data[{{ $weekDay }}][break_start]" /></td>
                                                                                                                                                                            <td><input type="time" class="form-control border"
                                                                                                                                                                                    placeholder="Enter PM Time"
                                                                                                                                                                                    name="data[{{ $weekDay }}][break_end]" /></td> -->
                                        <td>
                                            <select class="form-control selectpicker" name="data[{{ $weekDay }}][status]">
                                                @foreach ($branchStatus as $status)
                                                <option value="{{ $status }}">
                                                    {{ __('static.'.$status) }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </form>
    </div>
</section>
@endsection
@section('script')
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.MAP_API_KEY') }}&callback=initAutocomplete&libraries=places&v=weekly" defer></script>
<script type="text/javascript">
    let marker; // Declare marker globally
    document.addEventListener("DOMContentLoaded", function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    curlatitude = position.coords.latitude;
                    curlongitude = position.coords.longitude;
                    initMap(curlatitude, curlongitude);

                },
                (error) => {
                    console.error("Error getting current location:", error);
                    // Handle error here if needed
                }
            );
        }
    });

    function initAutocomplete() {
        // Create the search box and link it to the UI element.
        const input = document.getElementById("map-search");
        const searchBox = new google.maps.places.SearchBox(input);

        searchBox.addListener("places_changed", () => {
            const places = searchBox.getPlaces();
            if (places.length == 0) {
                return;
            }
            const place = places[0];
            if (place.address_components) {
                updateAddress(place);
            }
            document.getElementById("address").value = place.formatted_address;
            document.getElementById("latitude").value = place.geometry.location.lat();
            document.getElementById("longitude").value = place.geometry.location.lng();

            initMap(place.geometry.location.lat(), place.geometry.location.lng());
        });
    }

    function initMap(latitude, longitude) {
        if (isNaN(latitude) || isNaN(longitude)) {
            latitude = 0; // Default latitude if not provided
            longitude = 0; // Default longitude if not provided
        }

        const map = new google.maps.Map(document.getElementById("map"), {
            center: {
                lat: latitude,
                lng: longitude
            },
            zoom: 13,
            mapTypeId: "roadmap",
        });

        // Show the bounce map
        // marker = new google.maps.Marker({
        //     map,
        //     draggable: true,
        //     animation: google.maps.Animation.DROP,
        //     position: {
        //         lat: latitude,
        //         lng: longitude
        //     },
        // });
        marker = new google.maps.marker.AdvancedMarkerElement({
            map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: {
                lat: latitude,
                lng: longitude
            },
        });

        marker.addListener("click", toggleBounce);

        map.addListener("click", (mapsMouseEvent) => {
            clickedLocation = mapsMouseEvent.latLng;
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                location: clickedLocation
            }, (results, status) => {
                if (status === "OK") {
                    if (results[0]) {
                        const place = results[0];
                        // Extracting components like latitude and longitude
                        if (place.address_components) {
                            updateAddress(place);
                        }
                        // document.getElementById("map-search").value = place.formatted_address;
                        document.getElementById("address").value = place.formatted_address;
                        document.getElementById("latitude").value = clickedLocation.lat();
                        document.getElementById("longitude").value = clickedLocation.lng();
                        initMap(clickedLocation.lat(), clickedLocation
                            .lng()); // Assuming initMap exists
                    } else {
                        console.error("No results found");
                    }
                } else {
                    console.error("Geocoder failed due to: " + status);
                }
                console.log(mapsMouseEvent.latLng);
            });
        });
    }


    function updateAddress(place) {
        document.getElementById("state").value = getComponentValue(place,
            "administrative_area_level_1");
        document.getElementById("city").value = getComponentValue(place,
            "locality");
        document.getElementById("country").value = getComponentValue(place,
            "country");
        document.getElementById("postal_code").value = getComponentValue(place,
            "postal_code");
        document.getElementById("area").value = getComponentValue(place,
            "sublocality_level_1");
    }

    function toggleBounce() {
        if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    function getComponentValue(place, type) {
        for (const component of place.address_components) {
            for (const componentType of component.types) {
                if (componentType === type) {
                    return component.long_name;
                }
            }
        }
        return "";
    }

    window.initAutocomplete = initAutocomplete;
</script>
@endsection