@extends('layouts.frontend.master')

@section('title', 'Sponsorships - BAU 2001–2002 Alumni Association')

@push('css')
    {{--    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">--}}
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        }

        .bg-card {
            background-color: #fff !important;
        }

        dialog::backdrop {
            background: rgba(0, 0, 0, 0.3);
        }

        .dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px 16px 10px 20px;
            gap: 10px;
        }

        #modal-advertisements li i {
            color: #28a745;
        }

        #modal-advertisements li .text-primary {
            color: #007bff !important;
        }

        #modal-advertisements li .badge {
            font-size: 0.75rem;
            vertical-align: middle;
        }

        #company-profile-section {
            /* background-color: #f8f9fa; */
            padding: 1.5rem;
            border-radius: 8px;
        }

        #company-profile-section .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        #company-profile-section h6 i {
            color: #007bff;
        }
    </style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        // Handle Select Package button click
        $('.select-package-btn').on('click', function() {
            const id = $(this).data('id');
            const title = $(this).data('title');
            const amount = $(this).data('amount');
            const duration = $(this).data('duration');
            // const description = $(this).data('description');
            const advertisements = $(this).data('advertisements');

            // Populate modal with sponsorship data
            $('#modal-title').text(title);
            $('#modal-amount').text(amount.toLocaleString());
            $('.modal-duration').text(duration);
            // $('#modal-description').text(description);
            $('#modal-total-amount').text((amount*1).toFixed(2));

            // Populate advertisements list
            let adsHtml = '';
            if (advertisements && advertisements.length > 0) {
                advertisements.forEach(function(ad) {
                    let categoryLabel = ad.category ? `<strong class="text-primary">${ad.category}:</strong> ` : '';
                    let quantityLabel = ad.quantity >= 1 ? ` <span class="badge badge-secondary">x${ad.quantity}</span>` : '';
                    adsHtml += `
                        <li>
                            <i class="fas fa-check-circle mr-2"></i> ${categoryLabel}${ad.description}${quantityLabel}
                        </li>
                    `;
                });
            } else {
                adsHtml = '<li class="text-muted">No features listed</li>';
            }
            $('#modal-advertisements').html(adsHtml);

            // Store sponsorship ID for proceed action
            $('#proceedBtn').data('sponsorship-id', id);

            // Open modal
            $('#sponsorshipModal').modal('show');
        });

        // Handle quantity change to update total amount
        $('#modal-quantity').on('input change', function() {
            const quantity = parseInt($(this).val()) || 1;
            const amount = parseFloat($('#modal-amount').text().replace(/,/g, '')) || 0;
            const total = (amount * quantity).toFixed(2);
            $('#modal-total-amount').text(parseFloat(total).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
        });

        // Handle Submit Request button click
        $('#proceedBtn').on('click', function() {
            const sponsorshipId = $(this).data('sponsorship-id');
            const quantity = parseInt($('#modal-quantity').val()) || 1;
            const totalAmount = parseFloat($('#modal-total-amount').text().replace(/,/g, '')) || 0;
            const additionalComments = $('#modal-additional-comments').val();
            const termsAccepted = $('#modal-terms-and-conditions').is(':checked');

            // Validation
            if (!termsAccepted) {
                toastr.error('Please accept the terms and conditions to proceed.');
                return;
            }

            if (quantity < 1) {
                toastr.error('Quantity must be at least 1.');
                return;
            }

            // Check if company profile section exists and validate
            if ($('#company-profile-section').length > 0) {
                const companyName = $('#company_name').val().trim();
                const fullName = $('#full_name').val().trim();
                const designation = $('#designation').val().trim();
                const contactMobile = $('#contact_mobile').val().trim();
                const contactEmail = $('#contact_email').val().trim();

                if (!companyName) {
                    toastr.error('Please enter company name.');
                    $('#company_name').focus();
                    return;
                }
                if (!fullName) {
                    toastr.error('Please enter full name.');
                    $('#full_name').focus();
                    return;
                }
                if (!designation) {
                    toastr.error('Please enter designation.');
                    $('#designation').focus();
                    return;
                }
                if (!contactMobile) {
                    toastr.error('Please enter mobile number.');
                    $('#contact_mobile').focus();
                    return;
                }
                if (!contactEmail) {
                    toastr.error('Please enter email address.');
                    $('#contact_email').focus();
                    return;
                }

                // First, save company profile
                saveCompanyProfile(function(success) {
                    if (success) {
                        submitSponsorshipRequest(sponsorshipId, quantity, totalAmount, additionalComments);
                    }
                });
            } else {
                // No company profile needed, submit directly
                submitSponsorshipRequest(sponsorshipId, quantity, totalAmount, additionalComments);
            }
        });

        // Function to save company profile
        function saveCompanyProfile(callback) {
            const formData = new FormData();
            formData.append('company_name', $('#company_name').val());
            formData.append('name', $('#full_name').val());
            formData.append('surname', $('#designation').val());
            formData.append('mobile', $('#contact_mobile').val());
            formData.append('email', $('#contact_email').val());
            formData.append('address', $('#company_address').val());
            
            const logoFile = $('#company_logo')[0].files[0];
            if (logoFile) {
                formData.append('logo', logoFile);
            }
            formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

            $.ajax({
                url: "{{ route('company-profile.store') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        toastr.success('Company profile saved successfully.');
                        $('#company-profile-section').fadeOut();
                        callback(true);
                    } else {
                        toastr.error(response.message || 'Failed to save company profile.');
                        callback(false);
                    }
                },
                error: function(xhr) {
                    let errorMsg = 'Failed to save company profile. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                    callback(false);
                }
            });
        }

        // Function to submit sponsorship request
        function submitSponsorshipRequest(sponsorshipId, quantity, totalAmount, additionalComments) {
            // Show loading state
            const submitBtn = $('#proceedBtn');
            const originalText = submitBtn.html();
            submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i> Submitting...');

            $.ajax({
                url: "{{ route('sponsorship-request.store') }}",
                method: 'POST',
                data: {
                    sponsorship_id: sponsorshipId,
                    quantity: quantity,
                    total_amount: totalAmount,
                    additional_comments: additionalComments,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#sponsorshipModal').modal('hide');
                        
                        // Reset form
                        $('#modal-quantity').val(1);
                        $('#modal-additional-comments').val('');
                        $('#modal-terms-and-conditions').prop('checked', false);
                        
                        // Reload page to reflect changes
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                    } else {
                        toastr.error(response.message || 'An error occurred');
                        submitBtn.prop('disabled', false).html(originalText);
                    }
                },
                error: function(xhr) {
                    let errorMsg = 'Failed to submit request. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                    submitBtn.prop('disabled', false).html(originalText);
                }
            });
        }
    });
