@extends('layouts.master')

@section('main-section')
<div class="content-page">
    <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                                <li class="breadcrumb-item active">{{ $page_info['page_title'] }}</li>
                            </ol>
                        </div>
                        <h4 class="page-title">{{ $page_info['page_title'] }}</h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <ul class="nav nav-tabs nav-bordered mb-3" id="reportTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="utm-tab" data-bs-toggle="tab" href="#utm" data-bs-target="#utm" role="tab" aria-controls="utm" aria-selected="true">
                                <span class="d-none d-md-block">Branch Fresh vs Repeated Report</span>
                                <span class="d-block d-md-none">Fresh vs Repeated</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="salary-tab" data-bs-toggle="tab" href="#Salary" data-bs-target="#Salary" role="tab" aria-controls="Salary" aria-selected="false">
                                <span class="d-none d-md-block">Salary-Branch wise</span>
                                <span class="d-block d-md-none">Salary</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="total-tab" data-bs-toggle="tab" href="#Total" data-bs-target="#Total" role="tab" aria-controls="Total" aria-selected="false">
                                <span class="d-none d-md-block">Total Lead- Branch wise</span>
                                <span class="d-block d-md-none">Total Lead</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="employed-tab" data-bs-toggle="tab" href="#Employed" data-bs-target="#Employed" role="tab" aria-controls="Employed" aria-selected="false">
                                <span class="d-none d-md-block">Employment Status- Branch wise</span>
                                <span class="d-block d-md-none">Employment</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="status-tab" data-bs-toggle="tab" href="#Status" data-bs-target="#Status" role="tab" aria-controls="Status" aria-selected="false">
                                <span class="d-none d-md-block">Status Wise Report- Branch wise</span>
                                <span class="d-block d-md-none">Status Wise</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" id="reportTabsContent">
                        <!-- UTM Tab -->
                        <div class="tab-pane fade show active" id="utm" role="tabpanel">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form action="" id="filterForm">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">UTM Source</span>
                                                            <select name="utmsrc" id="utmsrc" class="form-control form-select">
                                                                <option value="">Select Utm Source</option>
                                                                <option value="All">All</option>
                                                                @foreach ($utmSrc as $utm)
                                                                    <option value="{{ $utm->leadSource }}">{{ $utm->leadSource }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">Start Date</span>
                                                            <input type="text" class="form-control datepicker" name="start_date" id="start_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">End Date</span>
                                                            <input type="text" class="form-control datepicker" name="end_date" id="end_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <button type="submit" id="calculate" class="btn btn-primary">
                                                            <i class="mdi mdi-magnify me-1"></i> Search
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="dataTable"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Salary Tab -->
                        <div class="tab-pane fade" id="Salary" role="tabpanel">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form action="" id="salaryForm">
                                                @csrf
                                                <div class="row g-2">
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">City</span>
                                                            <select name="branch" id="salary_branch" class="form-control form-select" required>
                                                                <option value="">Select City</option>
                                                                <option value="All">All</option>
                                                                @foreach ($branch as $br)
                                                                    <option value="{{ $br->cityName }}">{{ $br->cityName }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">UTM</span>
                                                            <select name="utmsrc" id="salary_utmsrc" class="form-control form-select">
                                                                <option value="">Select Utm Source</option>
                                                                <option value="All">All</option>
                                                                @foreach ($utmSrc as $utm)
                                                                    <option value="{{ $utm->leadSource }}">{{ $utm->leadSource }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">Start</span>
                                                            <input type="text" class="form-control datepicker" name="start_date" id="salary_start_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">End</span>
                                                            <input type="text" class="form-control datepicker" name="end_date" id="salary_end_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button type="submit" id="calculate_salary" class="btn btn-primary w-100">
                                                            <i class="mdi mdi-magnify me-1"></i> Search
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="dataTable2"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Total Tab -->
                        <div class="tab-pane fade" id="Total" role="tabpanel">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form action="" id="totalForm">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">UTM</span>
                                                            <select name="utmsrc" id="total_utmsrc" class="form-control form-select" required>
                                                                <option value="">Select Utm Source</option>
                                                                <option value="All">All</option>
                                                                @foreach ($utmSrc as $utm)
                                                                    <option value="{{ $utm->leadSource }}">{{ $utm->leadSource }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">Start</span>
                                                            <input type="text" class="form-control datepicker" name="start_date" id="total_start_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">End</span>
                                                            <input type="text" class="form-control datepicker" name="end_date" id="total_end_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <button type="submit" id="calculate_total" class="btn btn-primary">
                                                            <i class="mdi mdi-magnify me-1"></i> Search
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="dataTable3"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Employed Tab -->
                        <div class="tab-pane fade" id="Employed" role="tabpanel">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form action="" id="employedForm">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">UTM</span>
                                                            <select name="utmsrc" id="employed_utmsrc" class="form-control form-select" required>
                                                                <option value="">Select Utm Source</option>
                                                                <option value="All">All</option>
                                                                @foreach ($utmSrc as $utm)
                                                                    <option value="{{ $utm->leadSource }}">{{ $utm->leadSource }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">Start</span>
                                                            <input type="text" class="form-control datepicker" name="start_date" id="employed_start_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">End</span>
                                                            <input type="text" class="form-control datepicker" name="end_date" id="employed_end_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <button type="submit" id="calculate_employed" class="btn btn-primary">
                                                            <i class="mdi mdi-magnify me-1"></i> Search
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="dataTable4"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Status Tab -->
                        <div class="tab-pane fade" id="Status" role="tabpanel">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <form action="" id="statusForm">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">UTM</span>
                                                            <select name="branch" id="status_utmsrc" class="form-control form-select" required>
                                                                <option value="">Select Branch Source</option>
                                                                <option value="All">All</option>
                                                                @foreach ($branch as $br)
                                                                    <option value="{{ $br->cityID }}">{{ $br->cityName }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">Start</span>
                                                            <input type="text" class="form-control datepicker" name="start_date" id="status_start_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="input-group">
                                                            <span class="input-group-text fw-bold">End</span>
                                                            <input type="text" class="form-control datepicker" name="end_date" id="status_end_date" placeholder="YYYY-MM-DD" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <button type="submit" id="calculate_status" class="btn btn-primary">
                                                            <i class="mdi mdi-magnify me-1"></i> Search
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive" id="dataTable5"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-js')
<script>
    $(document).ready(function() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });

        // Common function for AJAX submission with DataTable
        function submitReportForm(formId, routeName, resultDivId) {
            $(formId).on('submit', function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $(resultDivId).html('<div class="text-center p-4"><div class="spinner-border text-primary" role="status"><span class="sr-only"></span></div><br></div>');
                
                $.ajax({
                    url: routeName,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if(response.status) {
                            $(resultDivId).html(response.html);
                            // Re-initialize DataTable
                            if ($.fn.DataTable.isDataTable(resultDivId + ' table')) {
                                $(resultDivId + ' table').DataTable().destroy();
                            }
                            $(resultDivId + ' table').DataTable({
                                dom: 'Bfrtip',
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                                pageLength: 10,
                                responsive: true
                            });
                        } else {
                            $(resultDivId).html('<div class="alert alert-danger">Error loading data.</div>');
                        }
                    },
                    error: function() {
                        $(resultDivId).html('<div class="alert alert-danger">Something went wrong.</div>');
                    }
                });
            });
        }

        // Initialize forms
        submitReportForm('#filterForm', "{{ route('branchWiseList') }}", '#dataTable');
        submitReportForm('#salaryForm', "{{ route('salaryBranchWiseList') }}", '#dataTable2');
        submitReportForm('#totalForm', "{{ route('totalLeadBranchWise') }}", '#dataTable3');
        submitReportForm('#employedForm', "{{ route('employmentStatusBranchWise') }}", '#dataTable4');
        submitReportForm('#statusForm', "{{ route('statusWiseBranchWise') }}", '#dataTable5');
    });
</script>
@endsection