@extends('layouts/contentNavbarLayout')

@section('title', 'Companies')

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Companies</li>
    </ol>
</nav>

<!-- Statistics Cards -->
<style>
    .stat-card {
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }
    .stat-card .card-body {
        padding: 0.75rem 1rem;
    }
    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .stat-label {
        font-size: 0.75rem;
        opacity: 0.95;
        font-weight: 500;
        margin-top: 0.15rem;
    }
    .stat-icon {
        font-size: 1.75rem;
        opacity: 0.3;
    }
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
    @media (min-width: 1200px) {
        .stats-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (max-width: 1199px) and (min-width: 768px) {
        .stats-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (max-width: 767px) {
        .stats-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    .filter-section .form-label {
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    .filter-section .form-control,
    .filter-section .form-select {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    .filter-section .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
</style>

<div class="stats-container mb-3">
    <!-- Total Companies -->
    <div class="card bg-primary text-white stat-card h-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stat-number mb-0">{{ number_format($stats['total']) }}</div>
                    <div class="stat-label">Total Companies</div>
                </div>
                <i class="mdi mdi-office-building stat-icon"></i>
            </div>
        </div>
    </div>
    <!-- Total Employees -->
    <div class="card bg-info text-white stat-card h-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stat-number mb-0">{{ number_format($stats['total_employees']) }}</div>
                    <div class="stat-label">Total Employees</div>
                </div>
                <i class="mdi mdi-account-group stat-icon"></i>
            </div>
        </div>
    </div>
    <!-- Total Departments -->
    <div class="card bg-success text-white stat-card h-100">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="stat-number mb-0">{{ number_format($stats['total_departments']) }}</div>
                    <div class="stat-label">Total Departments</div>
                </div>
                <i class="mdi mdi-folder-multiple stat-icon"></i>
            </div>
        </div>
    </div>
</div>

<!-- Search and Filter Section -->
<div class="card mb-3 filter-section">
    <div class="card-body py-2">
        <form method="GET" action="{{ route('companies.index') }}" id="filter-form">
            <div class="row g-2">
                <!-- Search -->
                <div class="col-md-4">
                    <label class="form-label">Search</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="mdi mdi-magnify"></i></span>
                        <input type="text" class="form-control form-control-sm" name="search" 
                               value="{{ request('search') }}" 
                               placeholder="Name, Code...">
                        @if(request('search'))
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearSearch()">
                                <i class="mdi mdi-close"></i>
                            </button>
                        @endif
                    </div>
                </div>

                <!-- Sort By -->
                <div class="col-md-2">
                    <label class="form-label">Sort By</label>
                    <select class="form-select form-select-sm" name="sort_by">
                        <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Date</option>
                        <option value="name" {{ request('sort_by') == 'name' ? 'selected' : '' }}>Name</option>
                        <option value="code" {{ request('sort_by') == 'code' ? 'selected' : '' }}>Code</option>
                    </select>
                </div>

                <!-- Sort Order -->
                <div class="col-md-2">
                    <label class="form-label">Order</label>
                    <select class="form-select form-select-sm" name="sort_order">
                        <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                    </select>
                </div>

                <!-- Action Buttons -->
                <div class="col-md-4 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="mdi mdi-filter"></i> Apply Filters
                    </button>
                    @if(request('search') || request('sort_by') || request('sort_order'))
                        <a href="{{ route('companies.index') }}" class="btn btn-secondary btn-sm">
                            <i class="mdi mdi-close"></i> Clear
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(auth()->user()->super_admin === true)
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Companies</h5>
            <a href="{{ route('companies.create') }}" class="btn btn-info btn-sm">
                <i class="mdi mdi-plus"></i> Create Company
            </a>
        </div>
    @endif

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Company</th>
                        <th>Code</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Employees</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($companies as $company)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <img src="{{ $company->logo ? asset('storage/'.$company->logo) : asset('assets/img/default_image/default_company.png') }}" 
                                     class="rounded me-3" 
                                     alt="Logo" 
                                     width="50" 
                                     height="50" 
                                     style="object-fit: cover;">
                                <div>
                                    <strong>{{ $company->name }}</strong>
                                    @if($company->responsible)
                                        <br><small class="text-muted">Responsible: {{ $company->responsible }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            @if($company->code)
                                <span class="badge bg-secondary">{{ $company->code }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>{{ $company->email ?? '-' }}</td>
                        <td>{{ $company->tel ?? '-' }}</td>
                        <td>
                            <span class="badge bg-info">{{ $company->employees_count ?? 0 }}</span>
                        </td>
                        <td class="text-center">
                            <div class="btn-group" role="group">
                                <a href="{{ route('companies.edit', $company->id) }}" 
                                   class="btn btn-icon btn-info btn-sm" 
                                   title="Edit">
                                    <i class="mdi mdi-pencil-outline"></i>
                                </a>
                                <a href="{{ route('employees.index', ['company_id' => $company->id]) }}" 
                                   class="btn btn-icon btn-primary btn-sm"
                                   title="View Employees">
                                    <i class="mdi mdi-account-group-outline"></i>
                                </a>
                                <a href="{{ route('company.contract.index',['idCompany' => $company->id]) }}" 
                                   title="List Contracts" 
                                   class="btn btn-icon btn-primary btn-sm">
                                    <i class="mdi mdi-format-list-bulleted"></i>
                                </a>
                                <a href="{{ route('content.assignedContactPersons.index',['idCompany' => $company->id]) }}" 
                                   title="List Contact Persons" 
                                   class="btn btn-icon btn-primary btn-sm">
                                    <i class="mdi mdi-format-list-bulleted-square"></i>
                                </a>
                                <a href="#" 
                                   class="btn btn-icon btn-success btn-sm" 
                                   data-bs-toggle="modal" 
                                   data-bs-target="#createEmployees"
                                   data-company-id="{{ $company->id }}"
                                   data-company-code="{{ $company->code ?? '' }}"
                                   data-company-name="{{ $company->name }}"
                                   title="Generate Employees">
                                    <i class="mdi mdi-account-multiple-plus"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6">
                            <div class="alert alert-info col-md-6" role="alert">
                                No companies found!
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($companies->hasPages())
        <div class="card-footer">
            <div class="d-flex justify-content-center">
                {{ $companies->appends(request()->query())->links() }}
            </div>
        </div>
    @endif
</div>

@include('components.delete_confirm_modal', ['entity' => 'company', 'action' => 'CRM/companies'])

<!-- create employees Modal -->
<div class="modal fade" id="createEmployees" tabindex="-1" aria-labelledby="createEmployeesLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createEmployeesLabel">Generate a list of employees</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addEmployeesForm" method="POST" action="">
        @csrf
      <div class="modal-body">
          <div class="mb-3">
            <label for="code_company" class="form-label" id="company_code"></label>
          </div>
          <div class="mb-3">
            <label for="nb_employees" class="form-label">Number of employees</label>
            <input type="text" class="form-control" id="nb_employees" name="nb_employees">
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Voucher Modal -->
<div class="modal fade" id="voucherModal" tabindex="-1" aria-labelledby="voucherModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="voucherModalLabel">Company Vouchers</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <button onclick="showAddVoucherForm()" class="btn btn-sm btn-primary">Add</button>
                <!-- Form to add new voucher -->
                <div class="my-3" id="addVoucherForm" style="display: none; border: 1px solid #dee2e6; padding: 15px;">
                    <div class="mb-3">
                        <label for="code" class="form-label">Code</label>
                        <input type="text" class="form-control" id="code" name="code" required>
                    </div>
                    <input type="hidden" class="form-control" id="company_id" name="company_id">
                    <div class="mb-3">
                        <label for="start_date" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="start_date" name="start_date" required>
                    </div>
                    <div class="mb-3">
                        <label for="end_date" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="end_date" name="end_date" required>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="discount_type" class="form-label">Discount Type</label>
                            <select class="form-control" id="discount_type" name="discount_type" onchange="handleDiscountTypeChange()" required>
                                <option value=""></option>
                                <option value="price">Price</option>
                                <option value="percent">Percent</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="percentOptions" style="display: none;">
                            <label for="percentage" class="form-label">Discount Percentage</label>
                            <select class="form-control" id="percentage" name="discount_percentage">
                                @for ($i = 1; $i  <  101; $i++)
                                <option value="{{$i}}">{{$i}}%</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-6" id="priceInput" style="display: none;">
                            <label for="discount_amount" class="form-label">Discount Amount</label>
                            <input type="text" class="form-control" id="discount_amount" name="discount_amount">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="voucher_type" class="form-label">Voucher Type</label>
                            <select class="form-control" id="voucher_type" name="type" onchange="handleVoucherTypeChange()" required>
                                <option value=""></option>
                                <option value="all_employees">All employees</option>
                                <option value="all_departments">All departments</option>
                                <option value="selected_employees">Selected employees</option>
                                <option value="selected_departments">Selected departments</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="employeeOptions" style="display: none;">
                            <label for="employeesSelect" class="form-label">Employees</label>
                            <select class="select2 form-select" id="employeesSelect" name="employees_ids[]" multiple>
                            </select>
                        </div>
                        <div class="col-md-6" id="departmentOptions" style="display: none;">
                            <label for="departmentsSelect" class="form-label">Departments</label>
                            <select class="select2 form-select" id="departmentsSelect" name="departments_ids[]" multiple>
                            </select>
                        </div>
                    </div>
                    <div class="">
                        <button onclick="addVoucher()" class="btn btn-sm btn-success">Submit</button>
                        <button onclick="hideAddVoucherForm()" class="btn btn-sm btn-secondary">Cancel</button>
                    </div>
                </div>
                <div class="mt-3">
                    <table id="vouchersTable" class="table">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Type</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var createEmployeesModal = document.getElementById('createEmployees');
    createEmployeesModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var code = button.getAttribute('data-company-code');
        var name = button.getAttribute('data-company-name');
        var companyId = button.getAttribute('data-company-id');
        var form = document.getElementById('addEmployeesForm');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            var nbEmployeesInput = document.getElementById('nb_employees');
            if (!nbEmployeesInput.value.trim()) {
                alert('Please fill in the number of employees.');
                nbEmployeesInput.focus();
            }
            form.action = `/CRM/companies/${companyId}/employees`;
            var formData = new FormData(form);
            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
            }).then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `employees_${code}.csv`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.location.href = `{{ route('companies.employees', ['id' => ':id']) }}`.replace(':id', companyId);
            }).catch(error => console.error('Error:', error));
        });

        var modalTitle = createEmployeesModal.querySelector('.modal-title');
        var modalBodyInput = createEmployeesModal.querySelector('.modal-body');
        var code_company = createEmployeesModal.querySelector('.modal-body #company_code');
        const  btnSave = createEmployeesModal.querySelector('#createEmployees .modal-footer .btn-primary');

        if (code === '') {
            modalTitle.textContent = 'Add Code for ' + name;
            modalBodyInput.innerHTML = '<div class="alert alert-warning" role="alert">It\'s required to add a code to this company to be continued.</div>';
            btnSave.style.pointerEvents = 'none';
            btnSave.style.opacity = '0.5';
        } else {
            code_company.innerHTML = 'Employee usernames will take the following format: <b>' + code + '_0001</b>'
            btnSave.style.pointerEvents = 'auto';
            btnSave.style.opacity = '1';
        }
    });
});

