@extends('layouts.appmin')

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


@section('breadcrumb')
    <ul class="breadcrumbs mb-3">
        <li class="nav-home">
            <a href="#">
            <i class="icon-home"></i>
            </a>
        </li>
        <li class="separator">
            <i class="icon-arrow-right"></i>
        </li>
        <li class="nav-item">
            <a href="#">Penjaja</a>
        </li>
        <li class="separator">
            <i class="icon-arrow-right"></i>
        </li>
        <li class="nav-item">
            <a href="#">Permohonan Baru</a>
        </li>
        <li class="separator">
            <i class="icon-arrow-right"></i>
        </li>
        <li class="nav-item">
            <a href="#">Papar Permohonan Baru</a>
        </li>
    </ul>
@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: 500px;
  width: 100%;
}
</style>
@endsection


@section('content')

    @if (session('success'))
        <div class="alert alert-success" role="alert">
            {{ session('success') }}
        </div>
    @endif  
    <div class="row">
        <div class="col-md-6">
          <div class="card card-round">
            <div class="card-header">
              <div class="card-head-row card-tools-still-right">
                <h4 class="card-title">Maklumat Peribadi Pemohon</h4>
              </div>
            </div> <!-- /.card-header -->
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12"> 
                        <div class="form-group">
                          <label for="nokp">No KP</label>
                          <input type="text" class="form-control" id="nokp" disabled
                            value="{{ old('nokp', $permohonan?->user->nokp) }}" />
                        </div> 
                        <div class="form-group">
                          <label for="name">Name</label>
                          <input type="text" class="form-control" id="name" disabled
                            value="{{ old('name', $permohonan?->user->name) }}" />
                        </div> 
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" class="form-control" id="email" disabled
                                    value="{{ old('email', $permohonan?->user->email) }}" />
                                </div> 
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                <label for="notelefon">No Telefon</label>
                                <input type="text" class="form-control" id="notelefon" disabled
                                    value="{{ old('notelefon', $permohonan?->user->notelefon) }}" />
                                </div> 
                            </div>
                        </div>
                        <div class="form-group">
                          <label for="alamat">Alamat</label>
                          <textarea class="form-control" id="alamat" rows="4" disabled>{{ old('alamat', $permohonan?->user->alamat) }}</textarea>
                          
                        </div> 
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="jantina">Jantina</label>
                                  <input type="text" class="form-control" id="jantina" disabled
                                    value="{{ old('jantina', $permohonan?->user->jantina) }}" />
                                </div> 
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="bangsa">Bangsa</label>
                                  <input type="text" class="form-control" id="bangsa" disabled
                                    value="{{ old('bangsa', $permohonan?->user->bangsa) }}" />
                                </div> 
                            </div>
                        </div>  
                    </div>
                </div>
            </div> <!-- /.card-body -->  
          </div>
        </div> 
        <div class="col-md-6">
            <div class="card card-round">
                <div class="card-header">
                    <div class="card-head-row card-tools-still-right">
                    <h4 class="card-title">Maklumat Perniagaan(SSM)</h4>
                    </div>
                </div> <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12"> 
                            <div class="form-group">
                                <label for="nossm">No SSM</label>
                                <input type="text" class="form-control" id="nossm" disabled
                                value="{{ old('nossm', $permohonan?->syarikat->nossm) }}" />
                            </div> 
                            <div class="form-group">
                                <label for="nama_perniagaan">Nama Perniagaan</label>
                                <input type="text" class="form-control" id="nama_perniagaan" disabled
                                value="{{ old('nama_perniagaan', $permohonan?->syarikat->name) }}" />
                            </div> 
                            <div class="form-group">
                                <label for="jenis_perniagaan">Jenis Perniagaan</label>
                                <input type="text" class="form-control" id="jenis_perniagaan" disabled
                                value="{{ old('jenis_perniagaan', $permohonan?->syarikat->jenis_perniagaan) }}" />
                            </div> 
                            <div class="form-group">
                                <label for="alamat_perniagaan">Alamat Perniagaan</label>                                
                                <textarea class="form-control" id="alamat_perniagaan" rows="4" disabled>{{ old('alamat_perniagaan', $permohonan?->syarikat->alamat) }}</textarea>
                            </div> 
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="notelefon_perniagaan">No Telefon</label>
                                        <input type="text" class="form-control" id="notelefon_perniagaan" disabled
                                        value="{{ old('notelefon_perniagaan', $permohonan?->syarikat->notelefon) }}" />
                                    </div> 
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="bil_cawangan">Bil Cawangan</label>
                                        <input type="text" class="form-control" id="bil_cawangan" disabled
                                        value="{{ old('bil_cawangan', $permohonan?->syarikat->bil_cawangan) }}" />
                                    </div> 
                                </div>
                            </div>  
                        </div>
                    </div>
                </div>      
            </div>
        </div>              
    </div> <!--end::Row-->
    <div class="row">
      <div class="col-md-12">
        <div class="card card-round">
          <div class="card-header">
            <div class="card-head-row card-tools-still-right">
              <h4 class="card-title">Maklumat Permohonan Lesen Penjaja</h4>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                    <label for="jenis_penjaja">Jenis Penjaja</label>
                    <input type="text" class="form-control" id="jenis_penjaja" disabled
                    value="{{ old('jenis_penjaja', $permohonan?->syarikat->jenis) }}" />
                </div> 
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="jenis_kenderaan">Jenis Kenderaan</label>
                            <input type="text" class="form-control" id="jenis_kenderaan" disabled
                            value="{{ old('jenis_kenderaan', $permohonan?->jenis_kenderaan) }}" />
                        </div> 
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="no_pendaftaran">No Pendaftaran Kenderaan</label>
                            <input type="text" class="form-control" id="no_pendaftaran" disabled
                            value="{{ old('no_pendaftaran', $permohonan?->no_pendaftaran) }}" />
                        </div> 
                    </div>
                </div>
                <div class="form-group">
                    <label for="status_tanah">Status Tanah</label>
                    <input type="text" class="form-control" id="status_tanah" disabled
                    value="{{ old('status_tanah', $permohonan?->status_tanah) }}" />
                </div> 
                <div class="form-group">
                    <label for="alamat_penjajaan">Alamat Aktiviti Penjajaan</label>
                    <input type="text" class="form-control" id="alamat_penjajaan" disabled
                    value="{{ old('alamat_penjajaan', $permohonan?->alamat_penjajaan) }}" />
                </div> 
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="masa_jualan_mula">Masa Mula Jualan</label>
                            <input type="text" class="form-control" id="masa_jualan_mula" disabled
                            value="{{ old('masa_jualan_mula', $permohonan?->masa_jualan_mula) }}" />
                        </div> 
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="masa_jualan_tamat">Masa Tamat Jualan</label>
                            <input type="text" class="form-control" id="masa_jualan_tamat" disabled
                            value="{{ old('masa_jualan_tamat', $permohonan?->masa_jualan_tamat) }}" />
                        </div> 
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="makanan">Makanan</label>
                            <textarea class="form-control" id="makanan" rows="4" disabled>{{ old('makanan', $permohonan?->makanan) }}</textarea>
                        </div> 
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="minuman">Minuman</label>
                            <textarea class="form-control" id="minuman" rows="4" disabled>{{ old('minuman', $permohonan?->minuman) }}</textarea>
                        </div> 
                    </div>
                </div>
                <div class="form-group">
                    <label for="lain">Lain-lain</label>
                    <input type="text" class="form-control" id="lain" disabled
                    value="{{ old('lain', $permohonan?->lain) }}" />
                </div>
              </div>    
              <div class="col-md-6">
                <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) }}" autofocus autocomplete="longitude"/>
                        </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) }}" autofocus autocomplete="latitude"/>
                        </div>
                    </div>
                </div> 
                <div id="viewDiv"></div>  
              </div> 
            </div>   
          </div> 
        </div>   
      </div> 
    </div>   
    <div class="row">
        <div class="col-md-12">
            <div class="card card-round">
                <div class="card-header">
                    <div class="card-head-row card-tools-still-right">
                        <h4 class="card-title">Dokumen Permohonan Lesen Penjaja</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">        
                        <div class="col-md-6">
                            @if(!is_null($doc_gambar))
                                <h6>Gambar Berukuran Passport</h6>
                                @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
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if(!is_null($doc_lokasi))
                                <h6>Gambar Lokasi / Pelan</h6>
                                @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
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if(!is_null($doc_kebenaran))
                                <h6>Surat kebenaran pemilik tanah / pemegang rezab /perjanjian yang sah</h6>
                                @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
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if(!is_null($doc_kenderaan))
                                <h6>Gambar Kenderaan</h6>
                                @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
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if(!is_null($doc_kenderaan_geran))
                                <h6>Salinan Geran Kenderaan</h6>
                                @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
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if(!is_null($doc_suntikan_ty2))
                                <h6>Salinan Sijil Suntikan TY2 (Pengendali makanan sahaja)</h6>
                                @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
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if(!is_null($doc_kursus_makanan))
                                <h6>Salinan Sijil Kursus Pengendalian Makanan</h6>
                                @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
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="card card-round">
          <div class="card-header">
            <div class="card-head-row card-tools-still-right">
              <h4 class="card-title">Wang Proses</h4>
            </div>
          </div>
          <div class="card-body">
            <div class="form-group">
                <label>Bil Pelbagai</label><br />
                <div class="d-flex">
                    <div class="form-check">
                        <input
                            class="form-check-input"
                            type="radio"
                            name="cara_jana"
                            id="cara_jana_epbt"
                        />
                        <label
                            class="form-check-label"
                            for="cara_jana_epbt"
                        >
                            Manual
                        </label>
                        </div>
                        <div class="form-check">
                        <input
                            class="form-check-input"
                            type="radio"
                            name="cara_jana"
                            id="cara_jana_mylesen"
                            checked
                        />
                        <label
                            class="form-check-label"
                            for="cara_jana_mylesen"
                        >
                            Automatik
                        </label>
                        <input id="janabil" class="btn btn-sm btn-secondary" type="button" name="janabil" value="Jana" disabled />
                        
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    
                    <form action="{{route('pt.simpan_wangproses')}}" method="post">
                        @csrf
                        <input type="hidden" name="permohonan_id" id="permohonan_id" value="{{$permohonan->id}}">
                        <div class="row g-3 align-items-center">
                            <div class="col-auto">
                                <label for="no_bil_pelbagai" class="col-form-label">No Bil Pebagai <small>(jana di ePBT)</small></label>
                            </div>
                            <div class="col-auto">
                                <input id="no_bil_pelbagai" class="form-control" type="text" name="no_bil_pelbagai" value="" />
                            </div>
                            <div class="col-auto">
                                <input id="simpanbil" class="btn btn-sm btn-secondary" disabled type="submit" name="simpanbil" value="Simpan" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <table class="table">
                        <?php 
                        $i = 0;
                        ?>
                        <tr>
                            <th>#</th>
                            <th>No Akaun BP</th>
                            <th>No Resit<br />(Tarikh Bayar)</th>
                            <th>Bayaran<br />(RM)</th>
                        </tr>
                        @foreach($permohonan?->bilpelbagais as $bp)
                        <?php $i++; ?>
                        <tr>
                            <td><?php echo $i; ?>.</td>
                            <td>{{$bp->no_akaun_bilpelbagai}}</td>
                            <td>{{$bp->no_resit}}<br />{{$bp->dt_bayar}}</td>
                            <td>{{$bp->amaun_bayar}}</td>
                        </tr>
                        @endforeach
                    </table>
                </div>
            </div>
          </div>
        </div>
      </div> <!-- /.col -->    
      <div class="col-md-6">
        <div class="card card-round">
            <div class="card-header">
                <div class="card-head-row card-tools-still-right">
                <h4 class="card-title">Maklumat Fail</h4>
                </div>
            </div>        
            <div class="card-body">
                <form action="{{route('pt.simpan_nofail')}}" method="post">
                    @csrf
                    <input type="hidden" name="permohonan_id" id="permohonan_id" value="{{$permohonan->id}}">
                    <div class="form-group">
                        <label for="no_fail_lesen">No Fail Lesen</label>
                        <input type="text" class="form-control" id="no_fail_lesen"
                        value="{{ old('no_fail_lesen', $permohonan->no_fail_lesen) }}" />
                    </div> 
                    <div class="form-group">
                        <label for="no_akaun_lesen">No Akaun Lesen</label>
                        <input type="text" class="form-control" id="no_akaun_lesen"
                        value="{{ old('no_akaun_lesen', $permohonan->no_akaun_permohonan) }}" />
                    </div> 
                    <div class="form-group">
                        <input id="simpannofail" class="btn btn-sm btn-secondary" type="submit" name="simpannofail" value="Simpan" />
                    </div>
                </form>
                <hr>
                <form action="{{route('pt.hantar_ppk')}}" method="post">
                        @csrf
                        <input type="hidden" name="permohonan_id" id="permohonan_id" value="{{$permohonan->id}}">
                        <div class="form-group">
                            <label class="form-check-label" for="flexRadioDefault1">
                                Serah kepada Penolong Pegawai Kesihatan
                            </label>
                        </div>
                        <div class="form-group">
                            <input id="simpan" class="btn btn-sm btn-secondary" type="submit" name="janabil" value="Hantar" />
                        </div> 
                    </div>
                </form>
            </div>
        </div>
      </div> <!-- /.col -->         
    </div> <!--end::Row-->
