@extends('layouts.appmin')

@section('tajuk')
Senarai Permohonan Baru
@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>
    </ul>
@endsection

@section('content')                    

    <div class="row">        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                <div class="card-title">Status Permohonan Baru</div>
                </div>
                <div class="card-body">
                <div class="chart-container">
                    <canvas
                    id="pieChart"
                    style="width: 50%; height: 50%"
                    ></canvas>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        @foreach($senarais as $senarai)
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{$senarai->lokasi_penjajaan()}}</h5>
                    <div class="row mb-2">
                        <div class="col-sm-12 col-md-12"><i class="fa-solid fa-umbrella-beach"></i> Jenis Lesen : {{$senarai->jenis_penjaja->jenis}}</div>
                    </div>
                    <h6 class="card-subtitle text-body-secondary"><i class="fa-solid fa-user"></i> {{stripslashes($senarai->user->name)}}</h6>
                    <small class="mb-2"><i class="fa-regular fa-id-card"></i> {{$senarai->user->nokp}}</small>
                    <p><h6 class="card-subtitle text-body-secondary"><i class="fa-solid fa-store"></i> {{$senarai->syarikat->name}}</h6>
                    <small class="mb-2"><i class="fa-solid fa-file-signature"></i> {{$senarai->syarikat->nossm}}</small></p>

                    <a href="{{route('admin.papar', [$senarai->id])}}" class="btn btn-primary mt-3"><i class="far fa-eye"></i> Lihat</a> 
                </div>
            </div>                                    
        </div> <!-- /.col -->  
        @endforeach               
    </div> <!--end::Row-->
@endsection
@section('js')
    <!-- Chart JS -->
    <script src="{{asset('kai/assets/js/plugin/chart.js/chart.min.js')}}"></script>
<script>
    var    pieChart = document.getElementById("pieChart").getContext("2d");


    var myPieChart = new Chart(pieChart, {
        type: "pie",
        data: {
          datasets: [
            {
              data: [{{implode(",", $pie)}}],
              backgroundColor: {!! json_encode($pie_kaler) !!},
              borderWidth: 0,
            },
          ],
          labels: {!! json_encode($pie_nama) !!},
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: "bottom",
            labels: {
              fontColor: "rgb(154, 154, 154)",
              fontSize: 11,
              usePointStyle: true,
              padding: 20,
            },
          },
          pieceLabel: {
            render: "percentage",
            fontColor: "white",
            fontSize: 14,
          },
          tooltips: false,
          layout: {
            padding: {
              left: 20,
              right: 20,
              top: 20,
              bottom: 20,
            },
          },
        },
      });

$(document).ready(function () {
    $('#senarai').DataTable({
        dom: '<"row mb-3"<"col-md-3 col-sm-4"f><"col-md-6 col-sm-2"><"col-md-1 col-sm-4"l>>' +
                '<"row"<"col-12"tr>>' +
                '<"row mt-3"<"col-md-5"i><"col-md-7"p>>',
        language: {
            search: '<span class="me-2">Cari:</span>',
            lengthMenu: '<span class="me-2">Show</span> _MENU_'
        },
        responsive: true
    });
});

</script>
@endsection