@extends('layouts.mainlayout')
@section('fullwidth', true)
@section('content')
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).on('change', '.farm-status-toggle', function () {
            var checkbox = $(this);
            var active = checkbox.is(':checked');

            $.ajax({
                url: "{{ route('farm_active_deactive') }}",
                type: "POST",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    farm_id: checkbox.data('farm-id'),
                    active: active ? 1 : 0
                }
            }).fail(function () {
                checkbox.prop('checked', !active);
                window.alert('The farm status could not be saved. Please try again.');
            });
        });

        $(document).on('change', '.leader-status-toggle', function () {
            var checkbox = $(this);
            var active = checkbox.is(':checked');

            $.ajax({
                url: "{{ route('leader_active_deactive') }}",
                type: "POST",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}",
                    farm_id: checkbox.data('farm-id'),
                    leader_id: checkbox.data('leader-id'),
                    active: active ? 1 : 0
                }
            }).fail(function () {
                checkbox.prop('checked', !active);
                window.alert('The leader assignment could not be saved. Please try again.');
            });
        });
    </script>
    <div class="album text-muted smarthr-employees-page smarthr-sadmin-page smarthr-sadmin-farms">
        <header class="smarthr-employees-page-header"><div><h1>Farm activator</h1><p>Manage active farms, leader assignments and current workforce.</p></div><span class="smarthr-employees-count">{{ count($farm) }} farms</span></header>
        <div class="card align-middle smarthr-employees-card">
            <div class="card-header smarthr-employees-card-header"><div><span class="smarthr-employees-header-icon"><i class="fas fa-tractor"></i></span><span>Farms and leaders</span></div></div>
                <div class="card-body smarthr-sadmin-farm-body">
                    <div class="smarthr-sadmin-farm-grid">
                        <div class="smarthr-sadmin-farm-grid-heading">Farm name</div>
                        <div class="smarthr-sadmin-farm-grid-heading">Active</div>
                        <div class="smarthr-sadmin-farm-grid-heading">Leaders</div>
                        <div class="smarthr-sadmin-farm-grid-heading">Workers</div>
                        @foreach($farm as $fa)

                            <div class="smarthr-sadmin-farm-cell">
                                <p>{{$fa->farm_name}}

                                </p>

                            </div>
                            <div class="smarthr-sadmin-farm-cell">
                                <p>                                    <input type="checkbox"
                                           class="farm-status-toggle"
                                           id="farm-status-{{$fa->id}}"
                                           data-farm-id="{{$fa->id}}"
                                           {{$f_checked}}>
                                </p>

                            </div>
                            <div class="smarthr-sadmin-farm-cell">
                                <p>