@extends('dashboard.base')

@section('content')

    <div class="container-fluid">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-align-justify"></i>{{ __('Upload Occupation List') }}</div>
                        <div class="card-body">
                            @foreach (['danger', 'warning', 'success', 'info'] as $key)
                                @if(Session::get($key))
                                    <div class="alert alert-{{ $key }} alert-block">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        <strong>{{ Session::get($key) }}</strong>
                                    </div>
                                @endif
                            @endforeach
                            <form method="POST" action="{{ route('uploadoccupations.store') }}"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label for="uploadSpecialityFileBtn">Choose file to upload (Allowed file types .csv,
                                        Max file size 8 MB)</label>
                                    <input type="file" accept=".csv"  class="form-control-file" name="occupation"
                                           id="">
                                    <br>
                                    <button type="submit" class="btn btn-primary">Upload</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-align-justify"></i>{{ __('Pinipol Occupations List') }}</div>


                        <div class="card-body">
                            <div class="container">
                                <table class="table table-bordered display nowrap" id="ocDatatable">
                                    <thead>
                                    <tr>
                                         <th>id</th>
                                        <th>Occupation</th>
                                        <th>Create at</th>
                                        <th>Updated at</th>
                                      
                                       
                                    
                                        
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
                                  rel="stylesheet">
                            <link href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css"
                                  rel="stylesheet">
                            <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
                            <script
                                src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
                            <script>
                                 $(document).ready(function () {
                                    $('table#ocDatatable').DataTable({
                                        processing: true,
                                        serverSide: true,
                                        responsive: true,
                                        ajax: "{{ url('occupation-for-datatable') }}",
                                        columns: [
                                            {data: 'id', name: 'id'},
                                
                                            {data: 'Occuption_ame', name: 'Occuption_ame'},
                                         
                            
                                           {data: 'created_at', name: 'created_at'},
                                           {data: 'updated_at', name: 'updated_at'},
                                        ]
                                    });
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('javascript')

@endsection