@extends('layouts.main')
@section('title', 'Plan Details')
@section('container')

    {{-- ************ Div **************** --}}
    <div class="container-fluid">
        <div class="row">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex align-items-center">
                    <ul class="nav nav-pills mix-chart-tab user-m-tabe" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" title="Distributor List" data-series="colm" id="pills-colm-tab"
                                data-bs-toggle="pill" data-bs-target="#pills-colm" type="button" role="tab"
                                aria-selected="false">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="24px" height="24px" viewBox="0 0 24  24" version="1.1" class="svg-main-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path
                                            d="M10.5,5 L19.5,5 C20.3284271,5 21,5.67157288 21,6.5 C21,7.32842712 20.3284271,8 19.5,8 L10.5,8 C9.67157288,8 9,7.32842712 9,6.5 C9,5.67157288 9.67157288,5 10.5,5 Z M10.5,10 L19.5,10 C20.3284271,10 21,10.6715729 21,11.5 C21,12.3284271 20.3284271,13 19.5,13 L10.5,13 C9.67157288,13 9,12.3284271 9,11.5 C9,10.6715729 9.67157288,10 10.5,10 Z M10.5,15 L19.5,15 C20.3284271,15 21,15.6715729 21,16.5 C21,17.3284271 20.3284271,18 19.5,18 L10.5,18 C9.67157288,18 9,17.3284271 9,16.5 C9,15.6715729 9.67157288,15 10.5,15 Z"
                                            fill="#000000" />
                                        <path
                                            d="M5.5,8 C4.67157288,8 4,7.32842712 4,6.5 C4,5.67157288 4.67157288,5 5.5,5 C6.32842712,5 7,5.67157288 7,6.5 C7,7.32842712 6.32842712,8 5.5,8 Z M5.5,13 C4.67157288,13 4,12.3284271 4,11.5 C4,10.6715729 4.67157288,10 5.5,10 C6.32842712,10 7,10.6715729 7,11.5 C7,12.3284271 6.32842712,13 5.5,13 Z M5.5,18 C4.67157288,18 4,17.3284271 4,16.5 C4,15.6715729 4.67157288,15 5.5,15 C6.32842712,15 7,15.6715729 7,16.5 C7,17.3284271 6.32842712,18 5.5,18 Z"
                                            fill="#000000" opacity="0.3" />
                                    </g>
                                </svg>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" title="User List" data-series="list" id="pills-week-tab"
                                data-bs-toggle="pill" data-bs-target="#pills-list" type="button" role="tab"
                                aria-selected="true">

                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="svg-main-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <rect fill="#000000" opacity="0.3" x="4" y="4" width="4" height="4" rx="1" />
                                        <path
                                            d="M5,10 L7,10 C7.55228475,10 8,10.4477153 8,11 L8,13 C8,13.5522847 7.55228475,14 7,14 L5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 C4,10.4477153 4.44771525,10 5,10 Z M11,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,7 C14,7.55228475 13.5522847,8 13,8 L11,8 C10.4477153,8 10,7.55228475 10,7 L10,5 C10,4.44771525 10.4477153,4 11,4 Z M11,10 L13,10 C13.5522847,10 14,10.4477153 14,11 L14,13 C14,13.5522847 13.5522847,14 13,14 L11,14 C10.4477153,14 10,13.5522847 10,13 L10,11 C10,10.4477153 10.4477153,10 11,10 Z M17,4 L19,4 C19.5522847,4 20,4.44771525 20,5 L20,7 C20,7.55228475 19.5522847,8 19,8 L17,8 C16.4477153,8 16,7.55228475 16,7 L16,5 C16,4.44771525 16.4477153,4 17,4 Z M17,10 L19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 C20,13.5522847 19.5522847,14 19,14 L17,14 C16.4477153,14 16,13.5522847 16,13 L16,11 C16,10.4477153 16.4477153,10 17,10 Z M5,16 L7,16 C7.55228475,16 8,16.4477153 8,17 L8,19 C8,19.5522847 7.55228475,20 7,20 L5,20 C4.44771525,20 4,19.5522847 4,19 L4,17 C4,16.4477153 4.44771525,16 5,16 Z M11,16 L13,16 C13.5522847,16 14,16.4477153 14,17 L14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 C10.4477153,20 10,19.5522847 10,19 L10,17 C10,16.4477153 10.4477153,16 11,16 Z M17,16 L19,16 C19.5522847,16 20,16.4477153 20,17 L20,19 C20,19.5522847 19.5522847,20 19,20 L17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,16.4477153 16.4477153,16 17,16 Z"
                                            fill="#000000" />
                                    </g>
                                </svg>
                            </button>
                        </li>
                    </ul>

                </div>
            </div>
            <div class="col-xl-12 active-p">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade" id="pills-list" role="tabpanel">
                        <div class="row">
                            @foreach ($distributor as $row)
                                @php
                                    $counts = DB::table("planalloctions")->where([
                                        'company_id' => $data->company_id,
                                        'zone_id' => $data->zone_id,
                                        'unit_id' => $data->unit_id,
                                        'project_id' => $data->project_id,
                                        'auditor_id' => $row->id
                                    ])
                                        ->selectRaw('
                                                COUNT(*) as totaldis,
                                                SUM(CASE WHEN status = 1 THEN 1 ELSE 0 END) as pending,
                                                SUM(CASE WHEN status = 2 THEN 1 ELSE 0 END) as WIP,
                                                SUM(CASE WHEN status > 2 THEN 1 ELSE 0 END) as Complete
                                            ')
                                        ->first();
                                @endphp

                                <div class="col-md-3 col-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="card-use-box">
                                                <div class="crd-bx-img">
                                                    <center>
                                                        <h1
                                                            style="color:#fff;background: var(--secondary);width: 50px;display: flex;justify-content: center;align-items: center;border-radius: 50%;">
                                                            {{ strtoupper(substr($row->name, 0, 1)) }}
                                                        </h1>
                                                    </center>
                                                </div>
                                                <div class="card__text">
                                                    <h4 class="mb-0"></h4>
                                                    <p>{{ $row->name }}</p>
                                                </div>
                                                <ul class="card__info">
                                                    <li>
                                                        <span class="card__info__stats">{{ $counts->totaldis ?? 0 }}</span>
                                                        <span>Total Distributor</span>
                                                    </li>
                                                    <li>
                                                        <span class="card__info__stats">{{ $counts->pending ?? 0 }}</span>
                                                        <span>Pending Distributor</span>
                                                    </li>
                                                    <li>
                                                        <span class="card__info__stats">{{ $counts->WIP ?? 0 }}</span>
                                                        <span>WIP Distributor</span>
                                                    </li>
                                                    <li>
                                                        <span class="card__info__stats">{{ $counts->Complete ?? 0 }}</span>
                                                        <span>Complete Distributor</span>
                                                    </li>
                                                </ul>
                                                <ul class="post-pos">
                                                    <li>
                                                        <span class="card__info__stats">Mobile: </span>
                                                        <span>{{ $row->mobile }}</span>
                                                    </li>
                                                    <li>
                                                        <span class="card__info__stats">Email : </span>
                                                        <span>{{ $row->email }}</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="tab-pane fade show active" id="pills-colm" role="tabpanel" aria-labelledby="pills-colm-tab">
                        {{-- ******* Tab ******** --}}
                        <div class="row">
                            <div class="col-xl-12 col-lg-12">
                                <div class="card" style="height: max-content;">
                                    <div class="card-header p-2" style="background:var(--secondary) ;">
                                        <div class="row" style=" width: 100%; ">
                                            <div class="col-md-6 col-6">
                                                <h4 class="card-title">Plan - View</h4>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <div></div>
                                                <button class="btn btn-primary p-2" style="float:right;margin:10px;"
                                                    data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm"><i
                                                        class="fa fa-history"></i> Reallocation</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        {{-- ******** tables ********* --}}
                                        <div class="table-responsive">
                             we               <table id="distributorTable" class=" display nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>Sr No</th>
                                                        <th># <input type="checkbox" id="checkAll" class="form-check-input">
                                                        </th>
                                                        <th>Company ID</th>
                                                        <th>Zone ID</th>
                                                        <th>Unit ID</th>
                                                        <th>Project ID</th>
                                                        <th>Customer Code</th>
                                                        <th>Distributor Name</th>
                                                        <th>Contact Person</th>
                                                        <th>Mobile No</th>
                                                        <th>Address</th>
                                                    </tr>
                                                </thead>
                                            </table>

                                        </div>
                                        {{-- ********** table ********* --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ******* Tab ******** --}}

                </div>
            </div>
        </div>
    </div>
    </div>
    {{-- ************ Div **************** --}}
@endsection
<form id="deletenow">
    @csrf
    <input type="hidden" id="deleteid" name="deleteid" />
    <input type="hidden" id="status" name="status" />
    <button class="btn btn-danger" id="deletenowsubmit"></button>

</form>


<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header" style="background:var(--secondary) ;">
                <h5 class="modal-title">Filters</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-6 col-md-6">
                        <label>From: <input type="date" id="minDate" class="form-control"></label>
                    </div>
                    <div class="col-xxl-6 col-md-6">
                        <label>To: <input type="date" id="maxDate" class="form-control"></label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                <button type="button" id="filterDate" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>


<input type="hidden" value="{{ $data->id }}" id="planid" />
<input type="hidden" value="{{ $data->company_id }}" id="company_id" />
<input type="hidden" value="{{ $data->zone_id }}" id="zone_id" />
<input type="hidden" value="{{ $data->unit_id }}" id="unit_id" />
<input type="hidden" value="{{ $data->project_id }}" id="project_id" />

<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/editplan.js') }}"></script>