function clearSearch() {
    document.querySelector('input[name="search"]').value = '';
    document.getElementById('filter-form').submit();
}

/** Manage vouchers */
$('#voucherModal').on('shown.bs.modal', function (event) {
    var button = event.relatedTarget;
    document.getElementById('addVoucherForm').style.display = 'none';
    var employeesSelect = document.getElementById('employeesSelect');
    $(employeesSelect).find('option').remove();
    var departmentsSelect = document.getElementById('departmentsSelect');
    $(departmentsSelect).find('option').remove();
    clearModal()
    var companyId = button.getAttribute('data-company-id');
    document.getElementById('company_id').value = companyId
    fetchVouchers(companyId);
    fetchEmployees(companyId);
    $('.select2').select2({
        dropdownParent: $('#voucherModal'),
        width: '100%'
    });
})
function clearModal() {
    var code = document.getElementById('code');
    var typeSelect = document.getElementById('discount_type');
    var voucherTypeSelect = document.getElementById('voucher_type');
    var percentDiv = document.getElementById('percentOptions');
    var priceInput = document.getElementById('priceInput');
    var percentSelect = document.getElementById('percentage');
    var priceAmountInput = document.getElementById('discount_amount');
    var employeeOptions = document.getElementById('employeeOptions');
    var departmentOptions = document.getElementById('departmentOptions');
    var employeesSelect = document.getElementById('employeesSelect');
    var departmentsSelect = document.getElementById('departmentsSelect');
    var start_date = document.getElementById('start_date');
    var end_date = document.getElementById('end_date');

    code.value = "";
    typeSelect.selectedIndex = "";
    voucherTypeSelect.selectedIndex = "";
    employeeOptions.style.display = 'none';
    departmentOptions.style.display = 'none';
    $(employeesSelect).val(null).trigger('change');
    $(departmentsSelect).val(null).trigger('change');
    percentDiv.style.display = 'none';
    priceInput.style.display = 'none';
    percentSelect.value = "";
    priceAmountInput.value = "";
    start_date.value = "";
    end_date.value = "";
}
function handleDiscountTypeChange() {
    var typeSelect = document.getElementById('discount_type');
    var percentDiv = document.getElementById('percentOptions');
    var priceInput = document.getElementById('priceInput');
    var percentSelect = document.getElementById('percentage');
    var priceAmountInput = document.getElementById('discount_amount');

    percentDiv.style.display = 'none';
    priceInput.style.display = 'none';

    percentSelect.value = "";
    priceAmountInput.value = "";

    if (typeSelect.value === 'percent') {
        percentDiv.style.display = 'block';
    } else if (typeSelect.value === 'price') {
        priceInput.style.display = 'block';
    }
}

