@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/{{$workshop->id }}"
                redirect="/admin/workshops">
                @method('PUT')
                <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.edit_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_workshop') }}</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_branch_name') }}" name="name_en"
                                                value="{{$workshop->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') }}" name="name_ar"
                                                value="{{$workshop->name_ar }}" />
                                        </div>
                                    </div>
                                   
                                </div>
                                <div class="row">
                                    <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"
                                                value="{{$workshop->slot }}" />
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{ __('admin.seat') }} <span class="text-red">*</span></label>
                                            <input type="text" class="form-control numberonly"
                                                placeholder="{{ __('placeholder.enter_sheet') }}" name="seat"
                                                value="{{$workshop->seat }}" />
                                        </div>
                                    </div> --}}
                                </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_branch_admin') }}">
                                                    <option value="">{{ __('admin.select_branch_admin') }}</option>
                                                    @forelse($branchAdmins as $branchAdmin)
                                                        <option value="{{ $branchAdmin->id }}"
                                                            {{ $branchAdmin->id ==$workshop->admin_id ? 'selected' : '' }}>
                                                            {{ $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 }}"
                                                            {{ isset($staffIds) && in_array($staff->id, $staffIds) ? 'selected' : '' }}>
                                                            {{ $staff->name }}</option>
                                                    @empty
                                                    @endforelse
                                                </select>
                                            </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" {{$workshop->status == 'active' ? 'checked' : '' }}
                                            name="status" value="active">
                                        <div>{{ __('admin.active') }}</div>
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="logCheck mb-0">
                                        <input type="radio" {{$workshop->status == 'inactive' ? 'checked' : '' }}
                                            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"
                                    value="{{$workshop->latitude }}" hidden />
                                <input type="text" id="longitude" name="longitude" placeholder="Longitude"
                                    value="{{$workshop->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" value="{{$workshop->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"
                                        value="{{$workshop->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"
                                        value="{{$workshop->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"
                                        value="{{$workshop->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" value="{{$workshop->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" value="{{$workshop->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="{{ $workHours[$weekDay]['day'] ?? '' }}" />{{ ucfirst($weekDay) }}
                                                            </td>
                                                            <td><input type="time" class="form-control border"
                                                                    placeholder="{{ __('placeholder.enter_am_time') }}"
                                                                    name="data[{{ $weekDay }}][opening_time]"
                                                                    value="{{ $workHours[$weekDay]['opening_time'] ?? '' }}" />
                                                            </td>
                                                            <td><input type="time" class="form-control border"
                                                                    placeholder="{{ __('placeholder.enter_pm_time') }}"
                                                                    name="data[{{ $weekDay }}][closing_time]"
                                                                    value="{{ $workHours[$weekDay]['closing_time'] ?? '' }}" />
                                                            </td>
                                                            <!-- <td><input type="time" class="form-control border" placeholder="Enter AM Time" name="data[{{ $weekDay }}][break_start]" value="{{ $workHours[$weekDay]['break_start'] ?? '' }}" /></td> -->
                                                            <!-- <td><input type="time" class="form-control border" placeholder="Enter PM Time" name="data[{{ $weekDay }}][break_end]" value="{{ $workHours[$weekDay]['break_end'] ?? '' }}" /></td> -->
                                                            <td>
                                                                <select class="form-control selectpicker"
                                                                    name="data[{{ $weekDay }}][status]">
                                                                    @foreach ($branchStatus as $status)
                                                                        <option value="{{ $status }}"
                                                                            {{ isset($workHours[$weekDay]['status']) && $workHours[$weekDay]['status'] == $status ? 'selected' : '' }}>
                                                                            {{ ucwords($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() {
            const devicelatitude = parseFloat(document.getElementById("latitude").value);
            const devicelongitude = parseFloat(document.getElementById("longitude").value);

            if (devicelatitude === '' && devicelongitude === '' && 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() {
            const latitude = parseFloat(document.getElementById("latitude").value);
            const longitude = parseFloat(document.getElementById("longitude").value);
            if (latitude && longitude) {
                initMap(latitude, longitude);
            }

            // 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);

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            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.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("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