@extends('dashboard.layouts.master')
@section('title', 'Business Details | Admin Panel')

@push('after-styles')
<style>
    .nav-tabs .nav-link.active { border-top: 3px solid #002868; font-weight: 700; color: #002868; }
    .section-header {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 16px; background: #f0f4ff;
        border-left: 4px solid #002868; border-radius: 4px;
        margin: 20px 0 15px;
    }
    .section-header h5 { margin: 0; font-weight: 700; color: #002868; font-size: 14px; }
    .info-label { font-size: 10px; text-transform: uppercase; color: #888; margin-bottom: 2px; font-weight: 700; }
    .badge-active { background: #d4edda; color: #155724; }
    .badge-inactive { background: #f8d7da; color: #721c24; }
    .badge-suspended { background: #e2e3e5; color: #383d41; }
    .doc-card {
        border: 1px dashed #ccc; border-radius: 6px; padding: 10px;
        text-align: center; background: #f9f9f9;
    }
    .doc-card img { max-width: 100%; max-height: 120px; border-radius: 4px; }
    .scan-badge { background: #002868; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
</style>
@endpush

@section('content')
<div class="padding">
    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3>{{ $business->business_name }}</h3>
                <small>
                    <a href="{{ route('adminHome') }}">Dashboard</a> /
                    <a href="{{ route('businesses.index') }}">Business Management</a> /
                    <span>Details</span>
                </small>
            </div>
            <div class="box-header-right">
                <a href="{{ route('businesses.index') }}" class="btn btn-default btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
            </div>
        </div>

        <div class="box-body">
            <!-- Tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tab-details">Business Details</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-branches">Branches ({{ count($branches) }})</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-subscription">Subscription</a>
                </li>
            </ul>

            <div class="tab-content p-a m-t">
                <!-- Tab 1: Details -->
                <div class="tab-pane active" id="tab-details">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="section-header"><h5><i class="fa fa-info-circle"></i> Core Information</h5></div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Business Name</div>
                                    <div><strong>{{ $business->business_name }}</strong></div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Category</div>
                                    <div>{{ $business->category->name ?? '—' }}</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Current Status</div>
                                    <div id="business-status-badge">
                                        @if($business->status == 'active')
                                            <span class="badge badge-success">Active</span>
                                        @elseif($business->status == 'inactive')
                                            <span class="badge badge-danger">Inactive</span>
                                        @else
                                            <span class="badge badge-secondary">Suspended</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Member Since</div>
                                    <div>{{ $business->created_at->format('d M Y') }}</div>
                                </div>
                            </div>

                            <div class="section-header"><h5><i class="fa fa-map-marker"></i> Location & Contact</h5></div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">City / Address</div>
                                    <div>{{ $business->city ?? '—' }} / {{ $business->address_line_1 ?? '—' }}</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Business Email / Mobile</div>
                                    <div>{{ $business->business_email ?? '—' }} / {{ $business->business_mobile ?? '—' }}</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Pincode</div>
                                    <div>{{ $business->pincode ?? '—' }}</div>
                                </div>
                            </div>

                            <div class="section-header"><h5><i class="fa fa-user"></i> Owner Details</h5></div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Owner Name</div>
                                    <div>{{ $business->owner_name ?? $business->owner_name_user }}</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Owner Email</div>
                                    <div>{{ $business->owner_email ?? $business->owner_email_user }}</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Owner Mobile</div>
                                    <div>{{ $business->owner_mobile ?? $business->owner_phone_user }}</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="info-label">Account Holder</div>
                                    <div>{{ $business->owner_name_user ?? '—' }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="section-header"><h5><i class="fa fa-file"></i> Documents</h5></div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="info-label">Business Logo</div>
                                    <div class="doc-card">
                                        @if($business->logo)
                                            <img src="{{ asset('storage/business_owner/'.$business->logo) }}" alt="Logo">
                                        @else
                                            <div class="text-muted">No Logo</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="info-label">Cover Photo</div>
                                    <div class="doc-card">
                                        @if($business->cover_photo)
                                            <img src="{{ asset('storage/business_owner/'.$business->cover_photo) }}" alt="Cover">
                                        @else
                                            <div class="text-muted">No Cover</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="info-label">National ID (Front/Back)</div>
                                    <div class="doc-card">
                                        @if($business->national_id_front)
                                            <a href="{{ asset('storage/business_owner/'.$business->national_id_front) }}" target="_blank" class="btn btn-xs btn-default">Front</a>
                                        @endif
                                        @if($business->national_id_back)
                                            <a href="{{ asset('storage/business_owner/'.$business->national_id_back) }}" target="_blank" class="btn btn-xs btn-default">Back</a>
                                        @endif
                                        @if(!$business->national_id_front && !$business->national_id_back)
                                            <span class="text-muted">Not Uploaded</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="info-label">CR Certificate ({{ $business->cr_number ?? 'N/A' }})</div>
                                    <div class="doc-card">
                                        @if($business->cr_certificate_file)
                                            <a href="{{ asset('storage/business_owner/'.$business->cr_certificate_file) }}" target="_blank">View Certificate</a>
                                        @else
                                            <span class="text-muted">Not Uploaded</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="section-header"><h5><i class="fa fa-cog"></i> Management Actions</h5></div>
                            <div class="p-a light b-a r-2">
                                <label class="form-control-label">Change Status</label>
                                <select class="form-control" id="change-business-status">
                                    <option value="active" {{ $business->status == 'active' ? 'selected' : '' }}>Activate</option>
                                    <option value="inactive" {{ $business->status == 'inactive' ? 'selected' : '' }}>Deactivate</option>
                                    <option value="suspended" {{ $business->status == 'suspended' ? 'selected' : '' }}>Suspend</option>
                                </select>
                                <button class="btn btn-sm btn-primary btn-block m-t" onclick="updateBusinessStatus()">Apply Status</button>

                                <button class="btn btn-sm btn-danger btn-block m-t" onclick="deleteBusiness()">Delete Business</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 2: Branches -->
                <div class="tab-pane" id="tab-branches">
                    <div class="table-responsive">
                        <table class="table table-striped b-t">
                            <thead>
                                <tr>
                                    <th>Branch Name</th>
                                    <th>City</th>
                                    <th>Address</th>
                                    <th>Status</th>
                                    <th>QR Scans</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($branches as $branch)
                                <tr>
                                    <td>{{ $branch->branch_name }}</td>
                                    <td>{{ $branch->city }}</td>
                                    <td>{{ $branch->address_line_1 }}</td>
                                    <td>
                                        @if($branch->status == 'active')
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">{{ ucfirst($branch->status) }}</span>
                                        @endif
                                    </td>
                                    <td><span class="scan-badge">{{ $branch->scan_count }}</span></td>
                                    <td>
                                        <select class="form-control input-sm w-sm d-inline" onchange="updateBranchStatus({{ $branch->id }}, this.value)">
                                            <option value="active" {{ $branch->status == 'active' ? 'selected' : '' }}>Active</option>
                                            <option value="inactive" {{ $branch->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                            <option value="suspended" {{ $branch->status == 'suspended' ? 'selected' : '' }}>Suspend</option>
                                        </select>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="6" class="text-center">No branches found.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Tab 3: Subscription -->
                <div class="tab-pane" id="tab-subscription">
                    <div class="section-header"><h5><i class="fa fa-star"></i> Current Plan</h5></div>
                    @if($currentSubscription)
                        <div class="p-a light b-a r-2">
                            <div class="row">
                                <div class="col-md-3"><strong>Plan:</strong> {{ $currentSubscription->plan_name }}</div>
                                <div class="col-md-3"><strong>Price:</strong> {{ $currentSubscription->price }} SAR</div>
                                <div class="col-md-3"><strong>Start:</strong> {{ \Carbon\Carbon::parse($currentSubscription->start_date)->format('d M Y') }}</div>
                                <div class="col-md-3"><strong>End:</strong> {{ \Carbon\Carbon::parse($currentSubscription->end_date)->format('d M Y') }}</div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning">No active subscription found.</div>
                    @endif

                    <div class="section-header m-t-lg"><h5><i class="fa fa-history"></i> Subscription History</h5></div>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Plan Name</th>
                                    <th>Price</th>
                                    <th>Duration</th>
                                    <th>Dates</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($subscriptionHistory as $sh)
                                <tr>
                                    <td>{{ $sh->plan_name }}</td>
                                    <td>{{ $sh->price }} SAR</td>
                                    <td>{{ $sh->duration }} {{ $sh->duration_unit ?? 'Days' }}</td>
                                    <td>{{ \Carbon\Carbon::parse($sh->start_date)->format('d M Y') }} - {{ \Carbon\Carbon::parse($sh->end_date)->format('d M Y') }}</td>
                                    <td><span class="badge {{ $sh->status == 'active' ? 'badge-success' : 'badge-secondary' }}">{{ ucfirst($sh->status) }}</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Confirmation Modals --}}
<div id="deleteModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center p-a-lg">
                <h6 class="m-t">Are you sure you want to delete this business?</h6>
                <p class="text-muted">This action cannot be undone.</p>
                <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button class="btn btn-danger" onclick="confirmDelete()">Confirm Delete</button>
            </div>
        </div>
    </div>
</div>


@push('after-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
    const BUSINESS_ID = "{{ $business->id }}";

    function updateBusinessStatus() {
        const status = $('#change-business-status').val();
        Swal.fire({
            title: 'Update status?',
            text: `Change business status to ${status}?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, update'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ route('businesses.status') }}", {
                    business_id: BUSINESS_ID,
                    status: status
                }, function(data) {
                    if (data.success) {
                        Swal.fire('Success', data.msg, 'success').then(() => location.reload());
                    } else {
                        Swal.fire('Error', data.msg, 'error');
                    }
                });
            }
        });
    }

    function updateBranchStatus(branchId, status) {
        $.post("{{ route('businesses.branch.status') }}", {
            branch_id: branchId,
            status: status
        }, function(data) {
            if (data.success) {
                Swal.fire({
                    title: 'Branch Updated',
                    text: data.msg,
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => location.reload());
            } else {
                Swal.fire('Error', data.msg, 'error');
            }
        });
    }

    function deleteBusiness() {
        $('#deleteModal').modal('show');
    }

    function confirmDelete() {
        $.post("{{ route('businesses.delete') }}", {
            business_id: BUSINESS_ID
        }, function(data) {
            if (data.success) {
                window.location.href = "{{ route('businesses.index') }}";
            } else {
                Swal.fire('Error', data.msg, 'error');
            }
        });
    }
</script>
@endpush
@endsection