function handleVoucherTypeChange() {
    var typeSelect = document.getElementById('voucher_type');
    var employeeOptions = document.getElementById('employeeOptions');
    var departmentOptions = document.getElementById('departmentOptions');
    var employeesSelect = document.getElementById('employeesSelect');
    var departmentsSelect = document.getElementById('departmentsSelect');

    employeeOptions.style.display = 'none';
    departmentOptions.style.display = 'none';
    $(employeesSelect).val(null).trigger('change');
    $(departmentsSelect).val(null).trigger('change');

    if (typeSelect.value === 'selected_employees') {
        employeeOptions.style.display = 'block';
        departmentOptions.style.display = 'none';
    } else if (typeSelect.value === 'selected_departments') {
        departmentOptions.style.display = 'block';
        employeeOptions.style.display = 'none';
    }
}

function fetchVouchers(companyId) {
    fetch(`/CRM/vouchers/companies/${companyId}`)
        .then(response => response.json())
        .then(data => {
            const table = document.getElementById('vouchersTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            data.forEach(voucher => {
                let row = table.insertRow();
                let codeCell = row.insertCell();
                codeCell.textContent = voucher.code;
                let startDateCell = row.insertCell();
                startDateCell.textContent = voucher.start_date;
                let endDateCell = row.insertCell();
                endDateCell.textContent = voucher.end_date;
                let typeCell = row.insertCell();
                typeCell.textContent = voucher.discount_type;
                let valCell = row.insertCell();
                valCell.textContent = voucher.discount_type === 'percent' ? voucher.discount_percentage : voucher.discount_amount;
            });
        });
}

