@extends('layouts.app')
@section('content')
    <div class="app-main__inner card">
        <div class="dashboard_mainsec">
            <div class="dashboardmain_body">
                @role('customer')
                    <div class="dashboard_headtitle">
                        <h4>{{ 'UCS' . auth()->user()->mobile_number }}</h4>
                    </div>
                    <div class="user_details">
                        <div class="userde_left">
                            <p>User Name: {{ __(auth()->user()?->full_name) }} <span class="acrive_box">Active</span></p>
                            <p>Branch: {!! auth()->user()?->profile?->branch !!}</p>
                            <p>Phone: {{ auth()->user()?->full_name }}</p>
                            <p>Email: {{ auth()->user()?->email }}</p>
                            <p>Rate Group: Default Rates</p>
                        </div>
                        <div class="userde_right">
                            <div class="wallet_box">
                                <p>Wallet Balance: ${{ number_format(round($balance ?? 0, 2)) }}</p>
                                <a href="#">
                                    <img src="{{ asset('assets/images/edit-pencil.svg') }}" class="img-fluid" alt="">
                                </a>
                            </div>

                            <div class="actionbtn_box">
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/user.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/home.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/flight.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/password.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/edit.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/edit.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="singleaction_box">
                                        <img src="{{ asset('assets/images/delete.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                @endrole

                <div class="main_wrapper">
                    <div class="mainwr_head">
                        @role('customer')
                            <div class="mainwrh_left">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="pills-prealert-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-prealert" type="button" role="tab"
                                            aria-controls="pills-prealert" aria-selected="true">
                                            <span>
                                                <img src="{{ asset('assets/images/pre-alert.svg') }}" class="img-fluid"
                                                    alt="">
                                            </span>Pre-Alerts
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-package-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-package" type="button" role="tab"
                                            aria-controls="pills-package" aria-selected="false"><span><img
                                                    src="{{ asset('assets/images/packages.svg') }}" class="img-fluid"
                                                    alt=""></span>Packages</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-transaction-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-transaction" type="button" role="tab"
                                            aria-controls="pills-transaction" aria-selected="false"><span><img
                                                    src="{{ asset('assets/images/transaction.svg') }}" class="img-fluid"
                                                    alt=""></span>Transactions</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-payment-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-payment" type="button" role="tab"
                                            aria-controls="pills-payment" aria-selected="false"><span><img
                                                    src="{{ asset('assets/images/payment.svg') }}" class="img-fluid"
                                                    alt=""></span>Payments</button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-notes-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-notes" type="button" role="tab"
                                            aria-controls="pills-notes" aria-selected="false"><span><img
                                                    src="{{ asset('assets/images/notes.svg') }}" class="img-fluid"
                                                    alt=""></span>Notes</button>
                                    </li>
                                </ul>
                            </div>
                        @endrole
                        @role('customer')
                            <div class="mainwrh_right">
                                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addprealert">
                                    <div class="alert_icon">
                                        <img src="{{ asset('assets/images/alert.svg') }}" class="img-fluid" alt="">
                                    </div>
                                </a>
                            </div>
                        @endrole()
                    </div>

                    <div class="mainwr_body">
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-prealert" role="tabpanel"
                                aria-labelledby="pills-prealert-tab">
                                <div class="account_mainwrapper">
                                    <x-pill.pre-alert :$prealerts />
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-package" role="tabpanel"
                                aria-labelledby="pills-package-tab">...</div>
                            <div class="tab-pane fade" id="pills-transaction" role="tabpanel"
                                aria-labelledby="pills-transaction-tab">...</div>
                            <div class="tab-pane fade" id="pills-payment" role="tabpanel"
                                aria-labelledby="pills-payment-tab">...</div>
                            <div class="tab-pane fade" id="pills-notes" role="tabpanel"
                                aria-labelledby="pills-notes-tab">
                                ...</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('modal')
    <x-modal.add-pre-alert />
@endsection

@push('scripts')
    <script src="{{ asset('assets/custom/js/submit.js') }}"></script>
@endpush