@extends('layouts/contentNavbarLayout')

@section('title', 'Commission Roles - Commission Roles List')

@section('page-style')
    <style>
        .avatar-xs {
            width: 2.563rem !important;
            height: 2.563rem !important;
        }
    </style>
@endsection
@section('content')
    {{-- <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('dashboard') }}" class="text-muted text-decoration-none">Dashboard</a> /
        </span>
        Commission Roles
    </h4>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Default Commission</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">Manual Commission</a>
        </li>
        
    </ul>
    <!-- Bootstrap Table with Header - Light -->
    <div class="card">
        <div class="row">
            <div class="col-md-6">
                <h5 class="card-header">Commission Roles List</h5>
            </div>
            <div class="col-md-6 card-header">
                <button type="button" onclick="window.location='{{ route('commissionroles.create') }}'"
                    class="float-end btn btn-primary waves-effect waves-light">
                    Add Commission Roles
                </button>
            </div>
        </div>

        <div class="table-responsive text-nowrap">
            <table class="table" id="dataTable">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Set Commission</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach ($commission_roles as $value)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar me-4">
                                        <img src="{{ $value->user->photo ? asset('storage/user_profile_photo/' . $value->user->photo) : asset('assets/img/avatars/3.png') }}"
                                            alt="{{ $value->user->name }}" class="rounded-circle">
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-truncate">{{ $value->user->name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>${{ $value->commission_rate ?? '' }}</td>
                            <td>{{ isset($value->start_date) ? \Carbon\Carbon::parse($value->start_date)->format('M-d-Y') : '' }}
                            </td>
                            <td>{{ isset($value->end_date) ? \Carbon\Carbon::parse($value->end_date)->format('M-d-Y') : '' }}
                            </td>
                            <td>
                                <div class="dropdown">
                                    <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                        data-bs-toggle="dropdown"><i class="mdi mdi-dots-vertical"></i></button>
                                    <div class="dropdown-menu">
                                        @can('edit')
                                            <a class="dropdown-item" href="{{ route('commissionroles.edit', $value->id) }}"><i
                                                    class="mdi mdi-pencil-outline me-1"></i> Edit</a>
                                        @endcan
                                        @can('delete')
                                            <a class="dropdown-item" href="javascript:void(0);" onclick="confirmDelete(this)"
                                                data-url="{{ route('commissionroles.destroy', encrypt($value->id)) }}">
                                                <i class="mdi mdi-trash-can-outline me-1"></i> Delete
                                            </a>
                                        @endcan
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <!-- Display pagination links -->
            </table>
        </div>
    </div> --}}


    @php
        $activeTab = request()->get('tab', 'manual'); // Default to 'manual' if no tab is specified
    @endphp

    <ul class="nav nav-tabs" id="commissionTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ $activeTab === 'manual' ? 'active' : '' }}" id="manual-tab" data-bs-toggle="tab"
                data-bs-target="#manual-commission" type="button" role="tab" aria-controls="manual-commission"
                aria-selected="{{ $activeTab === 'manual' ? 'true' : 'false' }}">
                Manual Commission
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ $activeTab === 'default' ? 'active' : '' }}" id="default-tab" data-bs-toggle="tab"
                data-bs-target="#default-commission" type="button" role="tab" aria-controls="default-commission"
                aria-selected="{{ $activeTab === 'default' ? 'true' : 'false' }}">
                Default Commission
            </button>
        </li>
    </ul>

    <!-- Tabs Content -->
    <div class="tab-content" id="commissionTabsContent">
        <!-- Manual Commission Tab -->
        <div class="tab-pane fade show {{ $activeTab === 'manual' ? 'active show' : '' }}" id="manual-commission"
            role="tabpanel" aria-labelledby="manual-tab">
            <div class="card mt-3">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="card-header">Commission Roles List</h5>
                    </div>
                    <div class="col-md-6 card-header">
                        <button type="button" onclick="window.location='{{ route('commissionroles.create') }}'"
                            class="float-end btn btn-primary waves-effect waves-light">
                            Add Commission Roles
                        </button>
                    </div>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table" id="dataTable">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Agent Name</th>
                                <th>Customer</th>
                                <th>Set Commission</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @foreach ($commission_roles as $value)
                                {{-- @dd($value) --}}
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $value->agent_name ?? '' }}</td>
                                    <td>
                                        @if ($value->is_all_customers == true)
                                            All Customers
                                        @else
                                            Specific Customers
                                        @endif

                                    </td>
                                    {{-- <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar avatar me-4">
                                                <img src="{{ $value->user->photo ? asset('storage/user_profile_photo/' . $value->user->photo) : asset('assets/img/avatars/3.png') }}"
                                                    alt="{{ $value->user->name }}" class="rounded-circle">
                                            </div>
                                            <div>
                                                <h6 class="mb-0 text-truncate">{{ $value->user->name }}</h6>
                                            </div>
                                        </div>
                                    </td> --}}
                                    <td>${{ $value->commission_rate ?? '' }}</td>
                                    <td>{{ isset($value->start_date) ? \Carbon\Carbon::parse($value->start_date)->format('M-d-Y') : '' }}
                                    </td>
                                    <td>{{ isset($value->end_date) ? \Carbon\Carbon::parse($value->end_date)->format('M-d-Y') : '' }}
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                data-bs-toggle="dropdown"><i class="mdi mdi-dots-vertical"></i></button>
                                            <div class="dropdown-menu">
                                                @can('edit')
                                                    <a class="dropdown-item"
                                                        href="{{ route('commissionroles.edit', $value->id) }}"><i
                                                            class="mdi mdi-pencil-outline me-1"></i> Edit</a>
                                                @endcan
                                                @can('delete')
                                                    <a class="dropdown-item" href="javascript:void(0);"
                                                        onclick="confirmDelete(this)"
                                                        data-url="{{ route('commissionroles.destroy', encrypt($value->id)) }}">
                                                        <i class="mdi mdi-trash-can-outline me-1"></i> Delete
                                                    </a>
                                                @endcan
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Default Commission Tab -->
        <div class="tab-pane fade {{ $activeTab === 'default' ? 'active show' : '' }}" id="default-commission"
            role="tabpanel" aria-labelledby="default-tab">
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Update Default Commission</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('update.default.commission') }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div>
                                    <label>Default Agent Commission</label>
                                    <div class="form-floating form-floating-outline mb-4">

                                        <input type="number"
                                            class="form-control @error('agent_commission') is-invalid @enderror"
                                            id="agent_commission" placeholder="Add Agent Commission" name="agent_commission"
                                            value="{{ isset($defaultCommission) && isset($defaultCommission->agent_commission) ? $defaultCommission->agent_commission : '' }}" />
                                        {{-- <label for="basic-default-username">Set Commission</label> --}}
                                        @error('agent_commission')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div>
                                    <label>Default Sub-Agent Commission</label>
                                    <div class="form-floating form-floating-outline mb-4">

                                        <input type="number"
                                            class="form-control @error('sub_agent_commission') is-invalid @enderror"
                                            id="sub_agent_commission" placeholder="Add Sub-Agent Commission"
                                            name="sub_agent_commission"
                                            value="{{ isset($defaultCommission) && isset($defaultCommission->sub_agent_commission) ? $defaultCommission->sub_agent_commission : '' }}" />
                                        @error('sub_agent_commission')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div>
                                    <label>Default Supervisor Commission</label>
                                    <div class="form-floating form-floating-outline mb-4">

                                        <input type="number"
                                            class="form-control @error('supervisor_commission') is-invalid @enderror"
                                            id="supervisor_commission" placeholder="Add Supervisor Commission"
                                            name="supervisor_commission"
                                            value="{{ isset($defaultCommission) && isset($defaultCommission->supervisor_commission) ? $defaultCommission->supervisor_commission : '' }}" />
                                        {{-- <label for="basic-default-username">Set Commission</label> --}}
                                        @error('supervisor_commission')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

