@extends('user.layout')

@section('content')

<style>
    .depositcard.shadow-sm.p-4 {
        max-width: 500px;
        height: auto;
        background: #fff;
        border-radius: 10px;
    }

    .wallet.card {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 80%;
        background: #000B58;
        border-radius: 10px;
        color: #fff;
    }

    .wallet.fw-regular {
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: 0.5px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }


    .link-active {
    position: relative;
    text-decoration: none; /* Remove default underline */
}

.link-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px; /* Adjust the position for the underline */
    width: 100%;
    height: 2px; /* Thickness of the underline */
    background-color: currentColor; /* Matches the text-primary color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    margin-top: 1px; /* Add margin above the underline */
}
</style>

<div class="row mb-3">
    <div class="row d-flex justify-content-between">
        <h4 class="page-top-heading">Create Ticket</h4>
    </div>
   
    <div class="col-lg-4">
    <div class="d-flex justify-content-center gap-3 mt-4">
        <a href="{{ route('create_ticket') }}" 
           class="link-active {{ Request::routeIs('create_ticket') ? 'text-primary fw-bold' : 'text-secondary' }}">
            Create Ticket
            @if(Request::routeIs('create_ticket'))
                <div class="border border-primary mt-1" style="width: 100%;"></div>
            @endif
        </a>
        <a href="{{ route('open_ticket') }}" 
           class="{{ Request::routeIs('open_ticket') ? 'text-primary fw-bold' : 'text-secondary' }}">
            Open Ticket
            @if(Request::routeIs('open_ticket'))
                <div class="border border-primary mt-1" style="width: 100%;"></div>
            @endif
        </a>
        <a href="{{ route('closed_ticket') }}" 
           class="{{ Request::routeIs('closed_ticket') ? 'text-primary fw-bold' : 'text-secondary' }}">
            Close Ticket
            @if(Request::routeIs('closed_ticket'))
                <div class="border border-primary mt-1" style="width: 100%;"></div>
            @endif
        </a>
    </div>
</div>


</div>

<div class="row d-flex justify-content-center">
    <div class="depositcard shadow-sm p-4">
        <form action="#" method="POST">
            <div class="my-4">
                <label for="walletAddress" class="form-label fw-bold">Title</label>
                <input type="text" id="title" class="form-control" value="0x32Be343B94f860124dC4fEe278FDCBD38C102D88" />
            </div>

            <div class="my-4">
                <label for="walletAddress" class="form-label fw-bold">Description</label>
                <textarea type="text" id="title" class="form-control" value="0x32Be343B94f860124dC4fEe278FDCBD38C102D88"></textarea>
            </div>
            <div class="text-center">
            <button type="submit" class="btn bg-primary btn-md text-white mt-4">Submit</button>
            </div>
        </form>

    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <h4 class="mb-3 fw-bold">Are you sure</h4>
                <hr>
                <h6 class="mb-4 fw-regular mt-3">Are you sure you want to Add Wallet Address?</h6>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary py-3 w-50">Yes, Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection