@extends('front.app')
@section('content')
<link href="{{ asset('backend/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('backend/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
<div class="row g-6 g-xl-9 m-20">
    <!--begin::Col-->
    <div class="col-lg-6">
        <!--begin::Summary-->
        <div class="card card-flush h-lg-100">
            <!--begin::Card header-->
            <div class="card-header mt-6">
                <!--begin::Card title-->
                <div class="card-title ">
                 <div class="flex-column">
                    <h3 class="fw-bolder mb-1">{{$station->title}}</h3>
                    <div class="fs-6 fw-bold text-gray-400">{{@$station->city->name}}</div>
                 </div>
                </div>
                <!--end::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <edit-station :payload="{{$station}}" :user="{{$user}}"></edit-station>
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body p-9 pt-5">
                <!--begin::Wrapper-->
                <div class="d-flex flex-wrap">
                    <!--begin::Chart-->
              
                    <!--end::Chart-->
                    <!--begin::Labels-->
                    <div class="d-flex flex-column justify-content-center flex-row-fluid pe-11 mb-5">
                        <!--begin::Label-->
                        <div class="d-flex fs-6 fw-bold align-items-center mb-3">
                            <div class="bullet bg-primary me-3"></div>
                            <div class="text-gray-400">Locatie</div>
                            <div class="ms-auto fw-bolder text-gray-700">{{$station->location}}</div>
                        </div>
                        <!--end::Label-->
                        <!--begin::Label-->
                        <div class="d-flex fs-6 fw-bold align-items-center mb-3">
                            <div class="bullet bg-success me-3"></div>
                            <div class="text-gray-400">GPS LAT</div>
                            <div class="ms-auto fw-bolder text-gray-700">{{$station->lat}}</div>
                        </div>
                        <!--end::Label-->
                        <!--begin::Label-->
                        <div class="d-flex fs-6 fw-bold align-items-center mb-3">
                            <div class="bullet bg-danger me-3"></div>
                            <div class="text-gray-400">GPS LNG</div>
                            <div class="ms-auto fw-bolder text-gray-700">{{$station->lng}}</div>
                        </div>
                        <!--end::Label-->
                        <!--begin::Label-->
                        <div class="d-flex fs-6 fw-bold align-items-center">
                            <div class="bullet bg-gray-300 me-3"></div>
                            <div class="text-gray-400">Ultima actualizare</div>
                            <div class="ms-auto fw-bolder text-gray-700">{{$station->updated_at}}</div>
                        </div>
                        <!--end::Label-->
                    </div>
                    <!--end::Labels-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Summary-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col-lg-6">
        <!--begin::Graph-->
        <div class="card card-flush h-lg-100">
            <!--begin::Card header-->
            <div class="card-header mt-6">
                <!--begin::Card title-->
                <div class="card-title flex-column">
                    <h3 class="fw-bolder mb-1">Harta</h3>
                </div>
                <!--end::Card title-->
         
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-10 pb-0 px-5 mb-10" style="position: relative;">
            <show-map :payload="{{$station}}"></show-map>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Graph-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    
    <!--end::Col-->
    <!--begin::Col-->
    
    <!--end::Col-->
    <!--begin::Col-->
    
    <!--end::Col-->
    <!--begin::Col-->
    
    <!--end::Col-->
</div>
@endsection