@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">
	
    $(document).ready(function() {	
        
        $('#cara_jana_mylesen').click(function(){
            $('#janabil').removeAttr('disabled');
            $('#simpanbil').attr('disabled', 'disabled');
        });
        
        $('#cara_jana_epbt').click(function(){
            $('#simpanbil').removeAttr('disabled');
            $('#janabil').attr('disabled', 'disabled');
        });
    });

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: [103.576, 1.555] ,
    zoom: 14  
  });


      //Construct a SimpleMarkerSymbol object
      var markerSymbol = {
        type: "simple-marker",
        color:[226,15,5],
        outline:{
            color:[255,255,255],
            width:2
        }
      };  
    
          // Construct a GraphicsLayer with Graphic objects
        var layer = new GraphicsLayer({
            graphics: []
        });

      layer.title = "Kedudukan Projek";

  createFeatureLayers(layerUrl);

  async function createFeatureLayers(url) {
    const featureService = await Layer.fromArcGISServerUrl(url);

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


      // Function to make graphics draggable
      function makeGraphicDraggable(graphic) {
        let moveGraphic = false;

        view.on("drag", (event) => {
            
          if (moveGraphic) {
            event.stopPropagation();
            const point = view.toMap({ x: event.x, y: event.y });
            graphic.geometry = point;
          }
        });

        view.on("pointer-down", (event) => {
          const screenPoint = { x: event.x, y: event.y };
          view.hitTest(screenPoint).then((response) => {
            if (response.results.length > 0 && response.results[0].graphic === graphic) {
              moveGraphic = true;
            }
          });
        });

        view.on("pointer-up", () => {
          if (moveGraphic) {
            const { longitude, latitude } = webMercatorUtils.webMercatorToGeographic(graphic.geometry);
            console.log(`New position - Longitude: ${longitude}, Latitude: ${latitude}`);

            $("#latitude").val(latitude);
            $("#longitude").val(longitude);
            moveGraphic = false;
          }
        });
      }

      
      // Add a new marker on map click if no marker exists
      view.on("click", (event) => {
        if (layer.graphics.length === 0) {
          const point = view.toMap({ x: event.x, y: event.y });
          const newGraphic = new Graphic({
            geometry: point,
            symbol: markerSymbol
          });
          layer.add(newGraphic);
          makeGraphicDraggable(newGraphic);
          const { longitude, latitude } = webMercatorUtils.webMercatorToGeographic(newGraphic.geometry);
          console.log(`Added marker at - Longitude: ${longitude}, Latitude: ${latitude}`);

          $("#latitude").val(latitude);
          $("#longitude").val(longitude);

            $("#waze").attr('href', 'https://waze.com/ul?ll='+latitude+','+longitude+'&z=10');
        } else {
          console.log('Marker already exists.');
        }
      });


  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