@extends('layouts.app')

@section('page-title')
<div class="bg-title d-flex jsustify-content-start align-items-center gap-4">
    <h4 class="page-title m-r-auto"><i class="{{ $pageIcon }}"></i> Projections</h4>
    <div class="text-right">
        <a href="{{ route('projections-create') }}" class="themeBtn themeBtn_sm greenBtnSoft">
            Add New Projections <i class="fa fa-plus" aria-hidden="true"></i>
        </a>
    </div>
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('css/datatables/dataTables.bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/datatables/responsive.bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/multiselect/css/multi-select.css') }}">
<style>
    #employees-table_wrapper .dt-buttons {
        display: none !important;
    }
    .data-section.col-md-9 {
        width: 100%;
    }
</style>
@endpush

@section('content')
<div class="dash_panel">
    <div class="customCard m-b-15">
        <div class="row align-items-end">
            <div class="col-md-4">
                <div class="form-group w-100">
                    <label>Month</label>
                    <select class="form-control" onchange="GetReport(this.value)" name="month_id" id="month_id">
                        <option value="">Select</option>
                        <option @if($id == 'January') selected @endif value="January">January</option>
                        <option @if($id == 'February') selected @endif value="February">February</option>
                        <option @if($id == 'March') selected @endif value="March">March</option>
                        <option @if($id == 'April') selected @endif value="April">April</option>
                        <option @if($id == 'May') selected @endif value="May">May</option>
                        <option @if($id == 'June') selected @endif value="June">June</option>
                        <option @if($id == 'July') selected @endif value="July">July</option>
                        <option @if($id == 'August') selected @endif value="August">August</option>
                        <option @if($id == 'September') selected @endif value="September">September</option>
                        <option @if($id == 'October') selected @endif value="October">October</option>
                        <option @if($id == 'November') selected @endif value="November">November</option>
                        <option @if($id == 'December') selected @endif value="December">December</option>
                    </select>
                </div>
            </div>
        </div>
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>
        @endif
    </div>
    <div class="customCard m-b-15">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr role="row">
                    <th>S.No.</th>
                    <th>Project Name</th>
                    <th>User</th>
                    <th>Amount</th>
                    <th>Month</th>
                    <th>Year</th>
                </tr>
            </thead>
            <tbody>
                @if($projectionsInfo)
                    @foreach($projectionsInfo as $key => $value)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>
                            <a href="{{ route('projections-view', $value['id']) }}" target="_blank">
                                {{ $value['project_name'] }}
                            </a>
                        </td>
                        <td>
                            <a href="{{ route('projections-view', $value['id']) }}" target="_blank">
                                {{ $value['user_name'] }}
                            </a>
                        </td>
                        <td>
                            <a href="{{ route('projections-view', $value['id']) }}" target="_blank">
                                ${{ $value['amount'] }}
                            </a>
                        </td>
                        <td>
                            <a href="{{ route('projections-view', $value['id']) }}" target="_blank">
                                {{ $value['month'] }}
                            </a>
                        </td>
                        <td>
                            <a href="{{ route('projections-view', $value['id']) }}" target="_blank">
                                {{ $value['year'] }}
                            </a>
                        </td>
                    </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('js/datatables/responsive.bootstrap.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/multiselect/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });

    function GetReport(val) {
        var url = "{{ url('/') }}/admin/projections/" + val;
        window.location.href = url;
    }
</script>
@endpush