@extends('layouts.main')
@section('content')

@push('style')
<link rel="stylesheet" href="{{ asset('assets/css/auto_style.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/toastr.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/themify-icons.css') }}">
@endpush

  <div class="preloader" id="preloader" >
    <div class="loading">
      <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
      <p>Harap Tunggu</p>
    </div>
  </div>
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
          <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
          <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">{{ $titleMenu }} {{$title}}</h1>
      <p class="lead"></p>
    </div>
  </div>

<div class="content__boxed">
    <div class="content__wrap">
        <div class="row">

            {{-- ================= FORM INPUT ================= --}}
            <div class="col-sm-12 mt-2">
                <div class="card">
                    <div class="card bg-info" style="min-height:5px;"></div>
                    <div class="card-body">
                        <h5 class="card-title fs-4">Input Data Customer</h5>

                        <form id="form_member" method="POST"
                            action="{{ route('customer-save') }}"
                            class="row g-1 needs-validation">
                            @csrf

                            <div class="col-md-3 mt-3">
                                <label class="form-label fw-bold">ID Customer</label>
                                <input type="text" id="kd_customer" name="kd_customer" class="form-control" readonly value="{{ $lastID }}">
                            </div>

                            <div class="col-md-3 mt-3">
                                <label class="form-label fw-bold">Customer *</label>
                                <input type="text" id="fullname" name="fullname" class="form-control" required>
                            </div>

                            <div class="col-md-3 mt-3">
                                <label class="form-label fw-bold">Owner *</label>
                                <input type="text" id="owner" name="owner" class="form-control" required>
                            </div>

                            <div class="col-md-3 mt-3">
                                <label class="form-label fw-bold">No. HP *</label>
                                <input type="text" id="phone" name="phone" class="form-control"
                                    onkeyup="numberOnly(this)" required>
                            </div>

                            <div class="col-md-12 mt-3">
                                <label class="form-label fw-bold">Alamat *</label>
                                <input id="autocomplete" name="autocomplete" type="text" class="form-control"
                                    placeholder="Ketik alamat" onFocus="geolocate()" required>
                            </div>

                            <div class="col-md-4" style="margin-top:1em"> 
                                <label class="form-label">Kecamatan</label> 
                                <input type="text" class="form-control" id="locality" name="locality"> 
                            </div> 
                            
                            <div class="col-md-4" style="margin-top:1em"> 
                              <label class="form-label">Kabupaten/Kota</label> 
                              <input type="text" class="form-control" id="administrative_area_level_2" name="administrative_area_level_2"> 
                            </div> <div class="col-md-4" style="margin-top:1em"> 
                              <label class="form-label">Provinsi</label> 
                              <input type="text" class="form-control" id="administrative_area_level_1" name="administrative_area_level_1"> 
                            </div> <div class="col-md-8" style="margin-top:1em"> 
                              <label class="form-label">Jalan</label> 
                              <input type="text" class="form-control" id="route" name="route"> 
                            </div> <div class="col-md-4" style="margin-top:1em"> 
                              <label class="form-label">Kode Pos</label> 
                              <input type="text" class="form-control" id="postal_code" name="postal_code"> 
                            </div>

                            <input type="hidden" name="full_address" id="full_address">
                            <input type="hidden" name="address_latitude" id="address_latitude">
                            <input type="hidden" name="address_longitude" id="address_longitude">

                            <div class="col-md-12 mt-3">
                                <div id="map"
                                    style="width:100%; height:350px; border-radius:8px; border:1px solid #ccc;">
                                </div>
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                                <button type="submit" class="btn btn-primary btn-sm col-md-2">
                                    Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- ================= TABLE ================= --}}
            <div class="col-sm-12 mt-2">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title fs-4">List Data Customer</h5>

                        <div class="table-responsive">
                            <table id="tabel-customer"
                                class="table table-striped display w-100">
                                <thead>
                                    <tr>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Kode</th>
                                        <th class="text-center">Customer</th>
                                        <th class="text-center">Owner</th>
                                        <th class="text-center">No. HP</th>
                                        <th class="text-center">Alamat</th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody> {{-- EMPTY (AJAX) --}}
                            </table>
                        </div>

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

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

@include('customer::customer.modal')
@include('customer::customer.js')

@endsection