@extends('Admin.Components.layout')
@section('title')
    Admin
@endsection
@section('subtitle')
    Add Commissioner
@endsection
@section('css')
    <style>
        .img-rounded {
            border-radius: 3px;
        }

        .img-thumbnail {
            background-color: #fff;
            border: 1px solid #ededf0;
            border-radius: 3px;
            display: inline-block;
            height: auto;
            line-height: 1.428571429;
            max-width: 100%;
            moz-transition: all .2s ease-in-out;
            o-transition: all .2s ease-in-out;
            padding: 2px;
            transition: all .2s ease-in-out;
            webkit-transition: all .2s ease-in-out;
        }

        .img-circle {
            border-radius: 50%;
        }

        .timeline-centered {
            position: relative;
            margin-bottom: 30px;
            margin-top: 20px;
        }

        .timeline-centered:before,
        .timeline-centered:after {
            content: " ";
            display: table;
        }

        .timeline-centered:after {
            clear: both;
        }

        .timeline-centered:before,
        .timeline-centered:after {
            content: " ";
            display: table;
        }

        .timeline-centered:after {
            clear: both;
        }

        .timeline-centered:before {
            content: '';
            position: absolute;
            display: block;
            width: 4px;
            background: #f5f5f6;
            left: 50%;
            top: 20px;
            bottom: 20px;
            margin-left: -4px;
        }

        .timeline-centered .timeline-entry {
            position: relative;
            width: 50%;
            float: right;
            margin-bottom: 70px;
            clear: both;
        }

        .timeline-centered .timeline-entry:before,
        .timeline-centered .timeline-entry:after {
            content: " ";
            display: table;
        }

        .timeline-centered .timeline-entry:after {
            clear: both;
        }

        .timeline-centered .timeline-entry:before,
        .timeline-centered .timeline-entry:after {
            content: " ";
            display: table;
        }

        .timeline-centered .timeline-entry:after {
            clear: both;
        }

        .timeline-centered .timeline-entry.begin {
            margin-bottom: 0;
        }

        .timeline-centered .timeline-entry.left-aligned {
            float: left;
        }

        .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
            margin-left: 0;
            margin-right: -18px;
        }

        .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
            left: auto;
            right: -100px;
            text-align: left;
        }

        .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
            float: right;
        }

        .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
            margin-left: 0;
            margin-right: 70px;
        }

        .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
            left: auto;
            right: 0;
            margin-left: 0;
            margin-right: -9px;
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .timeline-centered .timeline-entry .timeline-entry-inner {
            position: relative;
            margin-left: -22px;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner:before,
        .timeline-centered .timeline-entry .timeline-entry-inner:after {
            content: " ";
            display: table;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner:after {
            clear: both;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner:before,
        .timeline-centered .timeline-entry .timeline-entry-inner:after {
            content: " ";
            display: table;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner:after {
            clear: both;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
            position: absolute;
            left: -100px;
            text-align: right;
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span {
            display: block;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:first-child {
            font-size: 15px;
            font-weight: bold;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:last-child {
            font-size: 12px;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
            background: #fff;
            color: #737881;
            display: block;
            width: 40px;
            height: 40px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            text-align: center;
            -moz-box-shadow: 0 0 0 5px #f5f5f6;
            -webkit-box-shadow: 0 0 0 5px #f5f5f6;
            box-shadow: 0 0 0 5px #f5f5f6;
            line-height: 40px;
            font-size: 15px;
            float: left;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
            background-color: #303641;
            color: #fff;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary {
            background-color: #ee4749;
            color: #fff;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
            background-color: #00a651;
            color: #fff;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
            background-color: #21a9e1;
            color: #fff;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
            background-color: #fad839;
            color: #fff;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
            background-color: #cc2424;
            color: #fff;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
            position: relative;
            background: #f5f5f6;
            padding: 1.7em;
            margin-left: 70px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 9px 9px 9px 0;
            border-color: transparent #f5f5f6 transparent transparent;
            left: 0;
            top: 10px;
            margin-left: -9px;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2,
        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
            color: #737881;
            font-family: "Noto Sans", sans-serif;
            font-size: 12px;
            margin: 0;
            line-height: 1.428571429;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p+p {
            margin-top: 15px;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a {
            color: #303641;
        }

        .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span {
            -webkit-opacity: .6;
            -moz-opacity: .6;
            opacity: .6;
            -ms-filter: alpha(opacity=60);
            filter: alpha(opacity=60);
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row mt-2">
            <div class="col-12">
                <div class="card  p-3">
                    <div class="card-body ">
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                                </div>
                            </div>
                        @endif
                        <form action="{{ route('admin.commissioner.store') }}" method="POST" name="form" id="form">
                            {{ csrf_field() }}
                            @if (isset($data))
                                <input type="hidden" name='id' id='id' value="{{ $data->id }}">
                            @endif
                            <div class="col-sm-8 col-sm-offset-2">
                                <div class="form-group">
                                    <label for="website">Commissioner Name:</label>
                                    <input type="text" name="commissioner_name" id="commissioner_name"
                                        class="form-control"
                                        @if (isset($data)) value="{{ $data->name }}"
                                        @else
                                            value="{{ old('commissioner_name') }}" @endif>
                                </div>
                                <div class="form-group">
                                    <label for="website">Email:</label>
                                    <input type="text" name="commissioner_email" id="commissioner_email"
                                        class="form-control"
                                        @if (isset($data)) value="{{ $data->email }}"
                                    @else
                                        value="{{ old('commissioner_email') }}" @endif>
                                </div>
                                <div class="form-group">
                                    <label for="website">Phone Number:</label>
                                    <input type="text" name="commissioner_number" id="commissioner_number"
                                        class="form-control"
                                        @if (isset($data)) value="{{ $data->phone_number }}"
                                    @else
                                        value="{{ old('commissioner_number') }}" @endif>
                                </div>
                                <div class="form-group">
                                    <label for="website">Verify Id</label>
                                    <input type="text" name="commissioner_verified_id" id="commissioner_verified_id"
                                        class="form-control"
                                        @if (isset($data)) value="{{ $data->verify_id }}"
                                        @else
                                            value="{{ old('commissioner_verified_id') }}" @endif>
                                </div>
                                <div class="form-group">
                                    <label for="website">Surgery</label>
                                    <select class="form-control" name="commissioner_surgery" id="commissioner_surgery">
                                        <option value="">--Select Surgery--</option>
                                        @foreach ($surgery as $key => $value)
                                            @if (isset($data))
                                                <option value="{{ $value->id }}"
                                                    {{ $value->id == $data->surgery_id ? 'selected' : '' }}>
                                                    {{ $value->name }}
                                                </option>
                                            @else
                                                <option value="{{ $value->id }}">
                                                    {{ $value->name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group text-right">
                                    <button type="submit" class="btn btn-success"><i class="fa fa-plus"> Add</i></button>
                                    {{-- <a  class="btn btn-danger" href="{{route('admin.list.hospital')}}"><i class="fa fa-times"> Cancel</i></a> --}}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @if (isset($data))
                <div class="container">
                    <div class="row">
                        <div class="timeline-centered">
                            @foreach ($history as $k => $v)
                                @php
                                    $a = $k + 1;
                                    if ($a % 2 == 0) {
                                        $class = 'left-aligned';
                                        $bg = 'bg-secondary';
                                    } else {
                                        $class = '';
                                        $bg = 'bg-success';
                                    }
                                    $surgeryname = \App\Models\Admin\Surgery::where('id', '=', $v->surgery_id)->first();
                                    if ($v->action == 'Add') {
                                        $str = 'Join This Surgery';
                                    } else {
                                        $str = 'Change This Surgery';
                                    }
                                @endphp
                                <article class="timeline-entry {{ $class }}">
                                    <div class="timeline-entry-inner">
                                        <time class="timeline-time"
                                            datetime="2014-01-10T03:45"><span>{{ $v->date }}</span></time>
                                        <div class="timeline-icon {{ $bg }}">
                                            <i class="entypo-feather"></i>
                                        </div>
                                        <div class="timeline-label">
                                            <h2><a>{{ $surgeryname->name }}</a><span> {{ $str }}</span></h2>
                                            <p>{{ $surgeryname->address }}</p>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
@section('js')
    {{-- <script nonce="{{ $cspNonce }}" src="{{ asset(JS) }}/hospital/add.js"></script> --}}

    {{-- <script nonce="{{ $cspNonce }}" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&amp;libraries=places&key=AIzaSyBo3KpktOeAR6lKN3oWHl5IAw9a7FHGG24"></script>
<script nonce="{{ $cspNonce }}">
</script> --}}
@endsection