@extends('admin.layouts.master')
@section('title', 'Telecaller Target')
@section('content')
    <style>
        .some-text {
            color: red;
            font-style: italic;
            font-size: 15px;
        }

        .help-block {
            color: red;
            font-size: 13px;
            font-weight: normal;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .company_row {
            display: flex;
            gap: 5px;
            margin-bottom: 4px;
            align-items: center;
        }

        .company_row select {
            width: 300px;
            height: 32px;
            font-size: 13px;
        }

        .company_row input {
            width: 90px;
            height: 32px;
            font-size: 13px;
        }

        .company_row button {
            height: 32px;
            padding: 2px 8px;
            cursor: pointer;
        }
    </style>

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <div class="row">

                <div class="col-md-12">

                    @include('admin.includes.msg')
                    <div class="card card-table">
                        <div class="card-body">
                            <form action="{{ route('telecaller_target_save') }}" method="post">
                                @csrf
                                <div class="card-header">

                                    @php
                                        $currentMonth = date('Y-m');
                                    @endphp

                                    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;">

                                        <div style="display:flex;align-items:center;gap:15px;">

                                            <h4 class="card-title mb-0">
                                                Telecaller Target
                                            </h4>

                                            <label style="margin-bottom:0;">
                                                <strong>Select Month:</strong>
                                            </label>

                                            <select class="form-control"
                                                    style="width:180px;"
                                                    onchange="changeMonth(this.value)">

                                                @for($i = 0; $i <= 12; $i++)

                                                    @php
                                                        $monthValue = date('Y-m', strtotime("-{$i} months"));
                                                    @endphp

                                                    <option value="{{$monthValue}}"
                                                        {{$selectedMonth == $monthValue ? 'selected' : ''}}>
                                                        {{date('F Y', strtotime($monthValue.'-01'))}}
                                                    </option>

                                                @endfor

                                            </select>

                                        </div>

                                        <div>

                                            <a href="javascript:"
                                               onclick="printDiv('printableArea')"
                                               class="btn btn-info"
                                               style="margin-right:10px;">
                                                Print
                                            </a>

                                            @if($selectedMonth == $currentMonth)
                                                <button type="submit"
                                                        name="action"
                                                        value="save"
                                                        class="btn btn-primary">
                                                    Submit
                                                </button>
                                            @endif

                                        </div>

                                    </div>

                                </div>

                                <style>
                                    .select2 {
                                        width: 100% !important;
                                    }

                                    .td {
                                        width: 5%;
                                    }

                                    .td2 {
                                        width: 10%;
                                    }

                                    .select2-selection--single {
                                        height: 36px !important;
                                        width: 100%;
                                    }

                                    .select2-container--default .select2-selection--single .select2-selection__rendered {
                                        height: 36px !important;
                                        line-height: 36px !important;
                                    }

                                    @if(Auth::user()->role<4)
                                    .retailerhide {
                                        display: none
                                    }
                                    @endif
                                </style>

                                <div class="before_mystocktable " id="printableArea">
                                    <style type="text/css" media="print">
                                        @media print {
                                            @page {
                                                margin-top: 0;
                                                margin-bottom: 0;
                                            }

                                            body {
                                                padding-top: 72px;
                                                padding-bottom: 72px;
                                            }
                                        }
                                    </style>

                                    <div class="table-responsive">
                                        <table class="mystocktable" id="mytable">
                                            <tr>
                                                <th style="display:none">#</th>
                                                <th class="td2">Telecaller Name</th>
                                                <th class="td2">Focus Item Target</th>
                                                <th class="td2">Focus Item Achieved</th>
                                                <th class="td2">Sale Target</th>
                                                <th class="td2">Sale Achieved</th>
                                                <th class="td2">Area wise</th>
                                                <th class="td2" style="width: 25%;">Company</th>
                                            </tr>
                                            @foreach($users as $p)
                                                <tr>
                                                    <td style="display:none"></td>
                                                    <td>{{$p->name}}</td>

                                                    <td>
                                                        <input type="text" name="focus_target[{{$p->id}}]" value="{{$p->customer_target}}">
                                                    </td>

                                                    <td>
                                                        ₹ {{ number_format($p->focus_item_achieved, 2) }}
                                                    </td>
                                                    
                                                    <td>
                                                        <input type="text" name="sell_target[{{$p->id}}]" value="{{$p->sell_target}}">
                                                    </td>

                                                    <td>
                                                        ₹ {{ number_format($p->sale_achieved, 2) }}
                                                    </td>

                                                    <td>
                                                        <button type="button" onclick="toggleAreaRow({{$p->id}}, this)" class="btn btn-sm btn-success">
                                                            Manage Area Targets
                                                        </button>

                                                        <div id="areaRow_{{$p->id}}" style="display:none; margin-top:8px;">
                                                            <div id="area_container_{{$p->id}}">

                                                            @if(count($p->areaTargets))

                                                                @foreach($p->areaTargets as $area)

                                                                    <div class="company_row">

                                                                        <select name="area_target[{{$p->id}}][locality_id][]" class="form-control">

                                                                            <option value="">Select Locality</option>

                                                                            @foreach(($p->localities ?? []) as $localityId => $localityName)

                                                                                <option value="{{$localityId}}"
                                                                                    {{$area->locality_id == $localityId ? 'selected' : ''}}>
                                                                                    {{$localityName}}
                                                                                </option>

                                                                            @endforeach

                                                                        </select>

                                                                        <input type="text"
                                                                               name="area_target[{{$p->id}}][target][]"
                                                                               value="{{$area->target}}"
                                                                               class="form-control">
                                                                        <span>
                                                                            Achieved:{{ number_format($p->areaAchievements[$area->locality_id] ?? 0,2) }}
                                                                        </span>

                                                                        <button type="button" onclick="addArea({{$p->id}})">+</button>
                                                                        <button type="button" onclick="removeAreaRow(this)">-</button>

                                                                    </div>

                                                                @endforeach

                                                            @else

                                                                <div class="company_row">

                                                                    <select name="area_target[{{$p->id}}][locality_id][]" class="form-control">

                                                                        <option value="">Select Locality</option>

                                                                        @foreach(($p->localities ?? []) as $localityId => $localityName)

                                                                            <option value="{{$localityId}}">
                                                                                {{$localityName}}
                                                                            </option>

                                                                        @endforeach

                                                                    </select>

                                                                    <input type="text"
                                                                           name="area_target[{{$p->id}}][target][]"
                                                                           class="form-control">

                                                                    <button type="button" onclick="addArea({{$p->id}})">+</button>
                                                                    <button type="button" onclick="removeAreaRow(this)">-</button>

                                                                </div>

                                                            @endif

                                                            </div>
                                                        </div>
                                                    </td>

                                                    <!-- MULTIPLE COMPANY TARGET -->
                                                    <td>
                                                        <button type="button" onclick="toggleRow({{$p->id}}, this)" class="btn btn-sm btn-info">
                                                            Manage Targets
                                                        </button>

                                                        <div id="companyRow_{{$p->id}}" style="display:none; margin-top:8px;">
                                                            <div id="company_container_{{$p->id}}">

                                                            @if(count($p->companyTargets))

                                                                @foreach($p->companyTargets as $company)

                                                                    <div class="company_row">

                                                                        <select name="company_target[{{$p->id}}][company_id][]" class="form-control">

                                                                            <option value="">Company</option>

                                                                            @foreach($companylist as $c)

                                                                                <option value="{{$c->id}}"
                                                                                    {{$company->company_id == $c->id ? 'selected' : ''}}>
                                                                                    {{$c->company_name}}
                                                                                </option>

                                                                            @endforeach

                                                                        </select>

                                                                        @php
                                                                            $companyObj = collect($companylist)->firstWhere('id', $company->company_id);
                                                                            $companyName = $companyObj ? $companyObj->company_name : '';
                                                                        @endphp
                                                                        <input type="text"
                                                                               name="company_target[{{$p->id}}][target][]"
                                                                               value="{{$company->target}}"
                                                                               class="form-control">
                                                                        <span>
                                                                            Achieved:{{ number_format($p->companyAchievements[$companyName] ?? 0, 2) }}
                                                                        </span>
                                                                        

                                                                        <button type="button" onclick="addCompany({{$p->id}})">+</button>
                                                                        <button type="button" onclick="removeRow(this)">-</button>

                                                                    </div>

                                                                @endforeach

                                                            @else

                                                                <div class="company_row">

                                                                    <select name="company_target[{{$p->id}}][company_id][]" class="form-control">

                                                                        <option value="">Company</option>

                                                                        @foreach($companylist as $c)
                                                                            <option value="{{$c->id}}">
                                                                                {{$c->company_name}}
                                                                            </option>
                                                                        @endforeach

                                                                    </select>

                                                                    <input type="text"
                                                                           name="company_target[{{$p->id}}][target][]"
                                                                           class="form-control">

                                                                    <button type="button" onclick="addCompany({{$p->id}})">+</button>
                                                                    <button type="button" onclick="removeRow(this)">-</button>

                                                                </div>

                                                            @endif

                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </table>
                                    </div>

                                </div>


                        </div>

                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
    </div>
    <!-- /Main Wrapper -->
    </div>

    <style>
        .form-control {
            min-width: 60px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#gsearch").on("keyup blur", function () {
                var value = $(this).val().toLowerCase();
                $("#mytable tbody tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });


    </script>
    <script>
        @foreach($users as $u)
            window.localities_{{$u->id}} = `
                @foreach(($u->localities ?? []) as $id => $name)
                    <option value="{{$id}}">{{$name}}</option>
                @endforeach
            `;
        @endforeach
    </script>
    <script>
        function changeMonth(month) {
            window.location.href = "{{ route('telecaller_target') }}?month=" + month;
        }
    function toggleRow(id, btn) {
        let row = document.getElementById('companyRow_' + id);

        if (row.style.display === 'none') {
            row.style.display = 'block';
            btn.innerText = 'Hide';
        } else {
            row.style.display = 'none';
            btn.innerText = 'Manage Targets';
        }
    }

    function addCompany(userId) {
        let container = document.getElementById('company_container_' + userId);

        let html = `
            <div class="company_row">
                <select name="company_target[${userId}][company_id][]" class="form-control">
                    <option value="">Company</option>
                    @foreach($companylist as $c)
                        <option value="{{$c->id}}">{{$c->company_name}}</option>
                    @endforeach
                </select>

                <input type="text"
                       name="company_target[${userId}][target][]"
                       placeholder="Target"
                       class="form-control">

                <button type="button" onclick="addCompany(${userId})">+</button>
                <button type="button" onclick="removeRow(this)">-</button>
            </div>
        `;

        container.insertAdjacentHTML('beforeend', html);
    }

    function removeRow(btn) {
        let container = btn.parentElement.parentElement;

        if (container.children.length > 1) {
            btn.parentElement.remove();
        } else {
            alert('At least one company row is required');
        }
    }
    function toggleAreaRow(id, btn) {
        let row = document.getElementById('areaRow_' + id);

        if (row.style.display === 'none') {
            row.style.display = 'block';
            btn.innerText = 'Hide';
        } else {
            row.style.display = 'none';
            btn.innerText = 'Manage Area Targets';
        }
    }

    function addArea(userId) {
        let html = `
            <div class="company_row">

                <select name="area_target[${userId}][locality_id][]" class="form-control">
                    <option value="">Select Locality</option>
                    ${window['localities_' + userId]}
                </select>

                <input type="text"
                       name="area_target[${userId}][target][]"
                       placeholder="Target"
                       class="form-control">

                <button type="button" onclick="addArea(${userId})">+</button>
                <button type="button" onclick="removeAreaRow(this)">-</button>

            </div>
        `;

        document
            .getElementById('area_container_' + userId)
            .insertAdjacentHTML('beforeend', html);
    }

    function removeAreaRow(btn) {

        let container = btn.parentElement.parentElement;

        if (container.children.length > 1) {
            btn.parentElement.remove();
        } else {
            alert('At least one area row is required');
        }
    }
    </script>
@endsection