@extends('layouts.adminmaster')
@section('title', 'Edit Tenant')

@section('content')
<div class="main-content p-4">
    <div class="page-content">
        <div class="container-fluid py-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>Edit Tenant</h2>
                <a href="{{ route('tenants.index') }}" class="btn btn-secondary">&larr; Back</a>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form id="tenantForm" method="POST" action="{{ route('tenants.update', $tenant->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- Progressbar -->
                <ul class="progressbar d-flex list-unstyled justify-content-between mb-4">
                    <li class="active">Personal</li>
                    <li>Address</li>
                    <li>Property</li>
                    <li>Documents</li>
                </ul>

                <!-- Step 1 -->
                <fieldset class="step">
                    <h5>Step 1: Personal Details</h5>
                    <div class="row mt-3">
                        <div class="col-md-6 mb-2">
                            <label>First Name</label>
                            <input type="text" name="first_name" value="{{ $tenant->first_name }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Last Name</label>
                            <input type="text" name="last_name" value="{{ $tenant->last_name }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Email</label>
                            <input type="email" name="email" value="{{ $tenant->email }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Phone Number</label>
                            <input type="text" name="phone_number" value="{{ $tenant->phone_number }}" class="form-control">
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Total Family Members</label>
                            <input type="number" name="total_family_member" value="{{ $tenant->total_family_member }}" class="form-control">
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Profile Picture</label>
                            <input type="file" name="profile" class="form-control">
                            @if($tenant->profile)
                                <img src="{{ asset('storage/' . $tenant->profile) }}" class="mt-2" width="100">
                            @endif
                        </div>
                    </div>
                    <button type="button" class="next btn btn-primary float-end">Next</button>
                </fieldset>

                <!-- Step 2 -->
                <fieldset class="step d-none">
                    <h5>Step 2: Address Details</h5>
                    <div class="row mt-3">
                        <div class="col-md-6 mb-2">
                            <label>Country</label>
                            <input type="text" name="country" value="{{ $tenant->country }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>State</label>
                            <input type="text" name="state" value="{{ $tenant->state }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>City</label>
                            <input type="text" name="city" value="{{ $tenant->city }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Zip Code</label>
                            <input type="text" name="zip_code" value="{{ $tenant->zip_code }}" class="form-control" required>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label>Full Address</label>
                            <textarea name="address" class="form-control" rows="3" required>{{ $tenant->address }}</textarea>
                        </div>
                    </div>
                    <button type="button" class="prev btn btn-secondary">Back</button>
                    <button type="button" class="next btn btn-primary float-end">Next</button>
                </fieldset>

                <!-- Step 3 -->
                <fieldset class="step d-none">
                    <h5>Step 3: Property Details</h5>
                    <div class="row mt-3">
                        <div class="col-md-6 mb-2">
                            <label>Property</label>
                            <select name="property_id" class="form-select" required>
                                <option value="">Select Property</option>
                                @foreach($properties as $property)
                                    <option value="{{ $property->id }}" {{ $tenant->property_id == $property->id ? 'selected' : '' }}>{{ $property->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Unit</label>
                            <select name="unit_id" class="form-select" required>
                                <option value="">Select Unit</option>
                                @foreach($units as $unit)
                                    <option value="{{ $unit->id }}" {{ $tenant->unit_id == $unit->id ? 'selected' : '' }}>{{ $unit->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Lease Start Date</label>
                            <input type="date" name="lease_start_date" value="{{ $tenant->lease_start_date }}" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-2">
                            <label>Lease End Date</label>
                            <input type="date" name="lease_end_date" value="{{ $tenant->lease_end_date }}" class="form-control" required>
                        </div>
                    </div>
                    <button type="button" class="prev btn btn-secondary">Back</button>
                    <button type="button" class="next btn btn-primary float-end">Next</button>
                </fieldset>

                <!-- Step 4 -->
                <fieldset class="step d-none">
                    <h5>Step 4: Upload Documents</h5>
                    <div class="mb-4 mt-3">
                        <label class="form-label">Upload Files</label>
                        <input type="file" name="documents[]" multiple class="form-control">
                        @if($tenant->documents && count($tenant->documents))
                            <div class="mt-2">
                                <p class="fw-bold">Existing Documents:</p>
                                <ul class="list-group">
                                    @foreach($tenant->documents as $doc)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            {{ $doc->filename }}
                                            <a href="{{ asset('storage/' . $doc->path) }}" target="_blank" class="btn btn-sm btn-primary">View</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <button type="button" class="prev btn btn-secondary">Back</button>
                    <button type="submit" class="btn btn-success float-end">Update</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
 <style>
    .progressbar li {
        width: 25%;
        text-align: center;
        position: relative;
        font-weight: 600;
        color: #999;
    }
    .progressbar li::before {
        content: '●';
        display: block;
        margin: auto;
        font-size: 22px;
        color: #999;
    }
    .progressbar li.active::before,
    .progressbar li.active {
        color: #28a745;
    }
    .progressbar li::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background: #ccc;
        top: 10px;
        left: -50%;
        z-index: -1;
    }
    .progressbar li:first-child::after {
        content: none;
    }
    .progressbar li.active + li::after {
        background: #28a745;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const steps = document.querySelectorAll('.step');
        const progressItems = document.querySelectorAll('.progressbar li');
        let currentStep = 0;

        function showStep(index) {
            steps.forEach((s, i) => s.classList.toggle('d-none', i !== index));
            progressItems.forEach((li, i) => li.classList.toggle('active', i <= index));
        }

        document.querySelectorAll('.next').forEach(btn => {
            btn.addEventListener('click', () => {
                if (currentStep < steps.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                }
            });
        });

        document.querySelectorAll('.prev').forEach(btn => {
            btn.addEventListener('click', () => {
                if (currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });
        });

        showStep(currentStep);
    });
</script>
@endsection