@extends('layout.master')
@section('content')
    <!-- Main Content-->

    <div class="main-content side-content pt-0">
        <div class="main-container container-fluid">
            <div class="inner-body">
                <!-- Page Header -->
                <div class="page-header d-flex justify-content-between">
                    <div>
                        <h2 class="main-content-title tx-24 mg-b-5">Chemical Details</h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page"> Chemicals</li>
                        </ol>
                    </div>
                    @if (!isset($chemicalsR))
                        <div>
                            <a class="btn btn-primary text-white d-flex align-items-center gap-2 justify-content-center"
                                href="{{ route('chemical.create') }}"> <i class="ti-plus"></i> Create Chemicals</a>
                        </div>
                    @endif
                </div>
            </div>
            @if (session('success'))
                <p class="text-success">{{ session('success') }}</p>
            @endif

            @if ($errors->any())
                <ul>
                    @foreach ($errors->all() as $error)
                        <li class="text-danger">{{ $error }}</li>
                    @endforeach
                </ul>
            @endif

            <div class="row row-sm">

                @if (!isset($chemicalsR))
                    <div class="col-lg-12">
                        <div class="card custom-card overflow-hidden">
                            <div class="card-body">
                                <div class="container">
                                    <form action="{{ route('chemicals.import') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">CSV File:</div>
                                                <input type="file" name="file" id="file" class="form-control"
                                                    required>
                                            </div>
                                            <div class="d-flex justify-content-end">
                                                <button class="btn btn-success col-md-3" type="submit">Import</button>
                                            </div>

                                        </div>
                                    </form>

                                    <form action="{{ route('chemicals.importChemical') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">CSV File: Chemical Recommendation
                                                </div>
                                                <input type="file" name="file" id="file" class="form-control"
                                                    required>
                                            </div>
                                            <div class="d-flex justify-content-end">
                                                <button class="btn btn-success col-md-3" type="submit">Import
                                                    Recommandation</button>
                                            </div>

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

            <div class="row row-sm">
                <div class="col-lg-12">
                    <div class="card custom-card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="example2">
                                    <thead>
                                        <tr>
                                            <th class="wd-20p">Id</th>
                                            <th class="wd-20p">Flammable</th>
                                            <th class="wd-20p">Name</th>
                                            <th class="wd-20p">Formula</th>
                                            <th class="wd-20p">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($chemicals as $key => $chemical)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ Str::limit($chemical->flammable, 10, '...') }}</td>
                                                <td>{{ $chemical->name }}</td>
                                                <td>{{ Str::limit($chemical->formula, 10, '...') }}</td>
                                                <td>
                                                    <a href="{{ route('chemical.edit', $chemical->id) }}"
                                                        class="btn btn-primary">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <a href="{{ route('chemical.show', $chemical->id) }}"
                                                        class="btn btn-secondary">
                                                        Show
                                                    </a>
                                                    <form action="{{ route('chemical.destroy', $chemical->id) }}"
                                                        method="POST" style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger"
                                                            onclick="return confirm('Are you sure?')">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>

                                </table>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="row row-sm">
                <div class="col-lg-12">
                    <div class="card custom-card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="example2">
                                    <thead>
                                        <tr>
                                            <th class="wd-20p">Id</th>
                                            <th class="wd-20p">Fire Rated</th>
                                            <th class="wd-20p">Type</th>
                                            <th class="wd-20p">Style</th>
                                            <th class="wd-20p">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($chemicalsR as $key => $chemical)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $chemical->fire_rated }}</td>
                                                <td>{{ $chemical->type }}</td>
                                                <td>{{ $chemical->style }}</td>
                                                <td>
                                                    <a href="{{ route('suggested.suggestededit', $chemical->id) }}"
                                                        class="btn btn-primary"> <i class="fa fa-edit"></i> </a>


                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>

                                </table>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            @endif

        </div>

    </div>


@endsection