@extends('frontend.layout_2')
@section('title', 'Update Info')
@section('sub_layout')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

<style>
    :root { --primary:#e53935; --bg:#f5f5f5; --soft:#ffe5e5; --border:#f0f0f0; }
    * { box-sizing:border-box;margin:0;padding:0; }
    body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg); }

    .page { max-width:900px;margin:18px auto 30px;padding:0 12px; }
    .card { background:#fff;border-radius:18px;padding:18px 18px 20px;
            box-shadow:0 6px 16px rgba(0,0,0,.06);margin-bottom:14px; }

    .form-header{
        display:flex;
        align-items:center;
        gap:10px;
        margin-bottom:14px;
    }
    .form-icon{
        height:36px;width:36px;border-radius:50%;
        background:var(--soft);
        display:flex;align-items:center;justify-content:center;
        color:var(--primary);font-size:17px;
    }
    .form-title{
        font-size:18px;font-weight:700;color:#333;
    }
    .form-sub{
        font-size:13px;color:#777;
    }

    .form-group{ margin-bottom:16px; }
    .form-label{ font-size:13px;font-weight:600;margin-bottom:6px;display:block;color:#444; }
    .input-control{
        width:100%;padding:9px 10px;border-radius:10px;
        border:1px solid var(--border);font-size:14px;
        outline:none;transition:.15s border;
        background:#fafafa;
    }
    .input-control:focus{ border-color:var(--primary);background:#fff; }

    .btn-row{
        display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:4px;
    }
    .btn{
        border-radius:999px;
        padding:9px 18px;
        font-size:14px;
        font-weight:600;
        border:1px solid transparent;
        display:inline-flex;
        align-items:center;
        gap:6px;
        cursor:pointer;
        text-decoration:none;
        transition:.15s all;
        white-space:nowrap;
    }
    .btn-primary{
        background:var(--primary);
        color:#fff;
        border-color:var(--primary);
    }
    .btn-primary:hover{ filter:brightness(.95); }
    .btn-outline{
        background:#fff;
        color:var(--primary);
        border-color:var(--primary);
    }
    .btn-outline:hover{
        background:var(--soft);
    }

    .alert{
        padding:8px 10px;border-radius:10px;font-size:13px;margin-bottom:10px;
    }
    .alert-success{ background:#e6f7e9;color:#1b7a36; }
    .alert-error{ background:#ffeaea;color:#b3261e; }

    @media (max-width:480px){
        .btn-row{ justify-content:center; }
    }
</style>

<div class="page">
    <div class="card">
        <div class="form-header">
            <div class="form-icon">
                <i class="fa-regular fa-user"></i>
            </div>
            <div>
                <div class="form-title">Update Info</div>
                <div class="form-sub">নাম, ইমেইল আর ফোন নাম্বার আপডেট করুন।</div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="alert alert-error">
                @foreach($errors->all() as $err)
                    <div>{{ $err }}</div>
                @endforeach
            </div>
        @endif

        <form action="{{ route('profile.info.update') }}" method="POST">
            @csrf

            <div class="form-group">
                <label class="form-label" for="name">Name</label>
                <input type="text" name="name" id="name" class="input-control"
                       value="{{ old('name',$user->name) }}">
            </div>

            <div class="form-group">
                <label class="form-label" for="email">Email</label>
                <input type="email" name="email" id="email" class="input-control"
                       value="{{ old('email',$user->email) }}">
            </div>

            <div class="form-group">
                <label class="form-label" for="phone">Phone</label>
                <input type="text" name="phone" id="phone" class="input-control"
                       value="{{ old('phone',$user->phone) }}">
            </div>

            <div class="btn-row">
                <a href="{{ route('profile') }}" class="btn btn-outline">
                    <i class="fa-solid fa-arrow-left"></i> Back
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-regular fa-circle-check"></i> Save Info
                </button>
            </div>
        </form>
    </div>
</div>
@endsection