</script>
@endpush

@section('content')
    <!-- Events Section -->
    <section class="bg-white">

        <div id="root">
            <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
                <header class="bg-white shadow-sm border-b">
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                        <div class="text-center">
                            <h4 class="text-3xl font-bold text-gray-900 mb-2">
                                Sponsorship &amp; Advertisement Opportunities with BAU 2001-2002</h4>
                            <p class="text-md text-gray-600 max-w-3xl mx-auto">Partner with us to reach your target
                                audience through our premium publication and digital platforms. Choose from our flexible
                                sponsorship packages designed to maximize your brand exposure.</p>
                        </div>
                    </div>
                </header>
                <div class="container mx-auto px-6">
                    <main class="py-12">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
                            @if(isset($sponsorships) && count($sponsorships) > 0)
                                @foreach($sponsorships as $sponsorship)
                                    <div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm relative transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer">
                                        @if($sponsorship->is_most_popular == 1)
                                            <span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent text-primary-foreground [a&amp;]:hover:bg-primary/90 absolute -top-2 -right-2 bg-orange-500 hover:bg-orange-600 text-white">
                                                Most Popular
                                            </span>
                                        @endif
                                        <div data-slot="card-header"
                                             class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-4">
                                            <div class="flex items-center gap-3 mb-2">
                                                @if($sponsorship->icon)
                                                    <div class="p-2 bg-blue-100 rounded-lg text-blue-600">
                                                        <img style="width: 24px; height: 24px;" src="{{asset('storage/'.$sponsorship->icon)}}">
                                                    </div>
                                                @endif
                                                <div data-slot="card-title" class="font-semibold text-lg">
                                                    {{$sponsorship ? $sponsorship->title : ''}}
                                                </div>
                                            </div>
                                            <div data-slot="card-description"
                                                 class="text-muted-foreground text-sm leading-relaxed">
                                                {!! $sponsorship ? Str::limit(strip_tags($sponsorship->description), 200, '...') : '' !!}
                                            </div>
                                        </div>
                                        <div data-slot="card-content" class="px-6">
                                            <div class="mb-4">
                                                <div class="flex items-baseline gap-1">
                                                    <span class="text-2xl font-bold text-gray-900">
                                                        {{$sponsorship ? $sponsorship->amount.'Tk' : ''}}
                                                    </span>
                                                    <span class="text-gray-600">
                                                        /{{$sponsorship ? (config('services.duration_type')[$sponsorship->duration_type] ?? $sponsorship->duration_type) : ''}}
                                                    </span>
                                                </div>
                                            </div>
                                            @if(isset($sponsorship->advertisements))
                                                <ul class="space-y-2 mb-6">
                                                    @foreach($sponsorship->advertisements as $advertisement)
                                                        @if ($loop->index <= 3)
                                                            <li class="flex items-start gap-2 text-sm text-gray-600">
                                                                <div class="w-1.5 h-1.5 bg-blue-500 rounded-full mt-1.5"></div>
                                                                <div class="flex-1">
                                                                    @if($advertisement->category)
                                                                        <span class="font-semibold text-blue-600">{{ $advertisement->category->name }}:</span>
                                                                    @endif
                                                                    {{ $advertisement->advertisement_name }}
                                                                    @if($advertisement->quantity >= 1)
                                                                        <span class="text-xs text-gray-500">(x{{ $advertisement->quantity }})</span>
                                                                    @endif
                                                                </div>
                                                            </li>
                                                        @else
                                                            <li class="flex items-center gap-2 text-sm text-gray-600">
                                                                <div class="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
                                                                ...and more
                                                            </li>
                                                            @break
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            @endif

                                            @if (auth()->check())
                                                <button type="button" 
                                                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3 w-full select-package-btn"
                                                    data-id="{{ $sponsorship->id }}"
                                                    data-title="{{ $sponsorship->title }}"
                                                    data-amount="{{ $sponsorship->amount }}"
                                                    data-duration="{{ config('services.duration_type')[$sponsorship->duration_type] ?? $sponsorship->duration_type }}"
                                                    {{-- data-description="{{ $sponsorship->description }}" --}}
                                                    data-advertisements="{{ json_encode($sponsorship->advertisements->map(function($ad) {
                                                        return [
                                                            'category' => $ad->category ? $ad->category->name : null,
                                                            'description' => $ad->advertisement_name,
                                                            'quantity' => $ad->quantity
                                                        ];
                                                    })->toArray()) }}"
                                                >
                                                    Select Package
                                                </button>
                                            @else
                                                <p class="text-gray-600 text-center">To select this package, please 
                                                    <a href="{{ route('login') }}" class="btn text-white" style="background-color: #009245;">
                                                        Login
                                                    </a>
                                                    or
                                                    <a href="{{ route('register') }}" class="btn" style="background-color: #ffc107;">
                                                        Register
                                                    </a>
                                                </p>
                                                {{-- <div class="btn-group btn-sm w-full" role="group" aria-label="Basic example">
                                                    <a href="{{ route('login') }}" type="button" class="btn btn-primary">Login to Select Package</a>
                                                    <a href="{{ route('register') }}" type="button" class="btn btn-secondary">if you are not a member, please register</a>
                                                </div> --}}
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="mt-3">
                            {{ $sponsorships->links() }}
                        </div>
                        <div class="bg-white rounded-2xl shadow-lg p-8 md:p-12">
                            <div class="text-center mb-8"><h2 class="text-3xl font-bold text-gray-900 mb-4">Ready to Get
                                    Started?</h2>
                                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Contact us today to discuss your
                                    sponsorship needs and create a custom package that works for your business.</p>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                                <div class="text-center">
                                    <div
                                        class="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round"
                                             class="lucide lucide-mail w-6 h-6 text-blue-600" aria-hidden="true">
                                            <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
                                            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                                        </svg>
                                    </div>
                                    <h3 class="font-semibold text-gray-900 mb-2">Email Us</h3>
                                    <p class="text-gray-600">sponsorship@company.com</p></div>
                                <div class="text-center">
                                    <div
                                        class="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round"
                                             class="lucide lucide-phone w-6 h-6 text-blue-600" aria-hidden="true">
                                            <path
                                                d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path>
                                        </svg>
                                    </div>
                                    <h3 class="font-semibold text-gray-900 mb-2">Call Us</h3>
                                    <p class="text-gray-600">+1 (555) 123-4567</p></div>
                                <div class="text-center">
                                    <div
                                        class="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round"
                                             class="lucide lucide-message-square w-6 h-6 text-blue-600"
                                             aria-hidden="true">
                                            <path
                                                d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                                        </svg>
                                    </div>
                                    <h3 class="font-semibold text-gray-900 mb-2">Live Chat</h3>
                                    <p class="text-gray-600">Available 9 AM - 6 PM EST</p></div>
                            </div>
                            <div class="text-center mt-8">
                                <button data-slot="button"
                                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-10 rounded-md has-[&gt;svg]:px-4 px-8">
                                    Contact Us Today
                                </button>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>

    </section>

    {{-- Sponsorship Details Modal --}}
    <div class="modal fade" id="sponsorshipModal" tabindex="-1" role="dialog" aria-labelledby="sponsorshipModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title" id="sponsorshipModalLabel">
                        <i class="fas fa-handshake mr-2"></i> <span id="modal-title"></span> Details
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pt-0">
                    <div class="row">
                        <div class="col-12">
                            <p class="text-muted">Review the details of your selected sponsorship package and customize your order.</p>
                        </div>
                        <div class="col-12">
                            {{-- <div class="col-md-12">
                                <h6 class="font-weight-bold mb-3">Description:</h6>
                                <p class="text-muted" id="modal-description"></p>
                            </div> --}}
                            <p class="font-weight-bold my-3">Key Features:</p>
                            <ul class="list-unstyled" id="modal-advertisements">
                                {{-- Advertisements will be populated here --}}
                            </ul>
                            <hr class="my-3" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width: 33.33%">Price (<span class="modal-duration"></span>)</th>
                                        <th class="text-center" style="width: 33.33%">Quantity (<span class="modal-duration"></span>)</th>
                                        <th class="text-center" style="width: 33.33%">Total Price: (<span class="modal-duration"></span>)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-center"><span id="modal-amount"></span> Tk</td>
                                        <td class="text-center">
                                            <input type="number" class="form-control" id="modal-quantity" min="1" value="1">
                                        </td>
                                        <td class="text-center"><span id="modal-total-amount"></span> Tk</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="modal-additional-comments" class="font-weight-bold">Additional Comments:</label>
                                <textarea class="form-control" id="modal-additional-comments" rows="4"
                                    placeholder="Enter any specific requests or questions here..."
                                ></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            @if(auth()->check() && !auth()->user()->sponsor)
                                {{-- Company Profile Section --}}
                                <div class="row mb-4 pb-3" id="company-profile-section">
                                    <div class="col-12">
                                        <h6 class="font-weight-bold mb-3">
                                            <i class="fas fa-building mr-2"></i> Company Profile
                                        </h6>
                                        <p class="text-muted small mb-3">Please complete your company profile to proceed with the sponsorship request.</p>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="company_name">Company Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="company_name" name="company_name" placeholder="Enter company name" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="full_name">Full Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="full_name" name="full_name" value="{{ auth()->user()->name }}" placeholder="Enter full name" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="designation">Designation <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="designation" name="designation" placeholder="e.g., CEO, Marketing Manager" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="contact_mobile">Mobile <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="contact_mobile" name="contact_mobile" value="{{ auth()->user()->phone }}" placeholder="Enter mobile number" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="contact_email">Email <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" id="contact_email" name="contact_email" value="{{ auth()->user()->email }}" placeholder="Enter email address" required>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="company_address">Address</label>
                                            <textarea class="form-control" id="company_address" name="company_address" rows="2" placeholder="Enter company address"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="company_logo">Company Logo</label>
                                            <input type="file" class="form-control" id="company_logo" name="company_logo" accept="image/*">
                                            <small class="text-muted">Accepted formats: JPG, PNG, GIF (Max: 2MB)</small>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <input type="checkbox" id="modal-terms-and-conditions" name="terms-and-conditions">
                                <label for="modal-terms-and-conditions" class="font-weight-bold">I agree to the 
                                    <a href="#" class="text-blue-600">terms and conditions</a>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i> Close
                    </button>
                    <button type="button" class="btn btn-success" id="proceedBtn">
                        <i class="fas fa-check-circle mr-1"></i> Submit Request
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection