@extends('layouts.app')

@section('tajuk')
Permohonan Lesen Penjaja
@endsection

@section('css')

    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link href="{{ asset('css/jsapi-template-main.css') }}" rel="stylesheet" type="text/css"/>
<link href="https://js.arcgis.com/4.25/esri/css/main.css" rel="stylesheet" type="text/css" />
<style>
#viewDiv {
  padding: 0;
  margin: 0;
  height: 700px;
  width: 100%;
}
</style>
@endsection


@section('breadcrumb')
    <ol class="breadcrumb float-sm-end">
        <li class="breadcrumb-item active"><a href="#">Home</a></li>
    </ol>
@endsection

@section('content')

    @if (session('success'))
        <div class="alert alert-success" role="alert">
            {{ session('success') }}
        </div>
    @endif
<form action="{{route('penjaja-simpan_mohon')}}" method="post" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="pemohon_id" value="{{$user->id}}">
    <input type="hidden" name="mohon_id" value="{{$permohonan?->id}}">
    <div class="row mt-4">
        <div class="col-lg-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">MAKLUMAT PERIBADI PEMOHON</h3>
                </div> <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="nokp">No KP</label>
                                <input id="nokp" class="form-control" type="text" name="nokp" value="{{ old('nokp', $user->nokp) }}" readonly autofocus autocomplete="nokp" />
                            </div>
                            <div class="mb-3">
                                <label for="name" >Nama</label>
                                <input id="name" name="name" type="text" class="form-control" value="{{ old('name', $user->name) }}" readonly autofocus autocomplete="name" />
                            </div>
                            <div class="mb-3">
                                <label for="email">Email</label>
                                <input id="email" name="email" type="email" class="form-control" value="{{ old('email', $user->email) }}" readonly autocomplete="username" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="alamat">Alamat</label>
                                <textarea id="alamat" name="alamat" class="form-control" readonly autofocus autocomplete="alamat">{{ old('alamat', $user->alamat) }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="notelefon">No Telefon</label>
                                <input id="notelefon" name="notelefon" type="text" class="form-control" value="{{ old('notelefon', $user->notelefon) }}" readonly autofocus autocomplete="notelefon" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="jantina">Jantina</label>
                                <input id="jantina" name="jantina" type="text" class="form-control" readonly value="{{ old('jantina', $user->jantina)}}">
                            </div>
                            <div class="mb-3">
                                <label for="bangsa">Bangsa</label>
                                <input id="bangsa" name="bangsa" type="text" class="form-control" readonly value="{{ old('bangsa', $user->bangsa)}}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- /.col -->     
        <div class="col-lg-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">MAKLUMAT PERNIAGAAN ( SSM )</h3>
                </div> <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="nossm">No SSM</label>
                                <input id="nossm" name="nossm" type="text" value="{{ old('nossm', $permohonan?->syarikat->nossm) }}" readonly class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="nama_perniagaan">Nama Perniagaan</label>
                                <input id="nama_perniagaan" name="nama_perniagaan" type="text" value="{{ old('nama_perniagaan', $permohonan?->syarikat->name) }}"  readonly class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="jenis_perniagaan">Jenis Perniagaan</label>
                                <input id="jenis_perniagaan" type="text" name="jenis_perniagaan" class="form-control" readonly value="{{ old('jenis_perniagaan', $permohonan?->syarikat->jenis_perniagaan) }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="alamat_perniagaan">Alamat Perniagaan</label>
                                <textarea id="alamat_perniagaan" name="alamat_perniagaan" type="text" class="form-control" readonly>{{ old('alamat_perniagaan', $permohonan?->syarikat->alamat) }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="notelefon_perniagaan">No Telefon</label>
                                <input id="notelefon_perniagaan" name="notelefon_perniagaan" type="text" class="form-control" value="{{ old('notelefon_perniagaan', $permohonan?->syarikat->notelefon) }}" readonly />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="bil_cawangan">Bil Cawangan</label>
                                <input id="bil_cawangan" name="bil_cawangan" type="text" class="form-control" value="{{ old('bil_cawangan', $permohonan?->syarikat->bil_cawangan) }}" readonly />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- /.col -->                   
    </div> <!--end::Row-->
    <div class="row mt-4">
        <div class="col-lg-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">PERMOHONAN LESEN PENJAJA</h3>
                </div> <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="jenis_penjaja">Jenis Penjaja</label>
                                <input type="text" id="jenis_penjaja" class="form-control" name="jenis_penjaja" readonly value="{{ old('jenis_penjaja', $permohonan?->jenis) }}">                           
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="jenis_kenderaan">Jenis Kenderaan</label>
                                <input type="text" id="jenis_kenderaan" class="form-control" name="jenis_kenderaan" readonly value="{{ old('jenis_kenderaan', $permohonan?->jenis_kenderaan) }}">  
                                <small>Penjaja berkenderaan / Foodtruck / Car boot Sale sahaja</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="no_pendaftaran">No Pendaftaran Kenderaan</label>
                                <input id="no_pendaftaran" class="form-control" readonly type="text" name="no_pendaftaran" value="{{ old('no_pendaftaran', $permohonan?->no_pendaftaran) }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status_tanah">Status Tanah</label>
                                <input type="text" id="status_tanah" class="form-control" readonly name="status_tanah" value="{{ old('status_tanah', $permohonan?->status_tanah) }}" >   
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="kawasan">Kawasan Penjajaan</label>
                                        <input type="text" id="kawasan" class="form-control" readonly name="kawasan" value="{{$permohonan?->kawasan->nama}}" >      
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="taman">Taman</label>
                                        <input type="text" id="taman" class="form-control" readonly name="taman" value="{{$permohonan?->taman?->nama}}" >     
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="jalan">Jalan</label>
                                        <input type="text" id="jalan" class="form-control" readonly name="jalan" value="{{$permohonan?->jalan?->nama}}" >     
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="penempatan">Pusat Penempatan(jika ada)</label>
                                        <input type="text" id="penempatan" class="form-control" readonly name="penempatan" value="{{$permohonan?->penempatan?->nama}}" >                            
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="masa_jualan_mula">Masa Mula Jualan</label>
                                        <input id="masa_jualan_mula" class="form-control @error('masa_jualan_mula') is-invalid @enderror" readonly type="time" name="masa_jualan_mula" value="{{ old('masa_jualan_mula', $permohonan?->masa_jualan_mula) }}">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="masa_jualan_tamat">Masa Tamat Jualan</label>
                                        <input id="masa_jualan_tamat" class="form-control @error('masa_jualan_tamat') is-invalid @enderror" readonly type="time" name="masa_jualan_tamat" value="{{ old('masa_jualan_tamat', $permohonan?->masa_jualan_tamat) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><small>Kosongkan jika tidak berkaitan</small></div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="makanan">Makanan</label>
                                <textarea id="makanan" class="form-control" name="makanan" readonly rows="3" cols="40">{{ old('makanan', $permohonan?->makanan) }}</textarea>  
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="minuman">Minuman</label>
                                <textarea id="minuman" class="form-control" name="minuman" readonly rows="3" cols="40" >{{ old('minuman', $permohonan?->minuman) }}</textarea>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="lain">Lain-lain</label>
                                <textarea id="lain" class="form-control" name="lain" readonly rows="3" cols="40" >{{ old('lain', $permohonan?->lain) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- /.col -->    
        <div class="col-lg-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">LOKASI PENJAJAAN</h3>
                </div> <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="longitude">Longitud</label>
                                <input id="longitude" class="form-control" type="text" name="longitude" value="{{ old('longitude', $permohonan?->longitude) }}" readonly/>
                            </div>
                        </div> 
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="latitude">Latitud</label>
                                <input id="latitude" class="form-control" type="text" name="latitude" value="{{ old('latitude', $permohonan?->latitude) }}" readonly/>
                            </div>
                        </div>
                    </div> 
                    <div id="viewDiv"></div>
                </div>
            </div>
        </div> <!-- /.col -->               
    </div> <!--end::Row-->
    <div class="row mt-4">   
        <div class="col-lg-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">DOKUMEN DIPERLUKAN</h3>
                </div> <!-- /.card-header -->
                <div class="card-body">    
                    <div class="row">                         
                        @if(!is_null($doc_kad_pengenalan))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_kad_pengenalan">Salinan Kad Pengenalan</label><br />     
                                    @if ($doc_kad_pengenalan->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_kad_pengenalan->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_kad_pengenalan->pivot->path) }}" alt="Salinan IC" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif                         
                        @if(!is_null($doc_gambar))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_gambar">Gambar Berukuran Passport</label><br />   
                                    @if ($doc_gambar->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_gambar->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_gambar->pivot->path) }}" alt="Gambar Passport" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif
                        @if(!is_null($doc_lokasi))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_lokasi">Gambar Lokasi / Pelan</label><br />
                                    @if ($doc_lokasi->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_lokasi->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_lokasi->pivot->path) }}" alt="Gambar Lokasi" style="max-width: 100px;">
                                    @endif                           
                            </div>
                        </div> 
                        @endif  
                        @if(!is_null($doc_kebenaran))   
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_kebenaran">Surat kebenaran pemilik tanah / pemegang rezab /perjanjian yang sah</label><br />
                                    @if ($doc_kebenaran->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_kebenaran->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_kebenaran->pivot->path) }}" alt="Surat Kebenaran" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif
                        @if(!is_null($doc_kenderaan))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_kenderaan">Gambar Kenderaan</label><br />
                                    @if ($doc_kenderaan->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_kenderaan->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_kenderaan->pivot->path) }}" alt="Gambar Kenderaan" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif
                        @if(!is_null($doc_kenderaan_geran))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_kenderaan_geran">Salinan Geran Kenderaan</label><br />
                                    @if ($doc_kenderaan_geran->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_kenderaan_geran->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_kenderaan_geran->pivot->path) }}" alt="Gambar Kenderaan" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif
                        @if(!is_null($doc_suntikan_ty2))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_suntikan_ty2">Salinan Sijil Suntikan TY2 (Pengendali makanan sahaja)</label><br />
                                    @if ($doc_suntikan_ty2->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_suntikan_ty2->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_suntikan_ty2->pivot->path) }}" alt="Salinan Suntikan" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif
                        @if(!is_null($doc_kursus_makanan))
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="doc_kursus_makanan">Salinan Sijil Kursus Pengendalian Makanan</label><br />
                                    @if ($doc_kursus_makanan->pivot->jenis_dokumen === 'pdf')
                                        <a href="{{ asset('storage/documents/' . $doc_kursus_makanan->pivot->path) }}" target="_blank">View PDF</a>
                                    @else
                                        <img src="{{ asset('storage/documents/' . $doc_kursus_makanan->pivot->path) }}" alt="Salinan Sijil Kursus Pengendalian Makanan" style="max-width: 100px;">
                                    @endif
                            </div>
                        </div>
                        @endif
                    </div> 
                </div>
            </div>
        </div> <!-- /.col --> 
    </div>
    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body text-center">
                <a id="hantar" class="btn btn-primary" href="{{route('dashboard')}}">Selesai</a>
                </div> <!-- /.card-header -->
            </div> <!-- /.card-header -->
        </div> <!-- /.col -->               
    </div> <!--end::Row-->
