@extends('layouts.app')

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />

@section('content')

<div class="page-wrapper ridedetail-page">

    <div class="row page-titles">

        <div class="col-md-5 align-self-center">

            <h3 class="text-themecolor">{{trans('lang.ride_detail')}}</h3>

        </div>

        <div class="col-md-7 align-self-center">

            <ol class="breadcrumb">

                <li class="breadcrumb-item">
                    <a href="{!! url('/dashboard') !!}">{{trans('lang.home')}}</a>
                </li>

                <li class="breadcrumb-item">
                    <a href="{!! route('rides') !!}">{{trans('lang.all_rides')}}</a>
                </li>

                <li class="breadcrumb-item active">
                    {{trans('lang.ride_detail')}}
                </li>

            </ol>

        </div>
    </div>

    <div class="container-fluid">

        <div class="row">

            <div class="col-12">

                <div class="card">
                    <div class="card-body">


                        <div id="data-table_processing" class="dataTables_processing panel panel-default"
                            style="display: none;">{{trans('lang.processing')}}</div>

                        <form method="post" action="{{ route('rides.update',$ride->id) }}" enctype="multipart/form-data">
                            @csrf
                            @method("PUT")
                            <div class="order_detail px-2" id="order_detail">
                                <div class="order_detail-top">
                                    <div class="row" style="border-bottom: 2px solid #03A9F4;">
                                        <div class="order_edit-genrl col-md-6">

                                            <h3>{{trans('lang.general_details')}}</h3>
                                            <div class="order_detail-top-box">

                                                <div class="form-group row widt-100 gendetail-col">
                                                    <label class="col-12 control-label"><strong>{{trans('lang.date_created')}}
                                                            : </strong><span
                                                            id="createdAt">{{ date('d F Y h:i A',strtotime($ride->creer))}}</span></label>
                                                </div>
                                                <style>
                                                    .badge-warning {
                                                        background-color: #FF9800;
                                                    }
                                                </style>
                                                <div class="address order_detail-top-box">

                                                    <div class="form-group row widt-100 gendetail-col">
                                                        <label class="col-12 control-label">
                                                            <strong style="width:30%"> {{trans('lang.status')}} </b> : </strong>
                                                            @if($ride->statut=="completed")
                                                            <span class="badge badge-success">{{'Tamamlandı'}}</span>
                                                            @elseif($ride->statut == "confirmed")
                                                            <span class="badge badge-primary" style="     animation: blink 1s infinite;">{{'Onaylandı'}}</span> @elseif($ride->statut == "OnCrimeScene")
                                                            <span class="badge badge-info" style="     animation: blink 1s infinite;">{{'Olay Yerinde'}}</span>@elseif($ride->statut == "on ride")
                                                            <span class="badge badge-info" style="     animation: blink 1s infinite;">{{'Olay Yerine Gidiyor'}}</span>@elseif($ride->statut == "OnDelivery")
                                                            <span class="badge badge-warning" style="     animation: blink 1s infinite;">{{'Teslimat Noktasına Gidiyor'}}</span>
                                                            @elseif($ride->statut == "new")
                                                            <span class="badge badge-primary" style="     animation: blink 1s infinite;">{{'Yeni'}}</span>
                                                            @elseif($ride->statut=="rejected")
                                                            <span class="badge badge-danger">{{'Reddedildi'}}</span>@elseif($ride->statut=="canceled")
                                                            <span class="badge badge-danger">{{'İptal Edildi'}}</span>
                                                            @elseif($ride->statut=="driver_rejected")
                                                            <span class="badge badge-danger">{{trans("lang.driver_rejected")}}</span>
                                                            @else
                                                            <span class="badge badge-warning">{{ $ride->statut }}<span>
                                                                    @endif</label>
                                                    </div>

                                                    <div class="form-group row widt-100 gendetail-col">
                                                        <label class="col-12 control-label">
                                                            <strong style="width:30%">{{trans('lang.name')}}: </strong>
                                                            <span style="margin-left: 10%;" id="billing_name">{{ $ride->userPreNom}} {{ $ride->userNom}}</span></label>
                                                    </div>
                                                    <div class="form-group row widt-100 gendetail-col">
                                                        <label class="col-12 control-label"><strong
                                                                style="width:30%">{{trans('lang.email')}}
                                                                : </strong><span style="margin-left: 10%;"
                                                                id="billing_email">{{$ride->userEmail}}</span></label>

                                                    </div>
                                                    <div class="form-group row widt-100 gendetail-col">
                                                        <label class="col-12 control-label"><strong
                                                                style="width:30%">{{trans('lang.phone')}}
                                                                : </strong><span style="margin-left: 10%;"
                                                                id="billing_phone">{{$ride->userPhone}}</span></label>

                                                    </div>


                                                </div>
                                                {{-- <div class="form-group row widt-100 gendetail-col">
                                                        <label class="col-12 control-label"><strong>{{trans('lang.number_poeple')}}
                                                : </strong><span
                                                    id="no_of_people">{{ $ride->number_poeple}}</span></label>
                                            </div>

                                            <div class="form-group row widt-100 gendetail-col payment_method">
                                                <label class="col-12 control-label"><strong>{{trans('lang.payment_methods')}}
                                                        : </strong><span id="payment_method">{{$ride->payment_methods}}</span>
                                                </label>
                                            </div>

                                            <div class="form-group row widt-100 gendetail-col payment_method">
                                                <label class="col-12 control-label"><strong>{{trans('lang.total_amount')}}
                                                        : </strong><span id="payment_method">
                                                        @if($currency->symbol_at_right=="true")
                                                        {{ number_format((float)$ride->montant, $currency->decimal_digit).$currency->symbole }}
                                                        @else
                                                        {{ $currency->symbole.number_format((float)$ride->montant, $currency->decimal_digit) }}
                                                        @endif

                                                    </span>
                                                </label>
                                            </div> --}}





                                        </div>

                                    </div>



                                    <div class="col-md-6 order-deta-btm-right" style="border-left: 2px solid #03A9F4;">
                                        <div class="resturant-detail">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h4 class="card-header-title">{{trans('lang.driver_detail')}}</h4>
                                                </div>

                                                <div class="card-body">
                                                    <h5 class="contact-info">{{trans('lang.contact_info')}}:</h5>
                                                    <p><strong>{{trans('lang.name')}}:</strong>
                                                        <span id="vendor_name">{{$ride->driverPreNom}} {{$ride->driverNom}}</span>
                                                    </p>
                                                    <span class="badge badge-warning text-white ml-auto"><i class="fa fa-star"></i>{{$driverRating}}</span>
                                                    <p><strong>{{trans('lang.email')}}:</strong>
                                                        <span id="vendor_email">{{$ride->driverEmail}}</span>
                                                    </p>
                                                    <p><strong>{{trans('lang.phone')}}:</strong>
                                                        <span id="vendor_phone">{{$ride->driverPhone}}</span>
                                                    </p>



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

                                </div>
                                <div class="order-deta-btm mt-4">

                                    <div class="row">

                                        <div class="col-md-6 order-deta-btm-right">
                                            <div class="resturant-detail">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <h4 class="card-header-title">{{trans('lang.ride_detail')}}</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <h5 class="contact-info">{{trans('lang.pickup_location')}}:</h5>
                                                        <p>{{$ride->depart_name}}</p>
                                                        <h5 class="contact-info">{{trans('lang.dropup_location')}}:</h5>
                                                        <p>{{$ride->destination_name}}</p>
                                                    </div>
                                                    <div class="form-group row widt-100 gendetail-col payment_status">
                                                        <label class="col-12 control-label"><strong><b> GPS: </b></strong></label>
                                                        <br>

                                                        <b> Başlangıç Nokta :</b> {{$ride->latitude_depart}},{{$ride->longitude_depart}}
                                                        <br>
                                                        <a href="https://www.google.com/maps?q={{$ride->latitude_depart}},{{$ride->longitude_depart}}"
                                                            target="_blank">Haritada Göster</a>

                                                        <br><br>

                                                        <b> Teslimat Nokta :</b> {{$ride->latitude_arrivee}},{{$ride->longitude_arrivee}}
                                                        <br>
                                                        <a href="https://www.google.com/maps?q={{$ride->latitude_arrivee}},{{$ride->longitude_arrivee}}"
                                                            target="_blank">Haritada Göster</a>

                                                        <br><br>

                                                        <a class="btn btn-primary"
                                                            href="https://www.google.com/maps/dir/{{$ride->latitude_depart}},{{$ride->longitude_depart}}/{{$ride->latitude_arrivee}},{{$ride->longitude_arrivee}}"
                                                            target="_blank">
                                                            ➤ İki Nokta Arası Rotayı Haritada Göster
                                                        </a>
                                                    </div>

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

                                        <div class="order_edit-genrl col-md-6" style="border-left: 2px solid #03A9F4;">
                                            <div class="card-header">
                                                <h4>{{ trans('lang.customer_details')}}</h4>
                                            </div>


                                            <div class="address order_detail-top-box">


                                                <p><strong>DijiAlfa Takip No:</strong>
                                                    <span id="billing_phone">{{$ride->dijialfa_id}}</span>
                                                </p>
                                                <p><strong>DijiAlfa Müşteri Ad:</strong>
                                                    <span id="billing_phone">{{$ride->dijialfa_musteri_adi}}</span>
                                                </p>
                                                <p><strong>DijiAlfa Müşteri Tel:</strong>
                                                    <span id="billing_phone">{{$ride->dijialfa_musteri_tel}}</span>
                                                </p>
                                                <p><strong>DijiAlfa Müşteri Plaka:</strong>
                                                    <span id="billing_phone">{{$ride->dijialfa_musteri_plaka}}</span>
                                                </p>
                                                <p><strong>Olay No / Olay Adı:</strong>
                                                    <span id="billing_phone">{{$ride->event_type}} / {{$ride->event_name}}</span>
                                                </p>
                                                <p><strong>Marka Model:</strong>
                                                    <span id="billing_phone">{{$ride->dijialfa_marka_model}}</span>
                                                </p>
                                            </div>


                                        </div>


                                    </div>
                                    <div class="row">

                                        <div class="col-12">

                                            <div class="box">
                                                <div class="box-header bb-2 border-primary">
                                                    <h3 class="box-title">{{trans('lang.map_view')}}</h3>
                                                </div>
                                                <div class="box-body">
                                                    <div id="map" style="height:400px">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-deta-btm mt-4">
                                    <div class="row">
                                        <div class="col-md-7 order-deta-btm-left">
                                            <div class="card">
                                                {{--<div class="order_addre-edit">
															<div class="card-header bg-white">
																<h3>{{ trans("lang.customer") }} {{ trans("lang.photo") }}</h3>
                                            </div>

                                            @php
                                            $images = json_decode($ride->file_images, true);
                                            @endphp

                                            @if(!empty($images))
                                            <div class="d-flex flex-wrap gap-2 p-3">
                                                @foreach($images as $index => $img)
                                                <div class="image-thumb-wrapper">
                                                    <img src="{{ $img }}"
                                                        alt="Photo {{ $index+1 }}"
                                                        class="img-thumbnail image-thumb"
                                                        onclick="openImageModal('{{ $img }}')" style="max-width: 53%;">
                                                </div>
                                                @endforeach
                                            </div>
                                            @else
                                            <p class="p-3 text-muted">Fotoğraf bulunamadı.</p>
                                            @endif
                                        </div> --}}
                                        <hr>
                                        <style>
                                            .upload-area {
                                                border: 2px dashed #ddd;
                                                padding: 20px;
                                                margin-top: 20px;
                                                text-align: center;
                                            }

                                            .upload-instructions {
                                                font-size: 14px;
                                                color: #555;
                                            }

                                            .drop-area {
                                                margin-top: 10px;
                                                padding: 20px;
                                                background-color: #f4f4f4;
                                                border-radius: 8px;
                                                cursor: pointer;
                                            }

                                            .drop-area p {
                                                margin: 0;
                                                color: #aaa;
                                            }

                                            .image-input {
                                                display: none;
                                                /* Bu input görünmez olacak, sadece tıklanabilir */
                                            }
                                        </style>
                                        <script>
                                            document.addEventListener("DOMContentLoaded", function() {
                                                const uploadAreas = document.querySelectorAll(".upload-area");

                                                uploadAreas.forEach(area => {
                                                    const dropArea = area.querySelector(".drop-area");
                                                    const inputFile = area.querySelector(".image-input");
                                                    const type = area.dataset.type;

                                                    // Dosya sürüklendiğinde veya bırakıldığında
                                                    dropArea.addEventListener("dragover", function(e) {
                                                        e.preventDefault();
                                                        dropArea.style.backgroundColor = "#eaeaea";
                                                    });

                                                    dropArea.addEventListener("dragleave", function(e) {
                                                        dropArea.style.backgroundColor = "#f4f4f4";
                                                    });

                                                    dropArea.addEventListener("drop", function(e) {
                                                        e.preventDefault();
                                                        dropArea.style.backgroundColor = "#f4f4f4";
                                                        const files = e.dataTransfer.files;
                                                        handleFileUpload(files, type);
                                                    });

                                                    // Dosya seçildiğinde input elementinden
                                                    inputFile.addEventListener("change", function(e) {
                                                        const files = e.target.files;
                                                        handleFileUpload(files, type);
                                                    });

                                                    // Yükleme işlemi
                                                    
                                                    function handleFileUpload(files, type) {
                                                        let formData = new FormData();
                                                        Array.from(files).forEach(file => {
                                                            formData.append("image[]", file);
                                                        });
                                                        formData.append("type", type);

                                                        fetch("{{ route('rides.uploadImage', $ride->id) }}", {
                                                                method: "POST",
                                                                headers: {
                                                                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                                                },
                                                                body: formData
                                                            })
                                                            .then(response => {
                                                                if (!response.ok) {
                                                                    return response.text().then(text => {
                                                                        throw new Error(text);
                                                                    });
                                                                }
                                                                return response.json();
                                                            }) // Burada .json() kullanarak JSON formatında veri bekliyoruz
                                                            .then(data => {
                                                                if (data.success) {
                                                                    // Başarılı olursa, görselleri sayfada güncelle
                                                                    location.reload();
                                                                } else {
                                                                    alert("Bir hata oluştu.");
                                                                }
                                                            })
                                                            .catch(error => {
                                                                alert("Hata oluştu!");
                                                                console.error(error);
                                                            });
                                                    }
                                                    

                                                    // Drop alanına tıklama ile dosya seçme işlemi eklemek
                                                    dropArea.addEventListener("click", function() {
                                                        inputFile.click(); // Tıklanma durumunda file input'u tetikleyelim
                                                    });
                                                });
                                            });
                                        </script>
                                        <div class="order_addre-edit">
                                            <h3 class="mt-4">📸 Olay Yeri Görselleri</h3>
                                            @if(!empty($crimeSceneImages))
                                            <div class="mb-3">
                                                <p><strong>GPS:</strong> {{ $gps['crime'] }}</p>
                                                <p><strong>Tarih:</strong> {{ $dates['crime'] }}</p>
                                                @foreach($crimeSceneImages as $img)
                                                <img src="{{ $img }}" alt="Olay Görseli" width="200" class="m-1 border rounded" onclick="openImageModal('{{ $img }}')">
                                                @endforeach
                                            </div>
                                            @endif

                                            <!-- Drag & Drop Yükleme Alanı -->
                                            <div class="upload-area" id="crime-upload-area" data-type="crime">
                                                <p class="upload-instructions">Görsel sürükleyip bırakın veya seçin.</p>
                                                <!-- Görsel dosyalarını seçmek için input -->
                                                <input type="file" name="image[]" id="crime-image-input" class="image-input" multiple style="display:none;">
                                                <div class="drop-area" id="crime-drop-area">
                                                    <p>Sürükle ve bırak ya da tıklayarak seçin</p>
                                                </div>
                                            </div>

                                            <h3 class="mt-4">🚚 Yükleme Sonrası Görseller</h3>
                                            @if(!empty($afterLoadingImages))
                                            <div class="mb-3">
                                                <p><strong>GPS:</strong> {{ $gps['loading'] }}</p>
                                                <p><strong>Tarih:</strong> {{ $dates['loading'] }}</p>
                                                @foreach($afterLoadingImages as $img)
                                                <img src="{{ $img }}" alt="Yükleme Görseli" width="200" class="m-1 border rounded" onclick="openImageModal('{{ $img }}')">
                                                @endforeach
                                            </div>
                                            @endif

                                            <!-- Yükleme Sonrası için Drag & Drop -->
                                            <div class="upload-area" id="loading-upload-area" data-type="loading">
                                                <p class="upload-instructions">Görsel sürükleyip bırakın veya seçin.</p>
                                                <input type="file" name="image[]" id="loading-image-input" class="image-input" multiple style="display:none;">
                                                <div class="drop-area" id="loading-drop-area">
                                                    <p>Sürükle ve bırak ya da tıklayarak seçin</p>
                                                </div>
                                            </div>

                                            <h3 class="mt-4">📦 İndirme Sonrası Görseller</h3>
                                            @if(!empty($afterDownloadingImages))
                                            <div class="mb-3">
                                                <p><strong>GPS:</strong> {{ $gps['downloading'] }}</p>
                                                <p><strong>Tarih:</strong> {{ $dates['downloading'] }}</p>
                                                @foreach($afterDownloadingImages as $img)
                                                <img src="{{ $img }}" alt="İndirme Görseli" width="200" class="m-1 border rounded" onclick="openImageModal('{{ $img }}')">
                                                @endforeach
                                            </div>
                                            @endif

                                            <!-- İndirme Sonrası için Drag & Drop -->
                                            <div class="upload-area" id="downloading-upload-area" data-type="downloading">
                                                <p class="upload-instructions">Görsel sürükleyip bırakın veya seçin.</p>
                                                <input type="file" name="image[]" id="downloading-image-input" class="image-input" multiple style="display:none;">
                                                <div class="drop-area" id="downloading-drop-area">
                                                    <p>Sürükle ve bırak ya da tıklayarak seçin</p>
                                                </div>
                                            </div>

                                            <!-- Modal (Bootstrap 5 için) -->
                                            <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                                    <div class="modal-content bg-transparent border-0">
                                                        <div class="modal-body text-center p-0">
                                                            <img id="modalImage" src="" class="img-fluid rounded shadow">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <style>
                                                .image-thumb {
                                                    width: 120px;
                                                    height: 120px;
                                                    object-fit: cover;
                                                    cursor: pointer;
                                                    transition: transform 0.2s ease, box-shadow 0.2s ease;
                                                }

                                                .image-thumb:hover {
                                                    transform: scale(1.05);
                                                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                                                }

                                                .image-thumb-wrapper {
                                                    position: relative;
                                                }
                                            </style>

                                            <script>
                                                function openImageModal(src) {
                                                    const modalImage = document.getElementById('modalImage');
                                                    modalImage.src = src;
                                                    const modal = new bootstrap.Modal(document.getElementById('imageModal'));
                                                    modal.show();
                                                }
                                            </script>


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


                </div>
            </div>

        </div>

    </div>


    <!--  </div> -->
    <div class="form-group row width-100 " STYLE="background-color:#9e9e9e38">
        <label class="col-3 control-label"><b>{{trans('lang.ride_status')}} {{trans('lang.update')}}
                :</b></label>
        <div class="col-7">

            @php
            $status = ['confirmed' => 'Onaylandı','on ride'
            => 'Olay Yerine Gidiyor','OnCrimeScene' => 'Olay Yerine Vardı', 'OnDelivery' => 'Teslimat Noktasına Gidiyor', 'completed' => 'Tamamlandı', ]

            @endphp

            <select name="order_status" class="form-control">
                @foreach ($status as $key => $value)
                <option value="{{ $key }}" {{ ( $key == $ride->statut) ? 'selected' : '' }}> {{ $value }} </option>
                @endforeach

            </select>

        </div>
        <br>
    </div>

    <div class="form-group col-12 text-center btm-btn">
        <button type="submit" class="btn btn-primary save_order_btn"><i
                class="fa fa-save"></i> {{trans('lang.save')}}</button>
        <a href="javascript:history.go(-1)" class="btn btn-default"><i
                class="fa fa-undo"></i>{{trans('lang.cancel')}}</a>

    </div>
    <div class="form-group col-12 text-center btm-btn"></div>
    <div class="form-group col-12 text-center btm-btn"></div>

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

</div>


@endsection

@section('scripts')
<script>
    var map = L.map('map').setView([
        {{ $ride->latitude_depart }},
        {{ $ride->longitude_depart }}
    ], 13);

    // OpenStreetMap katmanı
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Başlangıç ve varış noktaları
    var start = L.latLng(
        {{ $ride->latitude_depart }},
        {{ $ride->longitude_depart }}
    );

    var end = L.latLng(
        {{ $ride->latitude_arrivee }},
        {{ $ride->longitude_arrivee }}
    );

    // Marker ekleme ve popup
    var startMarker = L.marker(start)
        .addTo(map)
        .bindPopup("<b>Başlangıç Yeri: </b> {{ $ride->depart_name }}")
        .openPopup();

    var endMarker = L.marker(end)
        .addTo(map)
        .bindPopup("<b>Varış Yeri: </b> {{ $ride->destination_name }}");

    // Rota çizimi
    L.Routing.control({
        waypoints: [
            start,
            end
        ],
        lineOptions: {
            styles: [{
                color: 'blue',
                opacity: 0.6,
                weight: 4
            }]
        },
        createMarker: function() {
            return null;
        },
        routeWhileDragging: false
    }).addTo(map);
</script>
@endsection