@extends('layouts.'.env('THEME'))

@section('style')

<style>
.f07 {
    font-size: 0.7rem;
}
</style>

@endsection

@section('content')

<div class="container" id="main-container">

    <x-section_heading
        title="Staff"
        rowclass="my-5"/>

    <div class="row">
        <div class="col-12 mb-3">
            <a href="/staff/schedule">
                <button type="button" class="btn btn-primary">
                    Schedule
                </button>
            </a>
        </div>
    </div>

    @php
    $filter_fields = [
        'id' => ['type' => 'text'],
        'name' => ['type' => 'text'],
        'email' => ['type' => 'text']
    ];
    @endphp

    <div class="row">
        <div class="col-12">
            <h5>Filter by</h5>
        </div>
    </div>

    <x-listfilter
        cname="staff.index" :fields="$filter_fields" />

    <div class="row">
        <div class="col-12">
            <div class="section-title mb-3">All staff <span class="badge badge-secondary ml-2">{{$staff->count()}}</span></div>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($staff as $row)
                        <tr>
                            <td>{{$row->id}}</td>
                            <td>{{$row->user->name ?? ''}}</td>
                            <td>{{$row->user->email ?? ''}}</td>
                            <td>
                                {!! link_to_route('staff.edit', 'Edit',
                                    $parameters = [$row->id],
                                    $attributes = ['class' => 'btn btn-primary f07']) !!}
                            <form action="{{ route('staff.destroy', $row->id)}}"
                                onsubmit="return confirm('Delete forever?');"
                                method="post">
                                {{ csrf_field() }}
                                @method('DELETE')
                                <button class="btn btn-danger f07" type="submit">
                                    Delete
                                </button>
                            </form>
                            <input class="bulk-check" type="checkbox" name="leads[]" value="{{$row->id}}" />
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <form action="{{ route('staff.bulk_destroy')}}"
                onsubmit="return confirm('Delete forever?');"
                method="post"
                id="bulk-selected">
                {{ csrf_field() }}
                @method('POST')
                <button class="btn btn-danger" type="submit">
                    Delete selected
                </button>
            </form>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

</div>
@endsection

@section('script')
<script>

var bulk_selected = {};
$(document).ready(function() {

    $('body').on('change', '.bulk-check', function() {
        clickedBulk($(this).val(), $(this).prop('checked'));
    });

});

function clickedBulk(id, checked){
    id = Number(id);
    if(checked){
       if(id in bulk_selected) return;
       bulk_selected[id] = id;
       $('#bulk-selected').append('\
        <input type="hidden" name="leads[]" value="'+id+'" id="bulk-check-'+id+'" />\
       ');
    }else{
        if(id in bulk_selected){
            delete bulk_selected[id];
            $('#bulk-check-'+id).remove();
        }
    }
}

</script>
@endsection