@extends('header.header')
@section('content')


    <div class="header pb-6 d-flex align-items-center" style="min-height: 200px; background-image: url(../assets/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
        <!-- Mask -->
        <span class="mask bg-gradient-default opacity-8"></span>
        <!-- Header container -->

    </div>
    <div class="container-fluid mt--6  ">
        <div class="row">
            <div class="offset-xl-2 col-xl-8 order-xl-1 ">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{__('Create Multiple Shipment Orders')}}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post"  action="{{route('createMultipleShipmentOrder')}}"  enctype="multipart/form-data">
                            @csrf
                            <div class="pl-lg-4" id="form-container">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <label class="form-control-label" for="map1">{{__('Pick Up Location')}}</label>
                                        <div id="map1"  style="height: 200px;"></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="form-control-label" for="map2">{{__('Drop Off Location')}}</label>
                                        <div id="map2" style="height: 200px;"></div>
                                    </div>
                                    <input type="hidden" name="pickUpLatitude[]" id="pickUpLatitude" value="">
                                    <input type="hidden" name="pickUpLongitude[]" id="pickUpLongitude" value="">
                                    <input type="hidden" name="dropOffLatitude[]" id="dropOffLatitude" value="">
                                    <input type="hidden" name="dropOffLongitude[]" id="dropOffLongitude" value="">
                                    <div class="col-lg-12 mt-3">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Order Details')}}</label>
                                            <textarea type="text" id="input-city" name="order_details[]" class="form-control @if($errors->has('order_details')) is-invalid @endif" placeholder="{{__("Order Details")}}"></textarea>
                                        </div>
                                        @error("order_details")
                                        <div class="input-error">{{$message}}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Size')}}</label><br>
                                            <select name="size[]" style="padding: 7px;border-radius: 7px;background: white" value="{{ old('size') }}">
                                                <option disabled selected>Select Size</option>
                                                @foreach($sizes as $size)
                                                    <option value="{{$size->id}}">{{$size->value}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error("size")
                                        <div class="input-error">{{$message}}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Weight')}}</label><br>
                                            <select name="weight[]" style="padding: 7px;border-radius: 7px;background: white" value="{{ old('weight') }}">
                                                <option disabled selected>Select Weight</option>
                                                @foreach($weights as $weight)
                                                    <option value="{{$weight->id}}">{{$weight->from . " - " . $weight->to}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error("weight")
                                        <div class="input-error">{{$message}}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Within time')}}</label><br>
                                            <select name="within_time[]" style="padding: 7px;border-radius: 7px;background: white" value="{{ old('within_time') }}">
                                                <option disabled selected>Select Within</option>
                                                @foreach($withins as $within)
                                                    <option value="{{$within->id}}">{{$within->value}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error("within_time")
                                        <div class="input-error">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <button  type='submit' class="btn btn-primary" >{{__('Finish')}}</button>
                                    <button type="button" class="btn btn-outline-info" onclick="addForm()">{{__('Add Another Shipment Order')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section("js-scripts")
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        const map1 = L.map(`map1`).setView([31.984433, 35.8559306], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map1);
        const marker1 = L.marker([31.984433, 35.8559306]).addTo(map1);
        marker1.bindPopup("اختار موقع الاستلام").openPopup();
        console.log(marker1)
        const map2 = L.map(`map2`).setView([31.984433, 35.8559306], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map2);
        const marker2 = L.marker([31.984433, 35.8559306]).addTo(map2);
        marker2.bindPopup("اختار موقع الإنزال").openPopup();

        moveMarkerOnClick(map1, marker1);
        moveMarkerOnClick(map2, marker2);

        function moveMarkerOnClick(map, marker) {
            map.on('click', function (e) {
                var newLatLng = e.latlng;
                marker.setLatLng(newLatLng);

                document.getElementById(`pickUpLatitude`).value = newLatLng.lat;
                document.getElementById(`pickUpLongitude`).value = newLatLng.lng;
                document.getElementById(`dropOffLatitude`).value = newLatLng.lat;
                document.getElementById(`dropOffLongitude`).value = newLatLng.lng;
            });
        }
    </script>
    <script>
        let formCount = 1;

        function addForm() {
            formCount++;

            const formContainer = document.getElementById("form-container");
            const newForm = document.createElement(`div`);
            formContainer.appendChild(newForm);

            newForm.innerHTML = `
                                      <hr class="my-4" style="font-size:700" id="hr${formCount}">
                                      <a onclick="deleteForm(${formCount})" id="delete${formCount}" class="btn btn-danger" style="display:flex;justify-content:right;height:50px;color:white;width:fit-content;margin-left:80%;margin-bottom:5px">Delete Form</a>
                                      <div class="row" id="${formCount}">
                                      <div class="col-lg-6">
                                          <label class="form-control-label" for="map1${formCount}">Pick Up Location</label>
                                          <div id="map1${formCount}" name="pickUp[]" style="height: 200px;"></div>
                                      </div>
                                      <div class="col-lg-6">
                                          <label class="form-control-label" for="map2${formCount}">Drop Off Location</label>
                                          <div id="map2${formCount}" name="dropOff[]" style="height: 200px;"></div>
                                      </div>
                                      <input type="hidden" name="pickUpLatitude[]" id="pickUpLatitude${formCount}" value="">
                                      <input type="hidden" name="pickUpLongitude[]" id="pickUpLongitude${formCount}" value="">
                                      <input type="hidden" name="dropOffLatitude[]" id="dropOffLatitude${formCount}" value="">
                                      <input type="hidden" name="dropOffLongitude[]" id="dropOffLongitude${formCount}" value="">
                                      <div class="col-lg-12 mt-3">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Order Details')}}</label>
                                            <textarea type="text" id="input-city" name="order_details[]" class="form-control @if($errors->has('order_details')) is-invalid @endif" placeholder="{{__("Order Details")}}"></textarea>
                                        </div>
                                        @error("order_details")
                                            <div class="input-error">{{$message}}</div>
                                        @enderror
                                      </div>
                                      <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Size')}}</label><br>
                                            <select name="size[]" style="padding: 7px;border-radius: 7px;background: white" value="{{ old('size') }}">
                                                <option disabled selected>Select Size</option>
                                                @foreach($sizes as $size)
                                                        <option value="{{$size->id}}">{{$size->value}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error("size")
                                            <div class="input-error">{{$message}}</div>
                                        @enderror
                                      </div>
                                      <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-city">{{__('Weight')}}</label><br>
                                            <select name="weight[]" style="padding: 7px;border-radius: 7px;background: white" value="{{ old('weight') }}">
                                                    <option disabled selected>Select Weight</option>
                                                    @foreach($weights as $weight)
                                                        <option value="{{$weight->id}}">{{$weight->from . " - " . $weight->to}}</option>
                                                    @endforeach
                                            </select>
                                        </div>
                                        @error("weight")
                                            <div class="input-error">{{$message}}</div>
                                        @enderror
                                     </div>
                                     <div class="col-lg-4">
                                        <div class="form-group">
                                          <label class="form-control-label" for="input-city">{{__('Within time')}}</label><br>
                                            <select name="within_time[]" style="padding: 7px;border-radius: 7px;background: white" value="{{ old('within_time') }}">
                                                        <option disabled selected>Select Within</option>
                                                        @foreach($withins as $within)
                                                            <option value="{{$within->id}}">{{$within->value}}</option>
                                                        @endforeach
                                            </select>
                                        </div>
                                        @error("within_time")
                                            <div class="input-error">{{$message}}</div>
                                        @enderror
                                     </div>
            `;

            // Initialize maps and markers for the new form
            const map1 = L.map(`map1${formCount}`).setView([31.984433, 35.8559306], 5);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map1);
            const marker1 = L.marker([31.984433, 35.8559306]).addTo(map1);

            const map2 = L.map(`map2${formCount}`).setView([31.984433, 35.8559306], 5);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map2);
            const marker2 = L.marker([31.984433, 35.8559306]).addTo(map2);

            moveMarkerOnClick(map1, marker1, formCount);
            moveMarkerOnClick(map2, marker2, formCount);
        }

        function moveMarkerOnClick(map, marker, locationId) {
            map.on('click', function (e) {
                var newLatLng = e.latlng;
                marker.setLatLng(newLatLng);

                document.getElementById(`pickUpLatitude${locationId}`).value = newLatLng.lat;
                document.getElementById(`pickUpLongitude${locationId}`).value = newLatLng.lng;
                document.getElementById(`dropOffLatitude${locationId}`).value = newLatLng.lat;
                document.getElementById(`dropOffLongitude${locationId}`).value = newLatLng.lng;
            });
        }


        function deleteForm(formId) {
            const formToRemove = document.getElementById(`${formId}`);
            const RemoveHr = document.getElementById(`hr${formId}`);
            const RemoveDeleteButton = document.getElementById(`delete${formId}`);

            if (formToRemove) {
                formToRemove.remove();
                RemoveHr.remove();
                RemoveDeleteButton.remove();
            } else {
                console.error(`Element with ID 'form${formId}' not found.`);
            }
        }

    </script>
@endsection