@extends('header.header')
@section('content')
    <div class="header bg-primary pb-6  pt-5">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">{{ __('Categories') }}</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/">{{ __('Dashboard') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ __('Category table') }}</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12">
                        <a href="#" class="btn btn-sm btn-neutral" data-toggle="collapse"
                            data-target="#collapseExample" aria-expanded="false"
                            aria-controls="collapseExample">{{ __('create new category') }}
                            +</a><br><br>
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <form method="POST" action="{{ route('addCategory.store') }}"
                                    enctype="multipart/form-data">

                                    @csrf
                                    <input type="hidden" name="vendor_id" value=1>
                                    <input type="hidden" name="storeId" value="">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="form-control-label"
                                                    for="input-username">{{ __('English Main Category Name') }} </label>
                                                <input type="text" name="CategoryName" required class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="form-control-label"
                                                    for="input-username">{{ __('Arabic Main Category Name') }}</label>
                                                <input type="text" name="CategoryNamear" required class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="form-control-label"
                                                    for="input-phone_number">{{ __('Image') }}</label>
                                                <input type="file" id="input-phone_number" name="category_image"
                                                    class="form-control" placeholder="{{ __('Enter Category Image') }}"
                                                    value="" accept="image/*" required>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary">{{ __('Add categories') }}</button>
                                </form>
                            </div>
                        </div>
                    </div>

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

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header border-0">
                        <h3 class="mb-0">{{ __('Category table') }}</h3><br>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" class="sort" data-sort="budget" id="ignorStyle" width="20%">
                                        {{ __('English Category Name') }}
                                    </th>
                                    <th scope="col" class="sort" data-sort="budget" id="ignorStyle" width="20%">
                                        {{ __('Arabic Category Name') }}
                                    </th>
                                    <th scope="col" class="sort" data-sort="budget" id="ignorStyle" width="20%">
                                        {{ __('Image') }}
                                    </th>
                                    <th scope="col" class="sort" data-sort="budget" id="ignorStyle" width="15%">
                                        {{ __('Status') }}
                                    </th>
                                    <th scope="col" class="sort" data-sort="budget" id="ignorStyle" width="5%">
                                        {{ __('Edit') }}
                                    </th>
                                    <th scope="col" class="sort" data-sort="budget" id="ignorStyle" width="20%">
                                        {{ __('Action') }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="list">
                                @foreach ($categories as $category)
                                    <tr id="{{ $category->id }}">
                                        <form method="POST" class="makeITinline"
                                            action="{{ route('UpdateStoreCategory.update', $category->Status) }}"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <input type="hidden" value="{{ $category->id }}" name="catid">

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <input type="text" class="col-sm-12 form-control"
                                                            value="{{ $category->name_en }}" name="CategoryStoreName">
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <input type="text" class="col-sm-12 form-control"
                                                            value="{{ $category->name_ar }}" name="CategoryStoreNameAr">
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="media-body">
                                                        <img src="{{ asset($category->category_image) }}" width="100%"
                                                            alt="{{ __('Category Image') }}" style="height:100px">
                                                        <input type="file" id="input-phone_number"
                                                            name="category_image" class="form-control" accept="image/*">
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="media align-items-center">
                                                    <div class="col-sm-12 media-body">
                                                        <select class="form-control" name="CategoryStatus">
                                                            <option value="0"
                                                                {{ $category->status == 0 ? 'selected' : '' }}>
                                                                {{ __('InActive') }}
                                                            </option>
                                                            <option value="1"
                                                                {{ $category->status == 1 ? 'selected' : '' }}>
                                                                {{ __('Active') }}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <button type="submit" class="btn btn-outline-primary" id="updateCat">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </button>
                                            </td>

                                            <td>
                                        </form>
                                        <form method="GET" class="makeITinline" action="{{ route('items.index') }}">
                                            <input type="hidden" name="category_id" value="{{ $category->id }}">
                                            <input type="hidden" name="store_id" value="{{ $_GET['store_id'] }}">
                                            <button type="submit" class="btn btn-outline-default">
                                                <span>{{ __('Items') }}</span>
                                                <i class="fas fa-sitemap fa-lg"></i>
                                                <i class="fas fa-bag fa-lg"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('DeleteCategory.destroy', $category->id) }}"
                                            method="post" id="delete{{ $category->id }}" style="display: none"
                                            data-swal-title="{{ __('Delete Category') }}"
                                            data-swal-text="{{ __('Are You Sure To DeleteCategory?') }}"
                                            data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}"
                                            data-success-msg="{{ __('the Category has been deleted successfully') }}">
                                            @csrf
                                            @method('delete')
                                        </form>
                                        <span href="#"
                                            class="control-link btn btn-outline-danger remove form-confirm"
                                            data-form-id="#delete{{ $category->id }}">
                                            <i class="far fa-trash-alt"></i>
                                        </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection