@extends('layouts.app')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Create New Contact</h1>
        <a href="{{ route('contacts.index') }}" class="btn btn-secondary">Back to Contacts</a>
    </div>

    <form action="{{ route('contacts.store') }}" method="POST">
        @csrf

        <!-- Contact Name -->
        <div class="mb-3">
            <label for="first_name" class="form-label">First Name</label>
            <input type="text" name="first_name" id="first_name" class="form-control" placeholder="Enter contact first name" required>
        </div>

        <div class="mb-3">
            <label for="last_name" class="form-label">Last Name</label>
            <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Enter contact last name"
            required>
        </div>

        <!-- Contact Status -->
        <div class="mb-3">
            <label for="status" class="form-label">Contact Status</label>
            <select name="status" id="status" class="form-select" required>
                <option value="">Select Status</option>
                @foreach($statuses as $status)
                    <option value="{{ $status }}">{{ $status }}</option>
                @endforeach
            </select>
        </div>

        <!-- Contact Stage -->
        <div class="mb-3">
            <label for="stage" class="form-label">Stage</label>
            <select name="stage" id="stage" class="form-select" required>
                <option value="">Select Stage</option>
                @foreach($stages as $stage)
                    <option value="{{ $stage }}">{{ $stage }}</option>
                @endforeach
            </select>
        </div>

        <!-- Timezone -->
        <div class="mb-3">
            <label for="timezone" class="form-label">Timezone</label>
            <select name="timezone" id="timezone" class="form-select" required>
                <option value="">Select Timezone</option>
                @foreach($timezones as $timezone)
                    <option value="{{ $timezone }}">{{ $timezone }}</option>
                @endforeach
            </select>
        </div>

        <!-- Birthday -->
        <div class="mb-3">
            <label for="birthday" class="form-label">Birthday</label>
            <input type="date" name="birthday" id="birthday" class="form-control">
        </div>

        <!-- Source -->
        <div class="mb-3">
            <label for="source" class="form-label">Source</label>
            <select name="source" id="source" class="form-select">
                <option value="">Select Source</option>
                @foreach($sources as $source)
                    <option value="{{ $source->id }}">{{ $source->name }}</option>
                @endforeach
            </select>
            <small class="form-text text-muted">Add a source in the dropdown or leave it blank.</small>
        </div>

        <!-- Tags -->
        <div class="mb-3">
            <label for="tags" class="form-label">Tags</label>
            <select name="tags[]" id="tags" class="form-select" multiple>
                @foreach($tags as $tag)
                    <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                @endforeach
            </select>
            <small class="form-text text-muted">Hold Ctrl (Cmd on Mac) to select multiple tags.</small>
        </div>

        <!-- Notes -->
        <div class="mb-3">
            <label for="notes" class="form-label">Notes</label>
            <textarea name="notes" id="notes" class="form-control" rows="4" placeholder="Add any notes about the contact"></textarea>
        </div>

        <!-- Phone Numbers -->
        <div class="mb-3">
            <label class="form-label">Phone Numbers</label>
            <div id="phone-numbers">
                <div class="input-group mb-2">
                    <input type="text" name="phones[0][number]" class="form-control" placeholder="Enter phone number">
                    <select name="phones[0][active]" class="form-select">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <button type="button" id="add-phone" class="btn btn-sm btn-outline-primary">+ Add Phone</button>
        </div>

        <!-- Emails -->
        <div class="mb-3">
            <label class="form-label">Email Addresses</label>
            <div id="email-addresses">
                <div class="input-group mb-2">
                    <input type="email" name="emails[0][address]" class="form-control" placeholder="Enter email address">
                    <select name="emails[0][active]" class="form-select">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <button type="button" id="add-email" class="btn btn-sm btn-outline-primary">+ Add Email</button>
        </div>

        <!-- Addresses -->
        <div class="mb-3">
            <label class="form-label">Addresses</label>
            <div id="addresses">
                <div class="input-group mb-2">
                    <input type="text" name="addresses[0][value]" class="form-control" placeholder="Enter address">
                    <select name="addresses[0][type]" class="form-select">
                        <option value="Owned Property">Owned Property</option>
                        <option value="Mailing Address">Mailing Address</option>
                    </select>
                </div>
            </div>
            <button type="button" id="add-address" class="btn btn-sm btn-outline-primary">+ Add Address</button>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary">Save Contact</button>
    </form>
</div>

<!-- JavaScript for Dynamic Fields -->
<script>
    document.getElementById('add-phone').addEventListener('click', function () {
        const phoneIndex = document.querySelectorAll('#phone-numbers .input-group').length;
        const phoneField = `
            <div class="input-group mb-2">
                <input type="text" name="phones[${phoneIndex}][number]" class="form-control" placeholder="Enter phone number">
                <select name="phones[${phoneIndex}][active]" class="form-select">
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>`;
        document.getElementById('phone-numbers').insertAdjacentHTML('beforeend', phoneField);
    });

    document.getElementById('add-email').addEventListener('click', function () {
        const emailIndex = document.querySelectorAll('#email-addresses .input-group').length;
        const emailField = `
            <div class="input-group mb-2">
                <input type="email" name="emails[${emailIndex}][address]" class="form-control" placeholder="Enter email address">
                <select name="emails[${emailIndex}][active]" class="form-select">
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>`;
        document.getElementById('email-addresses').insertAdjacentHTML('beforeend', emailField);
    });

    document.getElementById('add-address').addEventListener('click', function () {
        const addressIndex = document.querySelectorAll('#addresses .input-group').length;
        const addressField = `
            <div class="input-group mb-2">
                <input type="text" name="addresses[${addressIndex}][value]" class="form-control" placeholder="Enter address">
                <select name="addresses[${addressIndex}][type]" class="form-select">
                    <option value="Owned Property">Owned Property</option>
                    <option value="Mailing Address">Mailing Address</option>
                </select>
            </div>`;
        document.getElementById('addresses').insertAdjacentHTML('beforeend', addressField);
    });
</script>
@endsection