@extends('layouts.app')

@section('content')
<div class="col-12">

</div>
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h5 class="title mb-0">Firearms</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Firearms</li>
                </ol>
            </nav>
        </div>
        <div class="card-body all-icons">
        <div class="w-100 text-right">
            <form method='post' action="{{ route('firearm.csvfa') }}" enctype='multipart/form-data' id="frmFl">
                {{ csrf_field() }}
                <input type='file' name='data' id="flCsv" style="display:none">
            </form>
            {{-- <button class="btn btn-primary btn-sm text-white mr-2" style="background-color: #21A366" id="btnCsv">IMPORT CSV</button> --}}
            <a href="{{ route('firearm.create') }}" class="btn btn-primary btn-sm text-white">ADD FIREARM</a>
            <form id="frmSearch" class="navbar-search" action="{{ route('firearm.search') }}">
                <div class="input-group no-border">
                <input type="text" name="keyword" @if(isset($keyword)) value="{{ $keyword }}" @endif class="form-control" placeholder="Search using firearm id..." autocomplete="off" style="background-color: #F5F5F5 !important">
                    <div class="input-group-append">
                    <button type="submit" class="txtSearch input-group-text">
                        <i class="now-ui-icons ui-1_zoom-bold"></i>
                    </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="table-responsive">

            <table class="table">
                <thead class=" text-primary">
                    <tr>
                        <th>Firearms ID</th>
                        <th>Serial</th>
                        <th>Make</th>
                        <th>Kind</th>
                        <th>Expiration</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($firearms as $firearm)
                        <tr>
                            <td>{{ $firearm->firearms_id }} </td>
                            <td>{{ $firearm->serial_number }} </td>
                            <td>{{ $firearm->make }}</td>
                            <td>{{ $firearm->kind }} </td>
                            <td>{{ $firearm->license_expiration_date }} </td>
                            <td>{{ $firearm->status }} </td>
                            <td>
                                <a href="{{ route('firearm.show', [ 'id' => $firearm->id ]) }}" class="btn btn-primary btn-sm text-white">View</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="card-footer pl-2">
            <p class="text-secondary">Showing {{ count($firearms) }} of {{ $firearms->appends(request()->input())->total() }} entries</p>
            {{ $firearms->appends(request()->input())->links() }}
        </div>
      </div>
    </div>
  </div>
  @section('script')
  <script>
    notif = {
        misc: {
        navbar_menu_visible: 0
        },

        showNotification: function(from, align, color, msg) {

        $.notify({
            icon: "now-ui-icons ui-1_bell-53",
            message: msg

        }, {
            type: color,
            timer: 8000,
            placement: {
            from: from,
            align: align
            }
        });
        }
    };
    @if($errors->has('data'))
        notif.showNotification('top','right', 'danger', '{{ $errors->first('data') }}')
    @endif
    $('#btnCsv').click(function() {
        $('#flCsv').click()
    })

    $('#flCsv').change(function() {
        $('#frmFl').submit();
    })

  </script>

@endsection
@endsection