@extends('layouts.dashboard')
@section('content')
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">


                <div class="card">

                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="home-tab" href="{{ route('api.profile', $data->id) }}">Profile</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link " id="home-tab" href="{{ route('api.show', $data->id) }}">Koneksi</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" href="{{ route('api.edit', $data->id) }}">Edit</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" href="{{ route('invoices.show', $data->id) }}">Tagihan</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab"
                                aria-controls="contact" aria-selected="false">Lokasi</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" href="{{ route('inventaris.show', $data->id) }}">Inventaris</a>
                        </li>
                    </ul>

                    <div class="card-header">
                        <div class="button">
                            @can('lokasi-create')
                                <a href="{{ route('lokasi.CustomCreate', $data->id) }}" class="btn btn-primary">Tambah
                                    Lokasi</a>
                            @endcan
                            {{-- <a href="https://maps.google.com/?q={{ $latitude }},{{ $longitude }}"
                                class="btn btn-primary">cek link
                            </a> --}}
                        </div>


                    </div>

                    <div class="card-content">
                        <div class="card-body">
                            <form action="{{ route('api.show', $data->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="form-body">
                                    <div class="row">

                                        <div class="col-md-4">
                                            <label>ID Pelanggan</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="text" id="cid" class="form-control" name="cid"
                                                value="{{ $data->id }}" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Nama</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="text" id="nama" class="form-control" name="nama"
                                                value="{{ $data->nama }}"readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label>alamat</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <input type="alamat" id="alamat" class="form-control" name="alamat"
                                                value="{{ $data->alamat_instalasi }}"readonly>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="col-md-6 col-sm-12">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <h4 class="card-title">Foto Rumah Pelanggan</h4>
                    <p class="card-text">
                        @foreach ($lokasi as $dt)
                            <span class="autocok">
                                <img src="{{ Storage::url('images/' . $dt->foto) }}">
                            </span>
                    </p>

                    <a href="https://maps.google.com/?q={{ $dt->latitude }},{{ $dt->longitude }}" class="btn btn-primary"
                        target="_blank">Rute Maps
                    </a>
                    <a target="_blank" href="https://api.whatsapp.com/send?phone={{ $dt->ppoe->no_telephone }}"
                        class="btn btn-success">WhatsApp</a>
                    @can('lokasi-edit')
                        <a href="{{ route('lokasi.edit', $dt->id) }}" class="btn btn-warning ">Edit</a>
                    @endcan
                    @can('lokasi-delete')
                        <form action="{{ route('lokasi.destroy', $dt->id) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger">
                                Hapus
                            </button>
                        </form>
                    @endcan
                    @endforeach
                </div>

            </div>
        </div>
    </div>
@endsection
@push('style')
    <style>
        .autocok img {
            max-width: 100%;
            /*width:100%;*/
            height: auto;

        }
    </style>
@endpush