@extends('layouts.app')
@section('title', __('business.business_locations'))

@section('css')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    
    * {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    
    /* Professional Card Container */
    .location-cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 24px;
        padding: 24px 0;
    }
    
    /* Professional Card Style */
    .location-card {
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
        transition: all 0.2s ease;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .location-card:hover {
        border-color: #d1d5db;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }
    
    /* Professional Header */
    .location-card-header {
        background: #ffffff;
        padding: 20px 24px;
        border-bottom: 1px solid #f3f4f6;
        position: relative;
    }
    
    .location-card-header-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    
    .location-card-name {
        flex: 1;
    }
    
    .location-card-name h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 6px 0;
        color: #111827;
        line-height: 1.4;
    }
    
    .location-card-id {
        font-size: 12px;
        color: #6b7280;
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    
    /* Professional Status Badge */
    .location-card-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }
    
    .location-card-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
    }
    
    .location-card-status.active {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
    }
    
    .location-card-status.inactive {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
    
    /* Professional Body */
    .location-card-body {
        padding: 20px 24px;
        background: #ffffff;
        flex: 1;
    }
    
    .location-card-info {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .location-card-info:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .location-card-label {
        font-size: 11px;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .location-card-label i {
        font-size: 11px;
        color: #9ca3af;
    }
    
    .location-card-value {
        font-size: 14px;
        color: #111827;
        font-weight: 500;
        line-height: 1.5;
    }
    
    /* Professional Address Box */
    .location-card-address {
        background: #f9fafb;
        border-radius: 6px;
        padding: 14px 16px;
        margin-top: 16px;
        border: 1px solid #e5e7eb;
    }
    
    .location-card-address .location-card-label {
        margin-bottom: 6px;
    }
    
    .location-card-address .location-card-value {
        color: #374151;
        font-size: 13px;
        line-height: 1.6;
        font-weight: 400;
    }
    
    /* Professional Footer */
    .location-card-footer {
        padding: 16px 24px;
        background: #fafbfc;
        border-top: 1px solid #f3f4f6;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .location-card-footer .btn {
        flex: 1;
        min-width: 90px;
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.15s ease;
        border: 1px solid transparent;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    
    .location-card-footer .btn i {
        margin-right: 6px;
        font-size: 12px;
    }
    
    .location-card-footer .btn-primary {
        background: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
    }
    
    .location-card-footer .btn-primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }
    
    .location-card-footer .btn-accent {
        background: #059669;
        color: #ffffff;
        border-color: #059669;
    }
    
    .location-card-footer .btn-accent:hover {
        background: #047857;
        border-color: #047857;
    }
    
    .location-card-footer .btn-error {
        background: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
    }
    
    .location-card-footer .btn-error:hover {
        background: #b91c1c;
        border-color: #b91c1c;
    }
    
    /* Icon Wrapper - Professional Style */
    .location-card-icon-wrapper {
        display: none;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 40px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        grid-column: 1 / -1;
    }
    
    .empty-state i {
        font-size: 48px;
        color: #d1d5db;
        margin-bottom: 16px;
    }
    
    .empty-state h3 {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 8px;
    }
    
    .empty-state p {
        font-size: 14px;
        color: #6b7280;
        font-weight: 400;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        .location-cards-container {
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 20px 0;
        }
        
        .location-card-header,
        .location-card-body,
        .location-card-footer {
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .location-card-footer {
            flex-direction: column;
        }
        
        .location-card-footer .btn {
            width: 100%;
            min-width: auto;
        }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        .location-cards-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
@endsection

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang( 'business.business_locations' )
        <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">@lang( 'business.manage_your_business_locations' )</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary', 'title' => __( 'business.all_your_business_locations' )])
        @slot('tool')
            <div class="box-tools">
                <button class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full pull-right tw-mb-2 btn-modal"
                    data-href="{{action([\App\Http\Controllers\BusinessLocationController::class, 'create'])}}" 
                    data-container=".location_add_modal">
                    <i class="fa fa-plus"></i> @lang('messages.add')
                </button>
            </div>
        @endslot
        
        <div id="location-cards-wrapper">
            <div class="location-cards-container" id="business_location_cards">
                <!-- Cards will be loaded here via AJAX -->
            </div>
        </div>
    @endcomponent

    <div class="modal fade location_add_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade location_edit_modal" tabindex="-1" role="dialog" 
        aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->

@endsection

@section('javascript')
<script>
    // Use base URL construction for resource routes
    var businessLocationBaseUrl = '{{ url('/business-location') }}';
    var settingsLocationBaseUrl = '{{ url('/business-location') }}';
    var activateDeactivateBaseUrl = '{{ url('/business-location/activate-deactivate') }}';
    
    $(document).ready(function() {
        loadLocationCards();
    });
    
    function loadLocationCards() {
        $.ajax({
            url: '/business-location',
            method: 'GET',
            dataType: 'json',
            data: {
                ajax: true,
                simple: true
            },
            success: function(response) {
                var cardsContainer = $('#business_location_cards');
                cardsContainer.empty();
                
                if (response.data && response.data.length > 0) {
                    $.each(response.data, function(index, location) {
                        var cardHtml = buildLocationCard(location);
                        cardsContainer.append(cardHtml);
                    });
                } else {
                    cardsContainer.html(`
                        <div class="empty-state" style="grid-column: 1 / -1;">
                            <i class="fa fa-map-marker-alt"></i>
                            <h3>@lang('lang_v1.no_locations_found')</h3>
                            <p>@lang('lang_v1.add_your_first_location')</p>
                        </div>
                    `);
                }
            },
            error: function() {
                $('#business_location_cards').html(`
                    <div class="empty-state" style="grid-column: 1 / -1;">
                        <i class="fa fa-exclamation-triangle"></i>
                        <h3>@lang('messages.something_went_wrong')</h3>
                    </div>
                `);
            }
        });
    }
    
    function buildLocationCard(location) {
        var isActive = location.is_active == 1 || location.is_active == true;
        var statusClass = isActive ? '' : 'inactive';
        var statusText = isActive ? '@lang("lang_v1.activate_location")' : '@lang("lang_v1.deactivate_location")';
        var statusBtnClass = isActive ? 'btn-error' : 'btn-accent';
        
        var addressParts = [];
        if (location.landmark) addressParts.push(location.landmark);
        if (location.city) addressParts.push(location.city);
        if (location.state) addressParts.push(location.state);
        if (location.zip_code) addressParts.push(location.zip_code);
        if (location.country) addressParts.push(location.country);
        var fullAddress = addressParts.join(', ');
        
        var statusBadgeText = isActive ? 'Active' : 'Inactive';
        var statusAriaLabel = isActive ? 'Location is active' : 'Location is inactive';
        
        var cardHtml = `
            <div class="location-card">
                <div class="location-card-header">
                    <div class="location-card-header-top">
                        <div class="location-card-name">
                            <h3>${location.name || ''}</h3>
                            ${location.location_id ? `<div class="location-card-id">ID: ${location.location_id}</div>` : ''}
                        </div>
                        <div class="location-card-status ${statusClass}" aria-label="${statusAriaLabel}">
                            <span>${statusBadgeText}</span>
                        </div>
                    </div>
                </div>
                <div class="location-card-body">
                    ${fullAddress ? `
                    <div class="location-card-address">
                        <div class="location-card-label"><i class="fa fa-map-marker-alt"></i> @lang('business.address')</div>
                        <div class="location-card-value">${fullAddress}</div>
                    </div>
                    ` : ''}
                    ${location.price_group ? `
                    <div class="location-card-info">
                        <div class="location-card-label"><i class="fa fa-tags"></i> @lang('lang_v1.price_group')</div>
                        <div class="location-card-value">${location.price_group}</div>
                    </div>
                    ` : ''}
                    ${location.invoice_scheme ? `
                    <div class="location-card-info">
                        <div class="location-card-label"><i class="fa fa-file-invoice"></i> @lang('invoice.invoice_scheme')</div>
                        <div class="location-card-value">${location.invoice_scheme}</div>
                    </div>
                    ` : ''}
                </div>
                <div class="location-card-footer">
                    <button type="button" 
                        data-href="${businessLocationBaseUrl}/${location.id}/edit" 
                        class="btn btn-primary btn-modal" 
                        data-container=".location_edit_modal"
                        aria-label="Edit ${location.name || 'location'}">
                        <i class="fa fa-edit"></i> @lang('messages.edit')
                    </button>
                    <a href="${settingsLocationBaseUrl}/${location.id}/settings" 
                       class="btn btn-accent"
                       aria-label="Settings for ${location.name || 'location'}">
                        <i class="fa fa-wrench"></i> @lang('messages.settings')
                    </a>
                    <button type="button" 
                        data-href="${activateDeactivateBaseUrl}/${location.id}" 
                        class="btn ${statusBtnClass} activate-deactivate-location"
                        aria-label="${statusText}">
                        <i class="fa fa-power-off"></i> ${statusText}
                    </button>
                </div>
            </div>
        `;
        
        return cardHtml;
    }
    
    // Ensure btn-modal works for dynamically loaded cards
    $(document).on('click', '.location-card .btn-modal', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var $btn = $(this);
        var container = $btn.data('container');
        var href = $btn.data('href');
        
        if (!container || !href) {
            toastr.error('@lang("messages.something_went_wrong")');
            console.error('Modal configuration error:', {container: container, href: href});
            return false;
        }
        
        console.log('Loading modal from:', href, 'into container:', container);
        
        // Show loading indicator
        $(container).html('<div class="modal-dialog"><div class="modal-content"><div class="modal-body text-center" style="padding: 40px;"><i class="fa fa-spinner fa-spin fa-3x"></i><p>@lang("messages.loading")</p></div></div></div>').modal('show');
        
        $.ajax({
            url: href,
            method: 'GET',
            dataType: 'html',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(result) {
                console.log('Modal loaded successfully');
                $(container).html(result);
                // Re-initialize any form elements if needed
                if ($(container).find('form#business_location_add_form').length) {
                    // Form validation will be initialized by the existing handler
                }
            },
            error: function(xhr, status, error) {
                console.error('Error loading modal:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    error: error,
                    responseText: xhr.responseText.substring(0, 200)
                });
                
                var errorMsg = '@lang("messages.something_went_wrong")';
                if (xhr.status === 403) {
                    errorMsg = '@lang("lang_v1.unauthorized_action")';
                } else if (xhr.status === 404) {
                    errorMsg = '@lang("messages.not_found")';
                }
                
                $(container).html('<div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div class="alert alert-danger">' + errorMsg + '</div><button type="button" class="btn btn-default" data-dismiss="modal">@lang("messages.close")</button></div></div></div>');
                toastr.error(errorMsg);
            }
        });
        
        return false;
    });
    
    // Reload cards after modal actions
    $(document).on('hidden.bs.modal', '.location_add_modal, .location_edit_modal', function() {
        loadLocationCards();
    });
    
    // Handle activate/deactivate
    $(document).on('click', '.activate-deactivate-location', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        var btn = $(this);
        
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            success: function(result) {
                if (result.success) {
                    toastr.success(result.msg);
                    loadLocationCards();
                } else {
                    toastr.error(result.msg);
                }
            },
            error: function() {
                toastr.error('@lang("messages.something_went_wrong")');
            }
        });
    });
</script>
@endsection