function fetchEmployees(companyId) {
    fetch(`/CRM/companies/${companyId}/employees`)
        .then(response => response.json())
        .then(data => {
            const employees = data.employees;
            const departments = data.departments;

            const employeesSelect = document.getElementById('employeesSelect');
            const departmentsSelect = document.getElementById('departmentsSelect');

            employees.forEach(employee => {
                let option = new Option(employee.username, employee.id);
                employeesSelect.add(option);
            });

            departments.forEach(department => {
                let option = new Option(department.name, department.id);
                departmentsSelect.add(option);
            });
        })
        .catch(error => {
            console.error('Error fetching employees and departments:', error);
        });
}

function showAddVoucherForm() {
    document.getElementById('addVoucherForm').style.display = 'block';
    let company_id = document.getElementById('company_id').value;
}

function hideAddVoucherForm() {
    document.getElementById('addVoucherForm').style.display = 'none';
    clearModal()
}

function addVoucher() {
    let code = document.getElementById('code').value;
    let company_id = document.getElementById('company_id').value;
    let start_date = document.getElementById('start_date').value;
    let end_date = document.getElementById('end_date').value;
    let discount_type = document.getElementById('discount_type').value;
    let voucher_type = document.getElementById('voucher_type').value;
    let employeesSelected = $('#employeesSelect').val();
    let departmentsSelected = $('#departmentsSelect').val();
    let discount_amount = '';
    let discount_percentage = '';

    if (discount_type === 'price') {
        discount_amount = document.getElementById('discount_amount').value;
    } else if (discount_type === 'percent') {
        discount_percentage = document.getElementById('percentage').value;
    }
    if((discount_amount == '' && discount_percentage == '') || start_date == '' || end_date == '' || (!employeesSelected && !departmentsSelected))
    {
        alert('Fields missing !');
        return false;
    }
    let payload = {
        code: code,
        company_id : company_id,
        start_date: start_date,
        end_date: end_date,
        discount_type: discount_type,
        discount_amount: discount_amount,
        discount_percentage: discount_percentage,
        enabled : 1,
        type : voucher_type,
        employees_ids : employeesSelected,
        departments_ids : departmentsSelected
    };
    fetch('/CRM/vouchers', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(payload),
    })
    .then(response => response.json())
    .then(data => {
        let companyId = document.getElementById('company_id').value;
        fetchVouchers(companyId);
        alert('Voucher added!');
        document.getElementById('addVoucherForm').style.display = 'none';
        clearModal()
    });
}

</script>
@endsection