<script>
    const csrfToken = "{{ csrf_token() }}";

    function confirmDelete(element) {
        const deleteUrl = element.getAttribute('data-url'); // Get the URL from the data attribute
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "Cancel"
        }).then((result) => {
            if (result.isConfirmed) {
                // Perform AJAX request to delete the product
                $.ajax({
                    url: deleteUrl, // Use the URL from data-url
                    type: "DELETE", // HTTP method
                    headers: {
                        "X-CSRF-Token": csrfToken // Add CSRF token for Laravel
                    },

                    success: function(response) {
                        Swal.fire(
                            "Deleted!",
                            "The Data has been deleted.",
                            "success"
                        ).then(() => {
                            // Reload the page after the success message is closed
                            window.location.reload();
                        });
                        // Optionally, remove the deleted product from the DOM
                        // Example: document.getElementById(`product-row-${productId}`).remove();
                    },
                    error: function(xhr) {
                        Swal.fire(
                            "Error!",
                            "There was a problem deleting the product.",
                            "error"
                        );
                    }
                });
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('.nav-link');

        tabs.forEach(tab => {
            tab.addEventListener('click', function(e) {
                const tabName = this.getAttribute('id').replace('-tab', '');
                const currentUrl = new URL(window.location.href);
                currentUrl.searchParams.set('tab',
                    tabName); // Add or update the 'tab' parameter
                history.pushState({}, '', currentUrl); // Update the URL without reloading
            });
        });

        // Auto-select tab based on URL
        const urlParams = new URLSearchParams(window.location.search);
        const activeTab = urlParams.get('tab');
        if (activeTab) {
            const activeTabLink = document.querySelector(`#${activeTab}-tab`);
            if (activeTabLink) {
                activeTabLink.click();
            }
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const activeTab = urlParams.get('tab');

        if (activeTab) {
            const tabElement = document.querySelector(`#${activeTab}-tab`);
            const tabContent = document.querySelector(`#${activeTab}-content`);

            if (tabElement && tabContent) {
                // Remove 'active' from all tabs and tab contents
                document.querySelectorAll('.nav-link, .tab-pane').forEach(el => el.classList.remove('active',
                    'show'));

                // Add 'active' to the selected tab and its content
                tabElement.classList.add('active');
                tabContent.classList.add('active', 'show');
            }
        }
    });
</script>