@extends('layouts/contentNavbarLayout')

@section('title', 'Users')

@section('content')
    <div class="card">
        @if(session('generate_users') || session('success'))
            <div class="alert alert-success">
                {{ session('success') ? session('success') : session('generate_users') }}
            </div>
        @endif
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>{{ ucfirst($listName).' List' }}</h5>
            <a href="{{ routeWithQuery($routeName . '.create') }}" class="btn btn-info">{{ 'Create ' . $listName }}</a>
        </div>
        <div class="card-body">
            <table class="table datatables-basic">
                <thead>
                <tr>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    @if($isEmployee)
                        <th>Department</th>
                    @elseif($routeName == 'admins')
                        <th>Role</th>
                    @endif
                    @if((!request()->has('company_id') && $routeName == 'employees') || ($routeName == 'admins'))
                        <th>Company</th>
                    @endif
                    <th>Status</th>
                    <th class="text-center">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($users as $user)
                    <tr>
                        <td>{{ $user->username ?? '-' }}</td>
                        <td>{{ $user->name ?? '-' }}</td>
                        <td>{{ $user->phone ?? '-' }}</td>
                        <td>{{ $user->email ?? '-' }}</td>
                        @if($isEmployee)
                            <td>{{ $user->department->name ?? '-' }}</td>
                        @elseif($routeName == 'admins')
                            <td>{{ $user->role->name }}</td>
                        @endif
                        @if((!request()->has('company_id') && $routeName == 'employees') || ($routeName == 'admins'))
                            <td>
                                @if($user->company)
                                    {{ $user->company->name }}
                                @elseif($user->companies && $user->companies->isNotEmpty())
                                    @foreach($user->companies as $company)
                                        <span>{{ $company->name }}</span>{{ !$loop->last ? ', ' : '' }}
                                    @endforeach
                                @else
                                    -
                                @endif
                            </td>
                        @endif
                        <td><span
                                class="badge bg-{{ $user->status == 1 ? 'success' : 'danger' }}">{{ $user->status == 1 ? 'Active' : 'Inactive' }}</span>
                        </td>
                        <td class="text-center">
                            <a href="{{ route($routeName.'.edit', $user->id) }}" class="btn btn-icon btn-info btn-sm">
                                <i class="mdi mdi-pencil-outline"></i>
                            </a>
                            @if($routeName == 'coachs')
                                <a href="{{ route($routeName.'.timeSlots.get', $user->id) }}"
                                   class="btn btn-icon btn-warning btn-sm">
                                    <i class="mdi mdi-calendar-clock"></i>
                                </a>
                            @endif{{--
                            <button type="button" class="btn btn-icon btn-danger btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#deleteConfirmModal" data-user-id="{{ $user->id }}">
                                <i class="mdi mdi-trash-can-outline"></i>
                            </button>--}}
                            @if($routeName == 'employees')
{{--                                <button type="button" class="btn btn-icon btn-warning btn-sm"--}}
{{--                                        data-user-id="{{ $user->id }}" data-company-id="{{ $user->company_id }}"--}}
{{--                                        data-bs-toggle="modal" data-bs-target="#voucherModal">--}}
{{--                                    <i class="mdi mdi-percent-circle"></i>--}}
{{--                                </button>--}}
                                {{-- <a href="{{ route('list.vouchers', ['employees', $user->id]) }}"
                                   class="btn btn-icon btn-warning btn-sm">
                                    <i class="mdi mdi-percent-circle"></i>
                                </a> --}}
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4">
                            <div class="alert alert-info col-md-6" role="alert">
                                {{ 'No '.$listName.' found !' }}
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @include('components.delete_confirm_modal', ['entity' => 'user', 'action' => 'CRM/users'])

    <!-- 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">Employee 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 -->
                    <form action="{{route('add.voucher')}}" method="post" class="my-3" id="addVoucherForm"
                          enctype="multipart/form-data"
                          style="display: none; border: 1px solid #dee2e6; padding: 15px;">
                        @csrf
                        <div class="mb-3">
                            <label for="title" class="form-label">Title</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="sub_title" class="form-label">Sub-Title</label>
                            <input type="text" class="form-control" id="sub_title" name="sub_title" required>
                        </div>
                        <div class="mb-3">
                            <label for="use_number" class="form-label">Use Number</label>
                            <input type="text" class="form-control" id="use_number" name="use_number" required>
                        </div>
                        <div class="mb-3">
                            <label for="picture" class="form-label">Picture</label>
                            <input type="file" class="form-control" id="picture" name="picture">
                        </div>
                        <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="user_id" name="user_id">
                        <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="mb-3">
                            <label for="enabled" class="form-label">Enabled</label>
                            <select class="form-control" id="enabled" name="enabled" required>
                                <option value="0"> InActive</option>
                                <option value="1"> Active</option>
                            </select>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="type" class="form-label">Discount Type</label>
                                <select class="form-control" id="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
                                    <!-- Add more options as needed -->
                                </select>
                            </div>
                            <div class="mb-3">
                                <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>
                        <div class="mb-3">
                            <label for="sub_description" class="form-label">Sub description</label>
                            <textarea class="form-control" id="sub_description" name="sub_description"> </textarea>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Sub description</label>
                            <textarea class="form-control" id="description" name="description"> </textarea>
                        </div>
                        <div class="">
                            <button type="submit" class="btn btn-sm btn-success">Submit</button>
                            <button onclick="hideAddVoucherForm()" class="btn btn-sm btn-secondary">Cancel</button>
                        </div>
                    </form>
                    <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>
                            <!-- Vouchers will be appended here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('page-script')
    <script>

        $('#voucherModal').on('shown.bs.modal', function(event) {
            var button = event.relatedTarget;
            var employeeId = button.getAttribute('data-user-id');
            var companyId = button.getAttribute('data-company-id');
            document.getElementById('company_id').value = companyId;
            document.getElementById('user_id').value = employeeId;
            fetchVouchers(employeeId);
        });

        function handleDiscountTypeChange() {
            var typeSelect = document.getElementById('type');
            var percentDiv = document.getElementById('percentOptions');
            var priceInput = document.getElementById('priceInput');
            var percentSelect = document.getElementById('percentage');
            var priceAmountInput = document.getElementById('discount_amount');

            // Hide both fields initially
            percentDiv.style.display = 'none';
            priceInput.style.display = 'none';
            percentSelect.value = '';
            priceAmountInput.value = '';

            // Show the relevant field based on selection
            if (typeSelect.value === 'percent') {
                percentDiv.style.display = 'block';
            } else if (typeSelect.value === 'price') {
                priceInput.style.display = 'block';
            }
        }

        function fetchVouchers(employeeId) {
            fetch(`/CRM/vouchers/employees/${employeeId}`)
                .then(response => response.json())
                .then(data => {
                    const table = document.getElementById('vouchersTable').getElementsByTagName('tbody')[0];
                    table.innerHTML = ''; // Clear previous entries
                    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 enabled = row.insertCell();
                        enabled.textContent = voucher.enabled;
                        let valCell = row.insertCell();
                        valCell.textContent = voucher.discount_type === 'percent' ? voucher.discount_percentage : voucher.discount_amount;
                    });
                });
        }


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

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


        function addVoucher() {
            let code = document.getElementById('code').value;
            let user_id = document.getElementById('user_id').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('type').value;
            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 == '') {
                alert('Fields missing !');
                return false;
            }
            let payload = {
                code: code,
                user_id: user_id,
                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: 'employee'
            };
            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 => {
                    var employeeId = document.getElementById('user_id').value;
                    fetchVouchers(employeeId); // Refresh list
                    alert('Voucher added!');
                    document.getElementById('addVoucherForm').style.display = 'none';
                });
        }
    </script>
@endsection