@extends('user.layout')

@section('pagename')
    - {{ __('Dashboard') }}
@endsection

@section('content')
    <style>
        body {
            background-color: #f0f2f5;
        }

        /* --- Emergency Box (Main Form Container) --- */
        .emergency-box {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 40px 50px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            color: #333;
            text-align: center;
            border: 1px solid #e0e0e0;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* --- Alert Messages --- */
        .alert {
            border-radius: 8px;
            font-size: 1.05rem;
            padding: 15px 20px;
            margin-bottom: 30px;
            text-align: center;
            border: none;
            /* Remove default alert border */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            /* Subtle shadow for alerts */
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
        }

        .alert-warning {
            background-color: #fff3cd;
            color: #856404;
            font-weight: 500;
        }

        @media (max-width: 767.98px) {
            .emergency-box {
                padding: 30px 20px;
            }

        }

    </style>



<section class="user-dashbord">
    <div class="container">
        <div class="row">
            <!--<div class="col-lg-3 col-md-4">-->
            <!--    @include('user.inc.site_bar')-->
            <!--</div>-->

            <div class="col-md-12" style="margin-top:30px;">
                <div class="container py-3"> {{-- Reduced padding for a snug fit next to the sidebar --}}
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="text-center mb-5">
                        <h2>
                            Select Membership Type
                            <br>
                            <small> সেবার ধরণ নির্বাচন করুন </small>
                        </h2>
                        @if (!Auth::check())
                            <h4 class="mt-4" style="font-style: italic; color:#dc3545;">
                                If you don't have an account, please create one or login
                            </h4>
                        @endif
                    </div>
                    <div class="choice-buttons d-flex justify-content-center flex-wrap gap-3">
                        <a class="btn btn-primary ml-3" style="font-weight:600; padding: 15px 20px;" href="{{ route('user-member-application', 'free') }}">Free Member</a>
                        <a class="btn btn-primary ml-3" style="font-weight:600; padding: 15px 20px;" href="{{ route('user-member-application', 'general') }}">General Member</a>
                        <a class="btn btn-primary ml-3" style="font-weight:600; padding: 15px 20px;" href="{{ route('user-member-application', 'vip') }}">VIP Member</a>
                    </div>
                    
                    <div class="row mt-5">
                        <!-- Complete Services -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <h3>Complete Service List</h3>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Service Name</th>
                                                <th>Created At</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($orders_complete as $order)
                                                <tr>
                                                    <td>{{ $order->service_order_id }}</td>
                                                    <td>{{ $order->service_name ?? '-' }}</td>
                                                    <td>{{ $order->created_at->format('d-m-Y') }}</td>
                                                    <td>
                                                        @if(isset($order->service_review) && $order->service_review->count() > 0)
                                                        Review Done
                                                        @else
                                                        <a href="{{ route('user-service-order-review', $order->service_order_id) }}" class="btn btn-primary btn-sm">Review</a>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-center">No completed services found.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                    <!-- Pagination Links -->
                                    {{ $orders_complete->links() }}
                                </div>
                            </div>
                        </div>
                    
                        <!-- Processing Services -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <h3>Processing Service List</h3>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Service Name</th>
                                                <th>Status</th>
                                                <th>Created At</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($orders as $order)
                                                <tr>
                                                    <td>{{ $order->service_order_id }}</td>
                                                    <td>{{ $order->service_name ?? '-' }}</td>
                                                    <td>
                                                        @if($order->status == 0)
                                                            <span class="badge bg-primary">Initiate</span>
                                                        @elseif($order->status == 1)
                                                            <span class="badge bg-warning text-dark">Processing</span>
                                                        @elseif($order->status == 2)
                                                            <span class="badge bg-success">Complete</span>
                                                        @elseif($order->status == 3)
                                                            <span class="badge bg-danger">Cancel</span>
                                                        @else
                                                            <span class="badge bg-secondary">{{ $order->status }}</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $order->created_at->format('d-m-Y') }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-center">No processing services found.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                    <!-- Pagination Links -->
                                    {{ $orders->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div> {{-- /col-lg-9 for Membership Options --}}
        </div> {{-- /row --}}
    </div> {{-- /container --}}




                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // For free type only - Confirmation Checkbox Logic
                            const checkboxes = document.querySelectorAll('.confirm-checkbox');
                            const form = document.getElementById('emergency-form');
                            const msg = document.getElementById('not-allowed-msg');
                            const hiddenInput = document.getElementById('confirm_service');

                            // Only initialize if elements exist (i.e., on the 'free' membership page section)
                            if (checkboxes.length > 0 && form && msg && hiddenInput) {
                                checkboxes.forEach(checkbox => {
                                    checkbox.addEventListener('change', function() {
                                        checkboxes.forEach(box => {
                                            if (box !== this) box.checked = false;
                                        });

                                        const selected = this.value;
                                        hiddenInput.value = selected; // Update the hidden input value

                                        if (selected === 'yes' && this.checked) {
                                            form.classList.remove('d-none');
                                            msg.classList.add('d-none');
                                        } else if (selected === 'no' && this.checked) {
                                            form.classList.add('d-none');
                                            msg.classList.remove('d-none');
                                        } else {
                                            // If neither is checked, hide both
                                            form.classList.add('d-none');
                                            msg.classList.add('d-none');
                                        }
                                    });
                                });
                            }

                            // Toggle benefits for General/VIP
                            const moreBtn = document.getElementById('read-more-btn');
                            const lessBtn = document.getElementById('read-less-btn');
                            const fullList = document.getElementById('benefits-list-full');
                            const shortList = document.getElementById('benefits-list-short');

                            // Only initialize if elements exist (i.e., on the 'general' or 'vip' membership page section)
                            if (moreBtn && lessBtn && fullList && shortList) {
                                moreBtn.addEventListener('click', () => {
                                    fullList.classList.remove('d-none');
                                    shortList.classList.add('d-none');
                                    moreBtn.classList.add('d-none');
                                    lessBtn.classList.remove('d-none');
                                });

                                lessBtn.addEventListener('click', () => {
                                    fullList.classList.add('d-none');
                                    shortList.classList.remove('d-none');
                                    moreBtn.classList.remove('d-none');
                                    lessBtn.classList.add('d-none');
                                });
                            }
                        });


                        {{-- Countries/States (requires jQuery and Select2) --}}

                        $(document).ready(function() {
                            // Load all countries
                            $.ajax({
                                url: 'https://countriesnow.space/api/v0.1/countries/positions',
                                method: 'GET',
                                success: function(response) {
                                    if (response.data) {
                                        response.data.forEach(function(country) {
                                            $('#countrySelect').append(
                                                `<option value="${country.name}">${country.name}</option>`
                                            );
                                        });
                                    }
                                }
                            });

                            // Load states on country change
                            $('#countrySelect').on('change', function() {
                                const country = $(this).val();
                                $('#stateSelect').html('<option value="">Loading...</option>');

                                if (country) { // Only fetch if a country is selected
                                    $.ajax({
                                        url: 'https://countriesnow.space/api/v0.1/countries/states',
                                        method: 'POST',
                                        contentType: 'application/json',
                                        data: JSON.stringify({
                                            country: country
                                        }),
                                        success: function(response) {
                                            $('#stateSelect').html('<option value="">Select State</option>');
                                            if (response.data && response.data.states) {
                                                response.data.states.forEach(function(state) {
                                                    $('#stateSelect').append(
                                                        `<option value="${state.name}">${state.name}</option>`
                                                    );
                                                });
                                            }
                                        },
                                        error: function() {
                                            $('#stateSelect').html(
                                                '<option value="">Error loading states</option>');
                                        }
                                    });
                                } else {
                                    $('#stateSelect').html(
                                    '<option value="">Select State</option>'); // Reset if no country selected
                                }
                            });

                            // Initialize Select2
                            $('.select-2').select2({
                                width: '100%', // Ensure full width
                                placeholder: function() {
                                    // Dynamic placeholder based on field
                                    if ($(this).attr('name') === 'country') return 'Select Country';
                                    if ($(this).attr('name') === 'state') return 'Select State';
                                    return '';
                                },
                                allowClear: true // Allows clearing selection
                            });

                            // Adjust select2 container styles after initialization for visual consistency
                            // This needs to be done after select2 has rendered its elements
                            setTimeout(() => {
                                $('.select2-container--default .select2-selection--single').css({
                                    'padding': '12px 15px',
                                    /* Match form-control padding */
                                    'height': 'auto' /* Allow height to adjust */
                                });
                            }, 0);

                            // You might need to re-apply select2 custom styles on open if they reset
                            $('.select-2').on('select2:open', function() {
                                setTimeout(() => {
                                    $('.select2-container--default .select2-selection--single').css({
                                        'padding': '12px 15px',
                                        'height': 'auto',
                                    });
                                }, 0);
                            });
                        });

                        $(document).ready(function() {
                            $('#divisionSelect').on('change', function() {
                                var divisionId = $(this).val();
                                console.log(divisionId);
                                $('#districtSelect').html('<option value="">Loading...</option>');
                                $('#upazillaSelect').html('<option value="">Select Upazilla</option>');
                                if (divisionId) {
                                    $.ajax({
                                        url: '/get-districts/' + divisionId,
                                        type: 'GET',
                                        success: function(data) {
                                            $('#districtSelect').html(
                                                '<option value="">Select District</option>');
                                            $.each(data, function(key, district) {
                                                $('#districtSelect').append('<option value="' + district
                                                    .id + '">' + district.name + '</option>');
                                            });
                                        }
                                    });
                                }
                            });

                            // Load Upazillas on District Select
                            $('#districtSelect').on('change', function() {
                                var districtId = $(this).val();
                                $('#upazillaSelect').html('<option value="">Loading...</option>');
                                if (districtId) {
                                    $.ajax({
                                        url: '/get-upazillas/' + districtId,
                                        type: 'GET',
                                        success: function(data) {
                                            $('#upazillaSelect').html(
                                                '<option value="">Select Upazilla</option>');
                                            $.each(data, function(key, upazilla) {
                                                $('#upazillaSelect').append('<option value="' + upazilla
                                                    .id + '">' + upazilla.name + '</option>');
                                            });
                                        }
                                    });
                                }
                            });
                        });
                    </script>



                </div>
            </div>
        </div>

           {{-- Account Information (Below sidebar, smaller) --}}
                <!--<div class="container user-profile-details mt-4 mb-4"> {{-- Added margin-top for separation --}}-->
                <!--    <div class="account-info p-3 border rounded"> {{-- Added padding, border, and rounded corners for visual appeal --}}-->
                <!--        <div class="title mb-3">-->
                <!--            <h4 class="mb-0 text-center" style="font-weight: bold; color: #333; border-bottom: 2px solid #007bff; padding-bottom: 5px;">{{ __('Account Information') }}</h4>-->
                <!--        </div>-->
                <!--        <div class="main-info">-->
                <!--            <h5 class="mb-3">{{ convertUtf8($user->username) }}</h5>-->
                <!--            <div class="row">-->
                <!--                <div class="col-md-12"> {{-- Full width within this smaller column --}}-->
                <!--                    <ul class="list-unstyled">-->
                <!--                        <li><strong>{{ __('Email') }}:</strong> {{ convertUtf8($user->email) }}</li>-->
                <!--                        <li><strong>{{ __('Phone') }}:</strong> {{ convertUtf8($user->number) }}</li>-->
                <!--                        <li><strong>{{ __('City') }}:</strong> {{ convertUtf8($user->fax) }}</li>-->
                <!--                        <li><strong>{{ __('State') }}:</strong> {{ convertUtf8($user->city) }}</li>-->
                <!--                        <li><strong>{{ __('Address') }}:</strong> {{ convertUtf8($user->state) }}</li>-->
                <!--                        <li><strong>{{ __('Country') }}:</strong> {{ convertUtf8($user->address) }}</li>-->
                <!--                    </ul>-->
                <!--                </div>-->
                <!--            </div> </div>-->
                <!--    </div>-->
                <!--</div>-->
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#ordersTable').DataTable({
                responsive: true,
                ordering: false
            });
        });
    </script>
@endsection