@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-tshirt mr-2"></i>Brands</b></h3>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary ml-auto">Add Brand</a>
</div>
<div class="card">
    <div class="card-body">
        <table id="datatable" class="datatable table table-hover table-center mb-0">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Brand Id</th>
                    <th>Status</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add Brand</h4>
<form action="{{ isset($id)? route('brands.update', $id) : route('brands.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif
    <div class="form-group">
        <label for="">Code</label>
        <input type="text" name="code" class="form-control" value="{{ isset($id)? $brand->code : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Name</label>
        <input type="text" name="name" class="form-control" value="{{ isset($id)? $brand->name : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Brand Id</label>
        <input type="text" name="brand_id" class="form-control" value="{{ isset($id)? $brand->brand_id : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Status</label>
        <select id="status" name="status" class="form-control">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a @if(isset($id)) href="{{ route('brands.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
<script>
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ URL::to('brands') }}",
        columns: [
            {data: 'code', name: 'code'},
            {data: 'name', name: 'name'},
            {data: 'brand_id', name: 'brand_id'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action'}
        ]
    });
</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');

        $('#status').val('{{ $brand->status }}')
    });
</script>
@endif
@endsection