@extends('layout.master')
@section('content') 
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ url('home')}}">Home</a></li>
              <li class="breadcrumb-item"><a href="javascript:void(0)">States</a></li>
              
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
          
          <form action="{{url('states')}}" method="get">
        <div class="row">
            <div class="col-md-12">
                 <div class="callout callout-info">
              <h5><i class="fas fa-info"></i> States:</h5>
              List
            </div>
              <div class="card card-secondary">
              <div class="card-header">
                  <h2 class="card-title">Filter :</h2>
              </div>
              
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                          <label for="exampleInputEmail1">State Name</label>
                          <input type="text" class="form-control" name="state_name" value="{{old('state_name',$state_name)}}" >
                        </div>
                    </div>
                     
                    <div class="col-md-3">
                        <div class="form-group">
                          <label for="exampleInputEmail1">State Short Code</label>
                          <input type="text" class="form-control" name="state_short_code" value="{{old('state_short_code',$state_short_code)}}" >
                        </div>
                    </div>
                </div>
                
              </div>
              <div class="card-footer">
                  <div class="text-left">
                      <button type="submit" name="search" value="search" class="btn btn-primary btn-sm">
                          <img class="imgIconSize" src="{{ asset('theme/icon/filter.png') }}" alt="filter"/> Filter</button>
                  <a href="{{url('states')}}" class="btn btn-primary btn-sm">
                      <img class="imgIconSize" src="{{ asset('theme/icon/clear.png') }}" alt="Clear"/> Clear</a>
                  <a href="{{url('home')}}" class="btn btn-primary btn-sm">
                      <img class="imgIconSize" src="{{ asset('theme/icon/back.png') }}" alt="Back"/> Back</a>
                      <a href="{{url('states/create')}}" class="btn btn-primary btn-sm">
                      <img class="imgIconSize" src="{{ asset('theme/icon/add.png') }}" alt="Add New State"/> Add New State</a>
                  </div>
                  <div class="text-right marginTopminus" >
                  <a href="{{url('export-state',['type'=>'CSV'])}}" class="btn  btn-sm exportButtonBorder">
                      <img class="imgIconSize" src="{{ asset('theme/icon/csv.png') }}" alt="CSV"/> CSV</a>
                  <a href="{{url('export-state',['type'=>'EXCEL'])}}" class="btn  btn-sm exportButtonBorder">
                      <img class="imgIconSize" src="{{ asset('theme/icon/excel.png') }}" alt="Excel"/> Excel</a>
                  <a href="{{url('state-pdf')}}" class="btn btn-sm exportButtonBorder">
                      <img class="imgIconSize" src="{{ asset('theme/icon/pdf.png') }}" alt="PDF"/> PDF</a>
                  </div>
                </div>
              <!-- /.card-body -->
            </div>  
            </div>
          <!-- /.col -->
          <div class="col-md-12">
            
            <!-- /.card -->

            <div class="card">
             
              <!-- /.card-header -->
              <div class="card-body">
                  <div class="card-header2">
                      <p class="pMargin">Total States : {{$totalState}}</p>
                      <p class="pMargin">Total Active States : {{$totalActState}}</p>
                      <p class="pMargin">Total In-Active States : {{$totalInActState}}</p>
                  
              </div>
                <table class="table table-bordered">
                  <thead>
                    <tr class="tableHeader">
                      <th style="width: 10px">Count</th>
                      <th>Region </th>
                       <th>State Name </th>
                      <th>State Short Code </th>
                      <th>Username </th>
                      <th>Status</th>
                      <th>Action</th>
                      
                    </tr>
                  </thead>
                  <tbody>