</form>
@endsection

@section('js')
  <!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script type="text/javascript" src="https://js.arcgis.com/4.25/"></script>

    <script type="text/javascript">
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Home",
"esri/widgets/ScaleBar",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/widgets/Compass",
"esri/layers/Layer",
  "esri/layers/GraphicsLayer", 
  "esri/Graphic",
      "esri/geometry/support/webMercatorUtils"
], (
Map, MapView, Home, ScaleBar, LayerList, Legend,
Expand, Compass, Layer, GraphicsLayer, Graphic, webMercatorUtils
) => {
  const layerUrl = "https://onemap.mbip.gov.my/arcgis/rest/services/Hosted/Maklumat_Lot/FeatureServer";
  const map = new Map({basemap: "topo-vector"});
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [{{$permohonan?->longitude}}, {{$permohonan?->latitude}}] ,
    zoom: 16  
  });


      //Construct a SimpleMarkerSymbol object
      var markerSymbol = {
        type: "simple-marker",
        color:[226,15,5],
        outline:{
            color:[255,255,255],
            width:2
        }
      };  
    
     //Construct a point object
     var point1 = {
          type:"point",
          longitude:{{$permohonan?->longitude}},
          latitude:{{$permohonan?->latitude}}
      };

      //Construct a Graphic object
      var graphic1 = new Graphic({
          geometry:point1,
          symbol: markerSymbol
      });
      

      // Construct a GraphicsLayer with Graphic objects
      var layer = new GraphicsLayer({
          graphics: [graphic1]
      });

      layer.title = "Kedudukan Penjaja";

  createFeatureLayers(layerUrl);

  async function createFeatureLayers(url) {
    const featureService = await Layer.fromArcGISServerUrl(url);
  // Set the visibility of the layer to false
  featureService.visible = false;

   // map.add(featureService);    
    map.add(layer);
  }



  const homeBtn = new Home({
    view: view
  });
  const scaleBar = new ScaleBar({
    view: view,
    unit: "dual"
  });
  const layerList = new LayerList({
    view: view
  });
  const legend = new Legend({
    view: view
  });
  const layerListExpand = new Expand({
    view: view,
    content: layerList,
    expanded: false,
    expandTooltip: "Expand LayerList"
  });
  const legendExpand = new Expand({
    view: view,
    content: legend,
    expandTooltip: "Expand Legend",
    expanded: false
  });
  const compass = new Compass({
    view: view,
    visible: false
  });
  view.ui.add(homeBtn, "top-left");
  view.ui.add(scaleBar, "bottom-right");
  view.ui.add(layerListExpand, "top-right");
  view.ui.add(legendExpand, "bottom-left");
  view.ui.add(compass, "top-left");
  // load the Compass only when the view is rotated
  view.watch('rotation', function (rotation) {
    if (rotation && !compass.visible) {
      compass.visible = true;
    }
  });
});
</script>
@endsection