@extends('user.layouts')
@section('title', 'Jilla Coordinator')
@section('header')


<!-- DataTable CSS -->
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/css/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/css/datatable/buttons.dataTables.min.css">

<style>
    .a-href-danger.transparent-btn:hover {
        color: #FF5656 !important;
    }
    .a-href-success{
        font-size: 14px;
        color: rgba(0, 180, 93, 1);
        font-family: "Nunito Sans", sans-serif;
        font-weight: 700;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }
</style>

@endsection
@section('content')


<div class="container-fluid page-wrapper">

    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
             <h3 class="page-top-heading">Jilla Coordinator</h3>
             <button class="btn btn-primary excel-btn"><i class="fa-solid fa-arrow-up-from-bracket me-3"></i>Export Data</button>
        </div>    
    </div>

    <!-- Card Row Stars -->
    <div class="row mt-4 ">
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                <div class="card-body">
                <p class="card-title">Total Jilla Coordinator</p>
                <h6 class="value-show">{{$jilla_count}}</h6>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                <div class="card-body">
                <p class="card-title">Total Business</p>
                <h6 class="value-show">{{$jilla_business_count}}</h6>
                </div>
            </div>
        </div>
    </div>
     <!-- Card Row Ends -->
    <div class="row mt-4">
        <div class="card basic-card">
            <div class="card-body">
                <!-- Table Row -->
                <div class="row">
                   <table id="data-table" class="table nowrap align-middle" style="width:100%">
                              <thead>
                                 <tr>
                                       <th>SN</th>
                                       <th>NAME</th>
                                       <th>PHONE NO</th>
                                       <th>DISTRICT</th>
                                       <th>JILCOR ID</th>
                                       <th>BUSINESS</th>
                                       <th>ACTION</th>
                                 </tr>
                              </thead>
                              @php
                              $sn = 1; 
                          @endphp
                          <tbody>
                              @foreach ($jilla_users as $jilla)
                                  <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $jilla->name }}</td>
                                    <td>{{ $jilla->phone_number }}</td>
                                    <td>{{ $jilla->district }}</td>
                                    <td><a href="{{ route('users_agent', $jilla->id) }}"  class="a-href-primary text-uppercase">{{ $jilla->jilla_code }}</a></td>
                                   
                                    <td>                   
                                        @if (!isset($check_vendor[$jilla->id]))
                                            <button type="button" class="a-href-info transparent-btn text-capitalize">Not Registered</button>
                                        @else
                                            <a href="{{ route('user_business', $jilla->id) }}" class="a-href-info text-capitalize">View Business</a>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($jilla->is_active == 0)
                                            <a type="button" data-bs-toggle="modal" data-bs-target="#SampleModal2"
                                                class="a-href-danger text-uppercase" data-user-id="{{ $jilla->id }}"
                                                onclick="BlockId(this)">UNBLOCK</a>
                                        @else
                                            <a type="button" data-bs-toggle="modal" data-bs-target="#SampleModal2"
                                                class="a-href-success text-uppercase" data-user-id="{{ $jilla->id }}"
                                                onclick="BlockId(this)">BLOCK</a>
                                        @endif
                                    </td>
                                 </tr>
                                 @endforeach
                              </tbody>
                        </table>
                </div>
            </div>
        </div>
    </div>

     

  <!--Common Sample Modal  Starts-->
  <div class="modal fade zoom-in" id="SampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-body">
              <div class="row">
                  <div class="col-lg-12">
                      <div class="p-3">
                          <div class="text-center">
                              <p class="my-4 are-you-sure"></p>
                              <p class="text-muted my-2 are-you-sure-subtext">Are you sure want to block/unblock?</p>
                          </div>
                          <form action="{{ route('block_jilla_user') }}" method="POST" enctype="multipart/form-data">
                              @csrf
                              <input type="hidden" id="block_id" name="block_id">
                              <div class="d-flex align-items-center mt-5 mb-3">
                                  <button data-bs-dismiss="modal"type="button"
                                      class="btn btn-light cancel-btn me-3">Cancel</button>
                                  <button type="submit" class="btn btn-primary yes-btn"><i
                                          class="fa-regular fa-circle-check me-2"></i>Yes,</button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
<!--Common Modal Ends-->


</div>
<!-- Container Fluid ends -->


<script>
    function BlockId(button) {
        var block_id = button.getAttribute('data-user-id');
        document.getElementById('block_id').value = block_id;
    }
</script>


@endsection
@section('footer')



<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- Datatable JS -->
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/buttons.html5.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/buttons.print.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/jszip.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/pdfmake.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/js/datatable/vfs_fonts.js"></script>



<script>
    $(document).ready(function() {
    var table1 = $('#data-table').DataTable({
        dom: 'Bfrtip',
        buttons: [{
            extend: 'excelHtml5',
            text: 'Export to Excel',
            className: 'd-none',
            filename: 'Jilla Coordinator'
        }],
        responsive: true
    });

    $('.excel-btn').on('click', function() {
        table1.button('.buttons-excel').trigger();
    });
});    


</script>    



@endsection