@extends('layouts.app')

@section('content')
<div class="row mb-4">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted small">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted small">Experience</a></li>
                <li class="breadcrumb-item active text-primary small fw-semibold" aria-current="page">Create</li>
            </ol>
        </nav>
        <h2 class="fw-bold text-dark">Add New Experience</h2>
        <p class="text-secondary small">Add details about your previous roles, company, and timeline.</p>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="card-header bg-white border-0 py-3 px-4 mt-2">
                <h6 class="m-0 fw-bold text-dark"><i class="bi bi-briefcase-fill me-2 text-primary"></i> Experience Details</h6>
            </div>
            <div class="card-body p-4 pt-2">
                <form action="{{ route('experiences.store') }}" method="POST" enctype="multipart/form-data" id="createExperienceForm">
                    @csrf
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="company_name" class="form-label fw-bold text-dark mb-2">Company Name</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-building text-secondary"></i></span>
                                <input type="text" name="company_name" class="form-control bg-light border-0 @error('company_name') is-invalid @enderror" id="company_name" placeholder="e.g. Google, Microsoft" value="{{ old('company_name') }}" required style="padding: 0.75rem;">
                            </div>
                            @error('company_name')
                                <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="job_title" class="form-label fw-bold text-dark mb-2">Job Title</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-person-workspace text-secondary"></i></span>
                                <input type="text" name="job_title" class="form-control bg-light border-0 @error('job_title') is-invalid @enderror" id="job_title" placeholder="e.g. Senior Software Engineer" value="{{ old('job_title') }}" required style="padding: 0.75rem;">
                            </div>
                            @error('job_title')
                                <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="designation" class="form-label fw-bold text-dark mb-2">Designation</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0"><i class="bi bi-award text-secondary"></i></span>
                            <input type="text" name="designation" class="form-control bg-light border-0 @error('designation') is-invalid @enderror" id="designation" placeholder="e.g. Lead Developer / Team Lead" value="{{ old('designation') }}" style="padding: 0.75rem;">
                        </div>
                        @error('designation')
                            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="start_year" class="form-label fw-bold text-dark mb-2">Start Year</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-calendar-event text-secondary"></i></span>
                                <input type="text" name="start_year" class="form-control bg-light border-0 @error('start_year') is-invalid @enderror" id="start_year" placeholder="e.g. 2018 or Jan 2018" value="{{ old('start_year') }}" required style="padding: 0.75rem;">
                            </div>
                            @error('start_year')
                                <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="end_year" class="form-label fw-bold text-dark mb-2">End Year</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-calendar-check text-secondary"></i></span>
                                <input type="text" name="end_year" class="form-control bg-light border-0 @error('end_year') is-invalid @enderror" id="end_year" placeholder="e.g. 2022, Present" value="{{ old('end_year') }}" required style="padding: 0.75rem;">
                            </div>
                            @error('end_year')
                                <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="description" class="form-label fw-bold text-dark mb-2">Description</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0 align-items-start pt-3"><i class="bi bi-text-paragraph text-secondary"></i></span>
                            <textarea name="description" class="form-control bg-light border-0 @error('description') is-invalid @enderror" id="description" rows="5" placeholder="Describe your roles and responsibilities in this position...">{{ old('description') }}</textarea>
                        </div>
                        @error('description')
                            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="company_logo" class="form-label fw-bold text-dark mb-2">Company Logo</label>
                        <p class="small text-secondary mb-2">Upload a square logo for better rendering (e.g. 200x200 px).</p>
                        <div class="upload-container bg-light rounded-4 p-4 text-center border-2 border-dashed border-secondary-subtle">
                            <i class="bi bi-image-fill text-primary fs-1 mb-3 d-block"></i>
                            <p class="text-dark fw-semibold mb-1">Choose a company logo</p>
                            <p class="text-secondary small mb-3" id="file-name">JPEG, PNG, JPG, or WEBP up to 2MB</p>
                            <input type="file" name="company_logo" class="form-control @error('company_logo') is-invalid @enderror" id="company_logo" onchange="showFileName(this)">
                        </div>
                        @error('company_logo')
                            <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                    <script>
                        function showFileName(input) {
                            if (input.files && input.files[0]) {
                                document.getElementById('file-name').innerText =
                                    'Selected: ' + input.files[0].name;
                            }
                        }
                    </script>

                    <hr class="my-4 opacity-50">

                    <div class="d-flex align-items-center justify-content-between">
                        <a href="{{ route('experiences.index') }}" class="btn btn-link text-decoration-none text-secondary fw-semibold">
                            <i class="bi bi-arrow-left me-1"></i> Back to List
                        </a>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-light rounded-3 px-4 fw-semibold text-secondary" id="resetExperienceBtn">
                                <span class="reset-btn-default">Reset</span>
                                <span class="reset-btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                    Resetting...
                                </span>
                            </button>
                            <button type="submit" class="btn btn-primary rounded-3 px-5 fw-bold shadow-sm">
                                <i class="bi bi-plus-lg me-2"></i> Save Experience
                            </button>
                        </div>
                    </div>
                </form>
                <div class="reset-status-message d-none mt-3" id="resetStatusMessage">
                    <div class="d-inline-flex align-items-center bg-light border rounded-3 px-3 py-2 text-secondary small fw-semibold">
                        <span class="spinner-border spinner-border-sm me-2 text-primary" role="status" aria-hidden="true"></span>
                        Resetting all the data...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border-0 experience-tips-card text-white rounded-4 shadow-lg p-3">
            <div class="card-body">
                <h5 class="fw-bold mb-3">Experience Tips</h5>
                <div class="d-flex mb-3">
                    <i class="bi bi-lightning-charge-fill me-3 fs-5"></i>
                    <p class="small mb-0">Highlight the most significant achievements instead of just responsibilities.</p>
                </div>
                <div class="d-flex mb-3">
                    <i class="bi bi-calendar2-range-fill me-3 fs-5"></i>
                    <p class="small mb-0">Keep date formats consistent (e.g. 2018 - 2022, or Jan 2018 - Present).</p>
                </div>
                <div class="d-flex">
                    <i class="bi bi-building me-3 fs-5"></i>
                    <p class="small mb-0">Upload a clear, transparent background company logo for a more premium look on the timeline.</p>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mt-4 p-2 bg-white">
            <div class="card-body d-flex align-items-center">
                <div class="bg-primary-subtle text-primary rounded-circle p-3 me-3">
                    <i class="bi bi-info-circle-fill fs-4"></i>
                </div>
                <div>
                    <h6 class="fw-bold text-dark mb-1">Display Info</h6>
                    <p class="text-secondary small mb-0">This information will be displayed chronologically on your frontend journey timeline.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .upload-container {
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    .upload-container:hover {
        background-color: #f1f5f9 !important;
        border-color: #3b82f6 !important;
    }
    .upload-container input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    .experience-tips-card {
        background: linear-gradient(145deg, #4f46e5 0%, #4338ca 45%, #312e81 100%);
    }
    .bg-primary-subtle { background-color: #e0e7ff !important; }
    .text-primary { color: #4f46e5 !important; }
    .border-dashed { border-style: dashed !important; }
    .input-group-text { border: none !important; }
    .breadcrumb-item + .breadcrumb-item::before { content: "\2022"; color: #cbd5e1; }
</style>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('createExperienceForm');
        const resetBtn = document.getElementById('resetExperienceBtn');
        const resetStatusMessage = document.getElementById('resetStatusMessage');

        if (!form || !resetBtn || !resetStatusMessage) {
            return;
        }

        resetBtn.addEventListener('click', function () {
            if (resetBtn.disabled) {
                return;
            }

            const defaultLabel = resetBtn.querySelector('.reset-btn-default');
            const loadingLabel = resetBtn.querySelector('.reset-btn-loading');

            resetBtn.disabled = true;
            defaultLabel.classList.add('d-none');
            loadingLabel.classList.remove('d-none');
            resetStatusMessage.classList.remove('d-none');

            window.setTimeout(function () {
                form.reset();
                document.getElementById('file-name').innerText = 'JPEG, PNG, JPG, or WEBP up to 2MB';
                resetBtn.disabled = false;
                loadingLabel.classList.add('d-none');
                defaultLabel.classList.remove('d-none');
                resetStatusMessage.classList.add('d-none');
            }, 900);
        });
    });
</script>
@endsection
