@extends('layouts.master')
@section('page_title', 'TransExpress Couirer')
@section('title', 'TransExpress Couirer')
@section('main_item', 'TransExpress Couirer')
@section('sub_item', 'TransExpress Couirer')
@section('content')

    <div class="row col-md-12">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">API Settings</a>
                        </li>
                    </ul>
                    <div class="tab-pane p-3" id="settings" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <form action="{{ url('trans/couirer/api/settings/store') }}" method="post">
                                            @csrf
                                            <div class="row">
                                                @if (!empty($alerts['api_connection_fail']))
                                                    <div class="col-md-12">
                                                        <div class="alert alert-danger alert-dismissible fade show"
                                                            role="alert">
                                                            <button type="button" class="close" data-dismiss="alert"
                                                                aria-label="Close">
                                                                <span aria-hidden="true"><i
                                                                        class="mdi mdi-close"></i></span>
                                                            </button>
                                                            {{ $alerts['api_connection_fail'] }}.
                                                        </div>
                                                    </div>
                                                @elseif (!empty($alerts['api_connection_success']))
                                                    <div class="col-md-12">
                                                        <div class="alert alert-success alert-dismissible fade show"
                                                            role="alert">
                                                            <button type="button" class="close" data-dismiss="alert"
                                                                aria-label="Close">
                                                                <span aria-hidden="true"><i
                                                                        class="mdi mdi-close"></i></span>
                                                            </button>
                                                            {{ $alerts['api_connection_success'] }}.
                                                        </div>
                                                    </div>
                                                @endif
                                                <br><div class="col-sm-3">
                                                    <div class="nav flex-column nav-pills text-center" id="v-pills-tab"
                                                        role="tablist" aria-orientation="vertical">
                                                        <a class="nav-link waves-effect waves-light active"
                                                            id="v-pills-home-tab" data-toggle="pill" href="#intro"
                                                            role="tab" aria-controls="v-pills-home"
                                                            aria-selected="true">Introduction</a>
                                                        <a class="nav-link waves-effect waves-light"
                                                            id="v-pills-profile-tab" data-toggle="pill" href="#api-settings"
                                                            role="tab" aria-controls="v-pills-profile"
                                                            aria-selected="false">API
                                                            Settings</a>
                                                    </div>
                                                </div>
                                                <div class="col-sm-9">
                                                    <div class="tab-content mo-mt-2" id="v-pills-tabContent">
                                                        <div class="tab-pane fade active show" id="intro"
                                                            role="tabpanel" aria-labelledby="v-pills-home-tab">
                                                            <ul class="mb-0">
                                                                <li>Contact the Support of TransExpress.
                                                                    <a href="https://portal.transexpress.lk/"
                                                                        target="_blank">Click Here</a> for more info.
                                                                </li>
                                                                <li>Get the API Deatils.</li>
                                                                <li>Click API Setting.</li>
                                                                <li>Updated the API Seting Deatils.</li>
                                                            </ul>
                                                        </div>
                                                        <div class="tab-pane fade" id="api-settings" role="tabpanel"
                                                            aria-labelledby="v-pills-profile-tab">
                                                            <div class="row col-md-12">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">
                                                                            API Key</label>
                                                                        <input type="text" class="form-control" required
                                                                            id="exampleInputEmail1"
                                                                            name="trans_courier_api_key"
                                                                            value="{{ $api_settings->trans_courier_api_key }}"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="API Key">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row col-md-12">
                                                <button type="submit"
                                                    class="btn btn-primary waves-effect waves-light">Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection