@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fa fa-columns mr-2"></i>Templates</b></h3>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary ml-auto">Add Template</a>
</div>
<div class="card">
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Courier</th>
                    <th>Type</th>
                    <th>Zone</th>
                    <th>Body</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $_invoice)
                <tr>
                    <td>{{ $_invoice->courier_name }}</td>
                    <td>{{ ucfirst($_invoice->type) }}</td>
                    <td>{{ ucfirst($_invoice->zone) }}</td>
                    <td>{{ substr($_invoice->html, 0, 55) }}
                        @if(strlen($_invoice->html) > 55)
                            <b>... </b>
                        @endif
                    </td>
                    <td class="text-right">
                        <div class="d-flex">
                            <a href="{{ route('template.edit', $_invoice->id) }}" class="btn btn-primary btn-sm ml-auto mr-2">Edit</a>
                            <form action="{{ route('template.destroy', $_invoice->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-primary btn-sm ml-auto">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-4">
            {{ $invoices->links() }}
        </div>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add Template</h4>
<form action="{{ isset($id)? route('template.update', $id) : route('template.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif
    <div class="form-group">
        <label for="">Courier</label>
        <select id="courier" class="form-control" name="api_id">
            @foreach(App\Api::select('id','name')->get() as $_api)
                <option value="{{ $_api->id }}">{{ $_api->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="">Type</label>
        <select id="type" class="form-control" name="type">
            <option value="invoice">Invoice</option>
            <option value="airway label">Airway Label</option>
            <option value="email">Email</option>
        </select>
    </div>
    <div class="form-group">
        <label for="">Zone</label>
        <select id="type" class="form-control" name="zone">
            <option value="local">Local</option>
            <option value="international">International</option>
        </select>
    </div>
    <div class="form-group">
        <label for="">Body</label>
        <textarea name="html" rows="9" class="form-control invoice-html" required>{{ isset($id)? $invoice->html : '' }}</textarea>
    </div>
    <div class="form-group">
        <button type="submit" name="preview" class="btn btn-primary float-right">Preview</button>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a @if(isset($id)) href="{{ route('template.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
@if(isset($id))
<script>
    $(document).ready(function(){
        var formBar = $('.form-bar');
        var formBarOverlay = $('.form-bar-overlay');

        formBar.addClass('show-form-bar'); 
        formBarOverlay.addClass('show-form-bar-overlay');

        $('#type').val('{{ $invoice->type }}');
        $('#courier').val('{{ $invoice->api_id }}');
    });
</script>
@endif
@endsection