@extends('layouts.customer')
@section('content')
<style type="text/css">
    .pac-container {
        top: 300px !important;
    }

    div.btn-group {
        width: 100%;
        border-radius: 0.1rem;
        border: 1px solid #d7d7d7;
    }

    .multiselect-selected-text {
        float: left;
    }

    b.caret {
        margin-left: 79%;
    }

    ul.multiselect-container.dropdown-menu.show {
        width: 100%;
    }

    .points-x-no, .points-x-yes { display: none; }
    .points-x-no.show, .points-x-yes.show { display: block; }
    .custom-switch {
	padding-left: 2.25rem !important;
}
.edit_model {
	position: absolute;
	top: 20px;
	right: 20px;
}



       .div-container {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .div-container {
            /*max-width: 600px;*/
            margin: 30px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .form-group-google {
            margin-bottom: 20px;
        }

        .label-google {
            font-weight: bold;
            display: block;
            margin-bottom: 8px;
        }

        .input-google {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .google-btn {
            background-color: #4caf50;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;

        }

        .google-btn:hover {
            background-color: #45a049;
        }
         .validation-icon {
            display: inline-block;
            font-size: 20px;
            vertical-align: middle;
            margin-left: 5px;
        }

        .validation-icon.success {
            color: #4caf50;
        }

        .validation-icon.error {
            color: #ff0000;
        }
</style>
<link rel="stylesheet" href="/css/bootstrap-multiselect.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>Connect Gurbhub</h1>
            <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                <ol class="breadcrumb pt-0">

                    <li class="breadcrumb-item" aria-current="page">Grubhub</li>
                </ol>
            </nav>
            <div class="separator mb-5"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 div-container">
               @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
                @if ($message = Session::get('error'))
                    <div class="w-100 alert alert-danger">
                        <p>{{ $message }}</p>
                    </div>
                @endif
         <div class="col-12" ><h3 style="float: right;"><span style="margin-right: 20px;">Last Connected: @if(isset($grubhub_data->last_connected_at)){{ date('F j, Y h:i:s A',strtotime($grubhub_data->last_connected_at))}}  @else - @endif</span>   Connection Status: @if($connected)  <span class="validation-icon success">✔</span> @else  <span class="validation-icon error">✘</span>  @endif </h3></div> 
        <form method="post">
            @csrf
            <div class="form-group">
                <label class="label-google" for="apiKey">Client ID:</label>
                <input class="input-google" type="text" id="apiKey"  @if(isset($grubhub_data->client_id)) value="{{$grubhub_data->client_id}}"  @else value="{{old('client_id')}}"  @endif name="client_id" required>
            </div>

            <div class="form-group">
                <label class="label-google" for="secret_key">Secret Key:</label>
                <input class="input-google" type="text" id="secret_key"  @if(isset($grubhub_data->secret_key)) value="{{$grubhub_data->secret_key}}"  @else  value="{{old('secret_key')}}" @endif name="secret_key" required>
            </div>

            <div class="form-group">
                <label class="label-google" for="partner_key">Partner key:</label>
                <input class="input-google" type="text" id="partner_key" @if(isset($grubhub_data->partner_key)) value="{{$grubhub_data->partner_key}}"  @else value="{{old('partner_key')}}" @endif name="partner_key" required>
            </div>
            <div class="form-group">
                <label class="label-google" for="partner_key">Merchant ID:</label>
                <input class="input-google" type="text" id="merchant_id" @if(isset($grubhub_data->merchant_id)) value="{{$grubhub_data->merchant_id}}"  @else value="{{old('merchant_id')}}" @endif name="merchant_id" required>
            </div>
             <div class="form-group">
                <label class="label-google" for="partner_key">Issue Date:</label>
                <input class="input-google" type="date" id="issue_date" @if(isset($grubhub_data->partner_key)) value="{{$grubhub_data->issue_date}}"  @else value="{{old('issue_date')}}" @endif name="issue_date" required>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Save Credientials</button>
            </div>
        </form>

           
        </div>
    </div>
</div>

        
@endsection
@section('script')
    <script>
        
    </script>
@endsection