@extends('layouts.admin')

@section('title' , 'Company Summary Report')

@section('breadcrumb-item')
    <li class="breadcrumb-item active">Company Summary</li>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Company Summery</p>
        </div>
    </div>

    <div class="card-body" style="overflow-x: auto">
        <form action="{{ route('admin.reports.company-summary-search') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-3">
                    <div class="form-group">
                        <label>Companies</label>
                        <select class="form-control js-example-theme-multiple" name="company_names[]" multiple>
                            @foreach(_companies() as $company_name)
                                <option value="{{ $company_name }}"
                                    {{ isset($company_names) && in_array($company_name, $company_names) ? 'selected' : '' }}>
                                    {{ $company_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label>Shops</label>
                        <select class="form-control js-example-theme-multiple" name="shop_ids[]" multiple>
                            @foreach(_shops() as $shop)
                                <option value="{{ $shop->id }}"
                                    {{ isset($shop_ids) && in_array($shop->id, $shop_ids) ? 'selected' : '' }}>
                                    {{ $shop->name }} [{{$shop->area ? $shop->area->name : ""}}]  [{{ $shop->id }}]
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" name="order_status">
                            <option value="">All</option>
                            @foreach($statuses as $key => $value)
                                <option value="{{ $value }}"
                                    {{ isset($order_status) ? $order_status == $value ? 'selected' : '' : '' }}>
                                    {{ $key }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label>Start Date</label>
                        <input id="datepicker1" name="start_date" value="{{ request()->start_date ?? date('Y-m-d') }}" />
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label>End Date</label>
                        <input id="datepicker2" name="end_date" value="{{ request()->end_date ?? date('Y-m-d') }}" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-3">
                    <div class="form-group">
                        <label>Employees</label>
                        <select class="form-control js-example-theme-multiple" name="employee_ids[]" multiple>
                            @foreach(_employees() as $employee)
                                <option value="{{ $employee->id }}"
                                    {{ isset($employee_ids) && in_array($employee->id, $employee_ids) ? 'selected' : '' }}>
                                    {{ $employee->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-3">
                    <div class="form-group">
                        <label>Areas</label>
                        <select class="form-control js-example-theme-multiple" name="area_ids[]" multiple>
                            @foreach(_areas() as $area)
                                <option value="{{ $area->id }}"
                                    {{ isset($area_ids) && in_array($area->id, $area_ids) ? 'selected' : '' }}>
                                    {{ $area->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-3">
                    <div class="form-group">
                        <label>Products</label>
                        <select class="form-control js-example-theme-multiple" name="product_ids[]" multiple>
                            @foreach(_products() as $product)
                                <option value="{{ $product->id }}"
                                    {{ isset($product_ids) && in_array($product->id, $product_ids) ? 'selected' : '' }}>
                                    {{ $product->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <br />
            <div class="row mt-4">
                <div class="col-md-12 text-center">
                    <button type="submit" class="btn btn-sm btn-success col-md-3 search-btn" onclick="saveSelections()">
                        Search
                    </button>
                    <button type="button" class="btn btn-sm btn-success col-md-3 print-btn">
                        Print
                    </button>
                    <a href="{{ route('admin.reports.company-summary') }}">
                        <button type="button" class="btn btn-sm btn-success col-md-3">
                            Reload
                        </button>
                    </a>
                </div>
            </div>
        </form>

        <div class="print_content">
            <div class="summary-header text-center mt-4 mb-4">
                <h4>Grand Summery Report</h4>
                <table class="printFontSize table table-bordered">
                    <tr>
                        <td><b>Company Name</b></td>
                        <td><b><span id="company"></span></b></td>
                    </tr>
                    <tr>
                        <td><b>Booker Name</b></td>
                        <td><b><span id="employee"></span></b></td>
                    </tr>
                    <tr>
                        <td><b>Start Date</b></td>
                        <td><b><span id="start_date"></span></b></td>
                    </tr>
                    <tr>
                        <td><b>End Date</b></td>
                        <td><b><span id="end_date"></span></b></td>
                    </tr>
                </table>
                <input type="button" value="Hide" onclick="myFunction()" id="btn" class="btn btn-air-success btn-xs"/>
            </div>

            <div id="myDIV">
                <table class="printFontSize table table-hover">
                    <thead>
                    <tr>
                        <th>Company Name</th>
                        <th>Total Sale Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($result['grand_result'] ?? [] as $company_name => $total)
                        <tr>
                            <td>{{ $company_name }}</td>
                            <td>{{ $total }}</td>
                        </tr>
                    @empty
                        <tr colspan="2">
                            <td>No Records</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>


            <div class="summary-header text-center mt-4 mb-4">
                <h4>Summery Report</h4>
            </div>

            <div class="row">
                <div>
                    <table class="printFontSize table table-bordered">
                        <tr>
                            <th>Grand Total:</th>
                            <td>{{ $result['grand_total'] ?? 0  }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <br>

            <table class="printFontSize table table-hover">
                <thead>
                <tr>
                    <th>Company Name</th>
                    <th>Total Sale Amount</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($result['dates'] ?? [] as $date => $records)
                    <tr>
                        <td colspan="2" class="text-center">
                            <input type="button" value="{{ $date }}" onclick="dateFunction('{{ $date }}')" id="btn" class="btn btn-air-success btn-xs"/>
                        </td>
                    </tr>
                    @foreach($records['records'] ?? [] as $record)
                        <tr class="{{$date}}">
                            <td>{{ $record['company_name'] }}</td>
                            <td>{{ $record['total'] }}</td>
                        </tr>
                    @endforeach
                    <tr>
                        <th>Total</th>
                        <th>{{ $records['total'] }}</th>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="text-center">
                            No records found
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            $('.js-example-theme-multiple').select2({
                theme: 'classic',
            });

            $('#datepicker1').datepicker({
                format: 'yyyy-mm-dd',
                uiLibrary: 'bootstrap4',
            });

            $('#datepicker2').datepicker({
                format: 'yyyy-mm-dd',
                uiLibrary: 'bootstrap4',
            });
        });

        function displaySelectedDates() {
            let startDate = document.getElementById('datepicker1').value;
            let endDate = document.getElementById('datepicker2').value;
            document.getElementById('start_date').textContent = startDate ? startDate : 'No Start Date Selected';
            document.getElementById('end_date').textContent = endDate ? endDate : 'No End Date Selected';
        }
            window.onload = function() {
            displaySelectedDates();
        };
        document.getElementById('start_date').addEventListener('change', displaySelectedDates);
        document.getElementById('end_date').addEventListener('change', displaySelectedDates);


        function saveSelections() {
            let selectedCompanies = [];
            let selectedEmployees = [];

            let companyOptions = document.querySelectorAll('select[name="company_names[]"] option:checked');
            companyOptions.forEach(function(option) {
                selectedCompanies.push(option.textContent);
            });

            let employeeOptions = document.querySelectorAll('select[name="employee_ids[]"] option:checked');
            employeeOptions.forEach(function(option) {
                selectedEmployees.push(option.textContent);
            });

            sessionStorage.setItem('selectedCompanies', JSON.stringify(selectedCompanies));
            sessionStorage.setItem('selectedEmployees', JSON.stringify(selectedEmployees));
        }

        $(document).on('click', '.search-btn', function() {
            saveSelections();
        });

        function loadSelections() {
            let companies = JSON.parse(sessionStorage.getItem('selectedCompanies')) || [];
            let employees = JSON.parse(sessionStorage.getItem('selectedEmployees')) || [];

            let selectedCompanyElement = document.getElementById('company');
            selectedCompanyElement.textContent = companies.length > 0 ? companies.join(',') : 'No Company Selected';

            let selectedEmployeeElement = document.getElementById('employee');
            selectedEmployeeElement.textContent = employees.length > 0 ? employees.join(',') : 'No Booker Name Selected';
        }

        $(document).ready(function() {
            loadSelections();
        });


        $(document).on('click', '.print-btn', function() {
            let printContentElement = document.querySelector('.print_content');
            let clone = printContentElement.cloneNode(true);
            let printWindow = window.open('', '_blank');
            printWindow.document.write('<html><head><title>Print</title>');
            printWindow.document.write('<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">');
            printWindow.document.write('</head><body>');
            printWindow.document.write('<style>@media print{body{margin: 0; padding: 0;}}</style>');
            printWindow.document.body.appendChild(clone);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            function printContent() {
                printWindow.print();
                printWindow.close();
            }
            setTimeout(printContent, 1000);
        });

        function dateFunction(date)
        {
             var rows = document.getElementsByClassName(date);

            for(var i=0; i<rows.length; i++) {
                rows[i].classList.toggle("d-none");
            }
        }

        function myFunction() {
            var x = document.getElementById("myDIV");

            x.classList.toggle("d-none");
        }

        const btn = document.getElementById("btn");

        btn.addEventListener("click", ()=>{

            if(btn.value === "Show"){
                btn.value = "Hide";
            }else{
                btn.value= "Show";
            }
        })
    </script>
@endsection