@extends('frontend.support.layouts')
@push('style')
<style>
    @media (max-width: 768px) {
        .form-container {
            border: none !important;
            margin: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
            height: 100vh !important;
        }
        .ticket-form-card {
            border: none !important;
            margin: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 15px !important;
        }
    }

    @media (min-width: 769px) {
        .form-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
@endpush

@section('support-content')
<div class="form-wrapper">
        <div class="form-container my-5" style="max-width: 1200px;">
            <div class="card shadow rounded-4 p-4 ticket-form-card">
                <h3 class="mb-4 text-primary border-bottom pb-2">Update Your Ticket Profile</h3>
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <form action="{{ route('support.profile.update', $ticket->ticket_number) }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Ticket Number</label>
                        <input type="text" class="form-control bg-light" value="{{ $ticket->ticket_number }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Name</label>
                        <input type="text" class="form-control bg-light" value="{{ $ticket->name }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Mobile</label>
                        <input
                            type="text"
                            name="mobile"
                            class="form-control"
                            value="{{ old('mobile', $ticket->mobile) }}"
                            placeholder="Enter your mobile number"
                        >
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $ticket->email) }}" placeholder="Enter your email">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Address</label>
                        <textarea
                            name="address"
                            class="form-control"
                            rows="3"
                            placeholder="Enter your address"
                        >{{ old('address', $ticket->address) }}</textarea>
                    </div>

                    <div class="d-flex justify-content-between flex-wrap gap-2 mt-4">
                        <button type="submit" class="btn btn-primary flex-fill">
                            Update Profile
                        </button>
                        <a href="{{ route('support.dashboard', $ticket->ticket_number) }}" class="btn btn-secondary flex-fill">
                            Back
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection